用户样式

来自Org
跳转至: 导航搜索

您当前所在的位置:首页 > 读者手册 > 用户样式

字体、颜色、链接的位置,还有很多很多其他的东西,都可以自行设定!通过在用户页的子页面放一个样式表,你就能做到这点。

例如,想要用你自己的CSS规则去调整默认的monobook.css,可以创建一个User:你的用户名/monobook.css页面,然后写上你想要的CSS规则。

概述

注意:在默认配置下,所有的用户样式代码会被忽略。要启用它,先得在LocalSettings.php里面写这样两行:

$wgAllowUserJs  = true;
$wgAllowUserCss = true;

在用户样式设定的时候,首先要选中一个-{A|zh:皮肤; zh-tw:面版}-,然后系统会确定相应的层叠样式表(CSS)。用户可针对每个皮肤对字体,颜色,页边链接的位置等做不同的选择。CSS是用选择器[1]来定制的,每个选择器作用的对象包括元素、class和id。它们在具体的HTML代码中定义。因此,只要查看HTML源代码,便可知道一个皮肤可以怎么样调整。尤其是那些class和id越多,则变化就越多。

所有皮肤都会共用MediaWiki:Common.css文件中定义的样式,其他的样式则依选择的皮肤不同而存放在分离的文件中。例如,中文维基百科中默认的样式为:

在元维基中则为:

放在样式目录的文件是供特定的皮肤使用的,它们在各个维基项目中大致上相同。样式表目录的名字在安装的时候就设置好了,参见LocalSettings.php#Stylesheet_Location

在monobook皮肤中,现在你可以通过Javascript以及CSS改变[2]zh:MediaWiki:Monobook.css或类似的样式定义。所作的改变是放在你的用户页子页面monobook.css和monobook.js中。

你同样可以改变标准皮肤;用户页面应该这样起名:User:用户名/ standard.css 和User:用户名/ standard.js(其它的皮肤类推)。

只要输入一些css或者js代码到该页即可。该页面的预览会有些特别:它能让你根据页面所定义的样式看到页面的边界(而不是内容),只要所用的皮肤正好要用到正在预览的页面。这样会有些限制,例如你会看到边界范围内的链接看起来怎么样,但也许看不到你想要检查的所有类型的内容。在保存之后,不管还在该页面或是转到了其它页面,可以手动刷新(shift-reload/ctrl-f5)获得新文件。

特定皮肤(在这里是//www.18dao.org/style/wikistandard.css )的项目通用CSS及个性化的JS和CSS是通过

<script type="text/javascript"
src="/w/wiki.phtml?title=User:username/standard.js&action=raw&ctype=text/javascript">
</script>
@import "/style/wikistandard.css";
@import "/w/wiki.phtml?title=User:username/standard.css&action=raw&ctype=text/css";

这样的HTML源代码进行链接的。

“MySkin”没对应的main.css。个性化的css页面是在User:用户名/ myskin.css(全部小写!)。

参见Help:站点范围的css维基页.

CSS

子页面的 CSS 对比本地 CSS 文件

作为以上内容的补充或者另一种选择,你可以在浏览器上设定一个本地的 CSS 文件。如果你使用多种浏览器,每个都可以设置到一个不同的CSS。它们会应用到整个万维网,而不仅仅用于MediaWiki项目(而且无需登录)。然而,设定仅在具有相同的class名字的时候才能生效;比如选择器a.exitw影响的页面就比选择器h2影响的少。

对于必须在不同的MediaWiki项目有不同效果的样式代码行,比如打算用不同的背景颜色来区分,很明显不能用本地CSS;这些样式代码行应该放在用户子页面。

某些机器,例如网吧里面的,不允许用户设定浏览器参数。这些情况下用户子页面仍然允许设定用户样式。

当浏览器设定为忽略网页内及外部 CSS 中的字体大小的时候,设定字体大小样式的代码行只能放在本地CSS里面。

CSS选择器

CSS选择器分为元素、class和id的选择器三种,页面主体有关的样式在下面列出。只要可能,就提供一个显示其效果的例子。

  • :link - 链接 - 例如: help:index (参见 a 对比 :link
  • :link:link
  • :link:visited
  • :link#contentTop
  • :link.external - http://example
  • :link.extiw – 跨维基连接 - zh:例子
  • :link.image – 从完整图像到图像描述页的链接
  • :link.internal – 链接到文件本身(Media:),或者从缩略图及标志图标到图像描述页(注意对a.internel指定的颜色和字体大小仅适用于第一种情况) - Media:example
  • :link.new example
  • body.ns-0, ..., body.ns-15 (名字空间)
  • div#bodyContent
  • div#column-content
  • div#editsection
  • div#globalWrapper
  • div#tocindent
  • div.tocline
  • h1.firstHeading
  • h2
  • h3
  • img.tex TeX 图片
  • small - 示例
  • table.toc

a 对比 :link - 用"a"代替":link"设定链接的样式是常见的误用。这里":link"仅适用于链接,"a"适用于链接和命名锚点(例如<a name="书签">)。

正常的内部链接不属于internel这个class(以前是属于的,使用旧版软件的网站现在也还是这样,例如[3]);它们可以用:link和:link:visited设定样式。一般来说:link.extiw后面的一些选择器可以用来设置链接样式的一些特殊情况。

跨语言链接可以用:

  • #p-lang a

你也可以使样式取决于某个属性的值,例如,以下的选择器:

  • :link[title ="User:用户名"]
  • :link[title ="页面名"]
  • :link[href ="完整url"]

可以用来设定用户(包括你自己)以及到特定页面的链接的颜色,或使之高亮显示,就像在最近更改里面已监视页面会被加黑一样。在Opera里可以做到这点,但IE不支持。参见Help:监视页面#Css

监视列表和最近更改使用两个class: The watchlist and Recent Changes use two classes:

  • autocomment
    示例
  • new (见下)

页面历史具有autocomment这个class,而且还有:

  • user
  • minor

于是为user设定的字体可用于页面历史,但不用于监视列表或者最近更改。

编辑页面

在编辑页面中使用下列选择器:

  • 编辑框: textarea#wpTextbox1
示例
  • 编辑摘要框: input#wpSummary
示例

主要样式块

以下内容是针对Monobook皮肤的默认布局。其它皮肤的布局可能与此不同,敬请留意。

  • column-content - 边框里面有内容的所有空间
  • content - 白色背景、细边框线的含有页面主要内容的框,叫内容框
  • firstHeading - 每个页面顶部标记的class
  • bodyContent - 在内容框里面的页面主要内容
  • contentSub - 维基页面里紧跟在主头部下方,但在主体文本以上

portlet这个class用来设定主内容周围的所有div块。下面的选择器可以用来分辨不同的块:

  • p-cactions - 主内容上方那个标签列表的id
  • p-personal - 在页面顶端、含有登陆/退出链接的那个链接列表的id
  • p-logo - 左上方含有维基标志的那个块的id
  • p-navigation - 左方含有导航链接的那个块的id
  • p-search - 含有搜索按钮的那个块的id
  • p-tb - 工具块的id
  • p-lang - 跨语言链接块的id

页面底部的页脚部分那些块可以用这些id:

  • footer - 整个页脚容器块
  • f-poweredbyico - “Power by mediawiki”图像,通常放在右方
  • f-list - 页面底部所有文字用这个id

不显示

一个极端的文本“样式”是根本不予显示,例如

.class名 {display: none}
#id {display: none}

等等。

不显示的链接是不能发挥作用的(但是字体极小的链接却可以)。

它不能用来刈除表达式中的文本,例如模版名称、参数名称、参数值、链接里面的页面名称,等等。

在元维基和英文维基百科的MediaWiki:Common.css文件中含有如下样式定义:

.hiddenStructure {display: none}

依赖于参数和变量的样式

可变的 class 及 id

class 和 id 可以依赖于模板或者模板参数,例如可以写class="abc{{{1|def}}}"。这样可以为一个或多个class名称定义同一类型的样式。如果该class未定义,将会被忽略,而采用标准的样式。

最简单的情况就是我们写出class="abc{{{1}}}"并且定义一个class名为abcdef。如果模板参数为“def”就会用上这个class。

如果一个通用页面仅在这些特定的classes的样式定义好的情况下才有意义,那么它们必须定义在MediaWiki:Common.css里面,它应用于所有用户和所有皮肤,只要它们没被覆盖掉。在这个项目里面:

模板:Pimcnl

这会被应用于模板:Tim.

可变的HTML属性名

HTML属性名可以弄成可变的。HTML Tidy在服务器端移除名字不合法的属性,因此其结果不依赖于是否忽略属性值的浏览器兼容性设置,而且传送的数据量也减少了。请参考w:en:Wikipedia:HiddenStructure模板:Tim了解“class”值的可能变化。

可变的样式参数值

如果参数3而不是“none”被定义的话,象

<span style="display:{{{3|none}}}">星期三</span>

这样的维基文本显示为“星期三”。如果参数3的值是一个“none”以外的display样式,这个样式会被用上。

可变的样式参数值

如果参数3而不是“none”被定义的话,象

<span style="display:{{{3|none}}}">星期三</span>

这样的维基文本显示为“星期三”。如果参数3的值是一个“none”以外的display样式,这个样式会被用上。

示例

/* 设置内容区和标签底色为浅灰 */
#content, #内容区
#p-cactions ul li a { background: #f5f5f5; }

/* 内容区的背景图片不要滚动 */
body { background-attachment: fixed; }

/* replace the book in the background with something else */
body { background: Purple; }

/* changes the background of pre areas  */
pre { background: White }

/* change the logo */
#p-logo a { background: url(http://en.wikipedia.org/upload/wiki.png) 35% 50% no-repeat !important; }

/* don't use any logo, move the boxes onto that area instead */
#p-logo { display: none }
#column-one { padding-top: 0; }

/* suppress the person icon by your username */
li#pt-userpage { background: none }

/* use browser prefs for text size and font */
body, #globalWrapper { font: inherit !important; }

/* always underline links */
:link { text-decoration: underline; }

/*Display body content in a narrower column for easier reading*/
/*adjust percentages as desired*/
div#bodyContent {
  width: 50%;
  line-height: 105%;
}

/* change background of unselected tabs */
#p-cactions ul li a { background: #C7FDC7; }

/* change background of selected tabs */
#p-cactions ul li.selected a { background: white; }

/* change border background of selected tabs */
#p-cactions li.selected { border-color: #aaaaaa; }

/* tab bottom not removed on hover */
#p-cactions li a:hover { z-index: 0; text-decoration: none; }
#p-cactions li.selected a:hover { z-index: 3; }

/* style the search box and the buttons below it */
input.searchButton {
    background-color: #efefef !important;
    border: 1px outset !important;  
}
#searchInput { border: 1px inset !important; }

/* standard link colors */
:link { color: #0000FF; }
:link:visited { color: #7F007F; }
:link:active, :link.new { color: #FF0000; }
:link.interwiki, :link.external { color: #3366BB; }
:link.stub { color: #772233; }

/* put scrollbar on pre sections instead of ugly cutoff/overlap in firefox */
pre { overflow: auto; }

/* strikeout Upload File link as a reminder to upload to Commons instead */
li#t-upload { text-decoration: line-through; }

Rounded corners in Mozilla

/* make a few corners round, only supported by moz/firefox/other gecko browsers for now */
#p-cactions ul li, #p-cactions ul li a {  
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
}
#content { 
  -moz-border-radius-topleft: 1em; 
  -moz-border-radius-bottomleft: 1em;
}
div.pBody {
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomright: 1em;
}

/* same following the css3 draft specs, any browsers supporting this? */
#p-cactions ul li, #p-cactions ul li a {  
  border-radius-topleft: 1em;
  border-radius-topright: 1em;
}
#content { 
  border-radius-topleft: 1em;
  border-radius-bottomleft: 1em;
}
div.pBody {
  border-radius-topright: 1em;
  border-radius-bottomright: 1em;
}


文件:Rounded corners.png
Rounded corner rules in firefox
Rounded corners/tabs links

Print view tweaks

/*
** Place all print-specific rules in an @media print block.
*/

/* save ink and paper with very small fonts */
@media print {
    #footer,
    #content,
    body { font-size: 8pt !important; }
    h1 { font-size: 17pt }
    h2 { font-size: 14pt }
    h3 { font-size: 11pt }
    h4 { font-size: 9pt }
    h5 { font-size: 8pt }
    h6 { 
        font-size: 8pt;
        font-weight: normal;
    }
}

/* Advanced things: using :before and :after it's possible to add formatting 
this here adds the full href of a link after it (not needed in the current version): */
@media print {
  #content a:link:after, 
  #content a:visited:after {
     content: " ( " attr(href) " ) ";
  }
}

Make the user toolbar a sidebox

Tested to work in Camino and Safari.

/* Transform the user toolbar into a sidebox */
#p-personal {
    position:relative;
    z-index:3;
    width: 11.6em;
}

#p-personal .pBody {
    width: 10.7em;
    border: none;
    margin: 0 0 0.1em 0em;
    float: none;
    overflow: hidden;
    font-size: 95%;
    background: White;
    border-collapse: collapse;
    border: 1px solid #aaaaaa;
    padding: 0 0.8em 0.3em .5em;
}

#p-personal ul {
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url("/style/monobook/bullet.gif");

    font-size:95%;
    margin: 0 0 0 1.5em;
    padding:0;
    text-align:left;
    text-transform: none;
}

#p-personal li {
    display: list-item;
    padding:0;
    margin: 0 0 0 0;
    margin-bottom: 0.1em;
}

/* suppress the person icon by your username */
/* needed if not already in place */
li#pt-userpage { background: none }

See the monobook main.css for the full styles in use by default.

Fix the sidebar's position while you scroll

文件:Fixed sidebar.png
This script and CSS makes the sidebar stay in the same position on the screen as you scroll

The Cologne Blue skin has an option for a "floating left" quickbar, which causes the navigation links and toolboxes and such to stay in the same position on the screen while you scroll. This provides the same functionality for the Monobook skin (in Mozilla). See Help:User style/floating quickbar

Having some problems with this in FF1.0.7 & 1.5.0.1. Tabs appear to be in navigation frame and aren't displayed with content column, but footer is. CSS file appears to be causing. Followed Help:User style/floating quickbar. Thanks for any help! --Superwad 10:17, 21 February 2006 (UTC)

Monobook menus with serif fonts in the content area

I've hacked together a q&d combinaton of monobook menus with serif fonts in the text area; there are some quirks and bugs (some because the css scheme of wikipedia doesn't seem to be soo thoughtful), but if you want to give it a try or have a look, go to [4] and copy the first part. No warranty; works on Netscape7/Win98 for me ... -- Tillwe 14:05, 30 May 2004 (UTC)

Update (01.06.04): Now also displays table formatted things more or less correctly. -- Tillwe 17:45, 1 Jun 2004 (UTC)

Moving category links

Moves category links in the upper right corner of content area, and paints them gray -- Tillwe 21:22, 31 May 2004 (UTC)

Small fix --Ævar Arnfjörð Bjarmason 22:05, 15 Jun 2004 (UTC)

/******************************************************************/
/* moving catlinks to the right                                   */
/******************************************************************/

/* move the catlinks box */
#catlinks {  
  position:absolute;
  z-index:1;
/*  border: 1px solid #aaaaaa; 
  background: #fafaff; */
  right:1em; 
  top:-0.25em;
  width:10.5em;
  float:right;
  margin: 0.2em;
  padding:0.2em;
}

/* format the catlinks itself */
p.catlinks {
  color: #aaaaaa;
  font-family: Verdana,sans-serif;
  font-size:67%;
  line-height: 1.5em;
  text-align:left;
  text-indent:0;
  text-transform: none;
  white-space:normal;
  margin: 0.2em;
}

#p-personal h5 {
    display: inline;
}

/* format links in the catlinks (as distinguished from ":" and "|") */
p.catlinks a {
  color:#888888;
}

Diff view styling

/* don't use a smaller font */
td.diff-addedline, td.diff-deletedline, td.diff-context { font-size: 100% };

/* underline just the text that's different */
span.diffchange { text-decoration:underline; }

External links on css

Javascript

As mentioned above, the page to add is called monobook.js in this case. Want to have the same links as in the tabs also at the bottom of the page? - Clone it onload and drop it somewhere near the bottom. Want to add personal links/boxes/whatever ? You can do it.

Duplicate edit links at the bottom of the content area

See User Styles/bottom tabs

文件:Bottomlinks.png
Simple version of bottom links in action

Changing access keys

These are now defined/set from js, you can easily customize them by changing some elements in the 'ta' array (see [5]). Example line:

ta['ca-nstab-main'] = new Array('c','View the content page');

Just change 'c' to something else to change the access key. To disable all access and tooltips, drop

ta = false;

in your monobook.js.

Moving categories to top

The following code moves the category box to the top of the article. Of course, you might want to apply some CSS to make it look prettier:

function catsattop() {
  var cats = document.getElementById('catlinks');
  var bc = document.getElementById('bodyContent');
  bc.insertBefore(cats, bc.childNodes[0]);
}

An alternative that, when coupled with an appropriate stylesheet, will put the text up at about the same line as the title:

function categoryToTop() {
  var thebody = document.getElementById('contentTop');
  var categories = document.getElementById('catlinks');

  if (categories != null) {
    categories.parentNode.removeChild (categories);
    thebody.parentNode.insertBefore(categories, thebody);
  }
}

Some CSS to go with that...

/* move the catlinks box */
#catlinks {  
  right:1em; 
  top:-0.25em;
  max-width: 50%; /* this limits the box size, but doesn't set strictly */
  float: right;
  margin: 0.5em;
  padding: 0.2em;
}

/* format the catlinks itself */
p.catlinks {
  font-size:67%;
  text-align:left;
  text-indent:0;
  text-transform: none;
  white-space:normal;
  margin: 0.2em;
}

External links on JS

关于“用户样式”的留言:

目前暂无留言

新增相关留言