Help:用户样式
维基百科，自由的百科全书
注意：翻译前请参考最新的英文版!
字体、颜色、链接的位置，还有很多很多其他的东西，都可以自行设定！通过在用户页的子页面放一个样式表，你就能做到这点。
例如，想要用你自己的CSS规则去调整默认的monobook.css，可以创建一个User:你的用户名/monobook.css页面，然后写上你想要的CSS规则。
目录 |
[编辑] 概述
注意：在默认配置下，所有的用户样式代码会被忽略。要启用它，先得在LocalSettings.php里面写这样两行：
$wgAllowUserJs = true; $wgAllowUserCss = true;
在用户样式设定的时候，首先要选中一个皮肤，然后系统会确定相应的层叠样式表（CSS）。用户可针对每个皮肤对字体，颜色，页边链接的位置等做不同的选择。CSS是用选择器[1]来定制的，每个选择器作用的对象包括元素、class和id。它们在具体的HTML代码中定义。因此，只要查看HTML源代码，便可知道一个皮肤可以怎么样调整。尤其是那些class和id越多，则变化就越多。
所有皮肤都会共用MediaWiki:Common.css文件中定义的样式，其他的样式则依选择的皮肤不同而存放在分离的文件中。例如，中文维基百科中默认的样式为：
- http://zh.wikipedia.org/style/monobook/main.css 及 zh:MediaWiki:Monobook.css
- http://zh.wikipedia.org/style/wikistandard.css 及 zh:MediaWiki:Standard.css
- http://zh.wikipedia.org/style/cologneblue.css 及 zh:MediaWiki:Cologneblue.css（科龙香水蓝）
- http://zh.wikipedia.org/style/nostalgia.css 及 zh:MediaWiki:Nostalgia.css（怀旧）
- zh:MediaWiki:Myskin.css
在元维基中则为：
- http://meta.wikimedia.org/style/monobook/main.css 及 MediaWiki:Monobook.css
- http://meta.wikimedia.org/style/wikistandard.css 及 MediaWiki:Standard.css
- http://meta.wikimedia.org/style/cologneblue.css 及 MediaWiki:Cologneblue.css
- http://meta.wikimedia.org/style/nostalgia.css 及 MediaWiki:Nostalgia.css
- Template:Myskin.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）获得新文件。
特定皮肤（在这里是http://zh.wikipedia.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里面，它应用于所有用户和所有皮肤，只要它们没被覆盖掉。在这个项目里面：
MediaWiki:Common.css (讨论页, 反向链接, [4], 编辑) 含有以下内容:
/* Common CSS for all skins */
/* Notice to Administrators! Any changes to Monobook.css or Common.css should be first proposed to [[Wikipedia:Village Pump]]. Thank you. */ /*<pre><nowiki>*/
/* make the list of references look smaller */ ol.references {
font-size: 100%;
}
.references-small { font-size: 90%;}
/* VALIDATOR NOTICE: the following is correct, but the W3C validator doesn't accept it */ /* -moz-* is a vendor-specific extension (CSS 2.1 4.1.2.1) */ /* column-count is from the CSS3 module "CSS Multi-column Layout" */ /* Please ignore any validator errors caused by these two lines */ .references-2column {
font-size: 90%; -moz-column-count:2; column-count:2;
}
.same-bg { background: none }
/* wikitable/prettytable class for skinning normal tables */
table.wikitable, table.prettytable {
margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaaaaa solid; border-collapse: collapse;
}
table.wikitable th, table.wikitable td, table.prettytable th, table.prettytable td {
border: 1px #aaaaaa solid; padding: 0.2em;
}
table.wikitable th, table.prettytable th {
background: #f2f2f2; text-align: center;
}
table.wikitable caption, table.prettytable caption {
margin-left: inherit; margin-right: inherit;
}
/* Style for "notices" */ .notice {
text-align: justify; margin: 1em; padding: 0.2em;
}
- disambig {
border-top: 3px double #cccccc; border-bottom: 3px double #cccccc;
}
- spoiler {
border-top: 2px solid #ddd; border-bottom:2px solid #ddd;
}
/* Standard talk template style */
.Talk-Notice {
border: 1px solid #C0C090; background-color: #F8EABA; margin-bottom: 3px; width: 80%; border-spacing: 3px; margin-left: auto; margin-right: auto;
}
.Talk-Notice:after {
content: "The CSS for this template should be changed. See [[Wikipedia:Template Standardisation]].";
}
/* Make template background appear correctly on all browsers */ .Talk-Notice td {
background: inherit;
}
/* Metadata */ table.metadata {
border: 1px solid #aaaaaa; display: none; speak: none;
} .metadata-label {
color: #aaaaaa;
}
/* Makes redirects appear in italics on [[Special:Allpages]] */ .allpagesredirect {
font-style: italic;
}
/* Choose whether to have AD/BC dates or CE/BCE dates*/
/* First, the default : display both : See templates ADCE and BCEBC for how these are used*/ .Use_Default_Date_Convention { display: inline; } .Use_AD_and_BC { display: none; } .Use_BCE_and_CE { display: none; }
/* If you want to display AD and BC add the following to User:You/monobook.css page */ /* .Use_Default_Date_Convention { display: none; } .Use_AD_and_BC { display:inline; } .Use_BCE_and_CE { display:none; }
- /
/*If you want to display CE and BCE add the following to User:You/monobook.css page */ /* .Use_Default_Date_Convention { display: none; } .Use_AD_and_BC { display:none; } .Use_BCE_and_CE {display:inline; }
- /
/* Class for links with loudspeaker icon next to them */
.audiolink a{
background: url("http://upload.wikimedia.org/wikipedia/commons/f/f7/Loudspeaker.png") center left no-repeat !important;
padding-left: 16px !important;
padding-right: 0 !important;
}
/* Icons for medialist templates [[Template:Listen]], [[Template:Multi-listen_start]], [[Template:Video]], [[Template:Multi-video_start]] */
div.listenlist {
background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/30px-Gnome-speakernotes.png");
padding-left: 40px;
}
div.videolist {
background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Video.svg/40px-Video.svg.png");
padding-left: 50px;
}
div.multivideolist {
background: url("http://upload.wikimedia.org/wikipedia/en/thumb/7/7a/FilmRoll-small.png/40px-FilmRoll-small.png");
padding-left: 50px;
}
/* Style rules for media list templates */
div.medialist {
min-height: 50px; margin: 1em; background-position: top left; background-repeat: no-repeat;
}
div.medialist ul {
list-style-type: none; list-style-image: none; margin: 0;
}
div.medialist ul li {
padding-bottom: 0.5em;
}
div.medialist ul li li {
font-size: 91%; padding-bottom: 0;
}
/*Add formatting to make sure that "external references" from [[Template:Ref]] do
not get URL expansion, not even when printed. The mechanism up to MediaWiki 1.4 was that the HTML code contained a SPAN following the anchor A; this SPAN had the class "urlexpansion", which was not displayed on screen, but was shown when the medium was "print". The rules below ensure (a) that there is no extra padding to the right of the anchor (displayed as "[<number>]"), (b) that there is no "external link arrow" for the link, and (c) that this SPAN of class "urlexpansion" is never shown. ~~~~
- /
.plainlinksneverexpand {
background: none ! important; padding: 0 ! important;
}
.plainlinksneverexpand .urlexpansion {
display: none ! important;
}
/* Make sure that ext links displayed within "plainlinksneverexpand" don't get
the arrow...
- /
.plainlinksneverexpand a {
background: none !important; padding: 0 !important;
}
/* With MediaWiki 1.5, the mechanism has changed: instead of a SPAN of class "urlexpansion"
following the anchor A, the anchor itself now has class "external autonumber" and the expansion is inserted when printing (see the common printing style sheet at http://en.wikipedia.org/skins-1.5/common/commonPrint.css) using the ":after" pseudo- element of CSS. We have to switch this off for links due to Template:Ref! ~~~~
- /
.plainlinksneverexpand a.external.text:after {
display: none !important;
} .plainlinksneverexpand a.external.autonumber:after {
display: none !important;
}
/* Merge template style */
.messagebox {
border: 1px solid #aaaaaa; background-color: #f9f9f9; width: 80%; margin: 0 auto 1em auto; padding: .2em; text-align: justify;
} .messagebox.merge {
border: 1px solid #cf9fff; background-color: #f5edf5; text-align: center;
} .messagebox.cleanup {
border: 1px solid #9f9fff; background-color: #efefff; text-align: center;
} .messagebox.standard-talk {
border: 1px solid #c0c090; background-color: #f8eaba;
}
/* Infobox template style */
.infobox {
border: 1px solid #aaaaaa; background-color: #f9f9f9; color: black; margin-bottom: 0.5em; margin-left: 1em; padding: 0.2em; float: right; clear: right;
} .infobox td, .infobox th {
vertical-align: top;
} .infobox caption {
font-size: larger; margin-left: inherit;
} .infobox.bordered {
border-collapse: collapse;
} .infobox.bordered td, .infobox.bordered th {
border: 1px solid #aaaaaa;
} .infobox.bordered .borderless td, .infobox.bordered .borderless th {
border: 0;
}
.infobox.sisterproject {
width: 20em; font-size: 90%;
}
/* Support for Template:IPA, Template:Unicode and Template:Polytonic. The inherit declaration resets the font for all browsers except MSIE6. The empty comment must remain. */ .IPA {
font-family: Chrysanthi Unicode, Doulos SIL, Gentium, GentiumAlt, Code2000, TITUS Cyberbit Basic, DejaVu Sans, Bitstream Cyberbit, Arial Unicode MS, Lucida Sans Unicode, Hiragino Kaku Gothic Pro, Matrix Unicode;
font-family /**/:inherit;
} .Unicode {
font-family: TITUS Cyberbit Basic, Code2000, Doulos SIL, Chrysanthi Unicode, Bitstream Cyberbit, Bitstream CyberBase, Thryomanes, Gentium, GentiumAlt, Visual Geez Unicode, Lucida Grande, Arial Unicode MS, Microsoft Sans Serif, Lucida Sans Unicode;
font-family /**/:inherit;
} .latinx {
font-family: TITUS Cyberbit Basic, Code2000, Microsoft Sans Serif;
font-family /**/:inherit;
} .polytonic, .interwiki-el a {
font-family: Athena, Gentium, Palatino Linotype, Arial Unicode MS, Lucida Sans Unicode, Lucida Grande, Code2000;
font-family /**/:inherit;
} .mufi {
font-family: Alphabetum, Cardo, LeedsUni, Junicode, TITUS Cyberbit Basic, ALPHA-Demo;
} .interwiki-ja a {
font-family: "Meiryo", "MS PMincho", "MS Mincho", "MS PGothic", "MS Gothic", "Arial Unicode MS";
} .interwiki-ko a {
font-family: "Malgun Gothic", "Gulim", "Dotum", "Arial Unicode MS";
} .interwiki-ru a, .interwiki-uk a, .interwiki-be a, .interwiki-bg a, .interwiki-sr a, .interwiki-mk a, .interwiki-os a, .interwiki-tg a, .interwiki-mo a,.interwiki-kk a, .interwiki-ky a, .interwiki-tt a, .interwiki-ba a, .interwiki-cv a, .interwiki-mn a, .interwiki-xal a, .interwiki-udm a,.interwiki-ab a, .interwiki-av a, .interwiki-ce a {
/* 西里爾字母 */
font-family: "Times CY", "Times New Roman", Times, serif;
} .interwiki-ar a, .interwiki-fa a, .interwiki-ur a, .interwiki-ug a {
/* 阿拉伯字母 */
font-family: "Arial Unicode MS", "Microsoft Sans Serif", "Times New Roman", Times, serif;
direction: rtl;
} .interwiki-he a, .interwiki-yi a {
/* 希伯來字母 */
font-family: Cardo, "Arial Unicode MS", Code2000, David, "Times New Roman", Times, serif;
direction: rtl;
} .interwiki-af a, .interwiki-als a, .interwiki-an a, .interwiki-ang a, .interwiki-ast a, .interwiki-az a, .interwiki-ba a, .interwiki-bat-smg a, .interwiki-bm a, .interwiki-br a, .interwiki-bs a, .interwiki-ca a, .interwiki-ceb a, .interwiki-co a, .interwiki-cs a, .interwiki-csb a, .interwiki-cy a, .interwiki-da a, .interwiki-de a, .interwiki-en a, .interwiki-eo a, .interwiki-es a, .interwiki-et a, .interwiki-eu a, .interwiki-ff a, .interwiki-fi a, .interwiki-fiu-vro a, .interwiki-fo a, .interwiki-fr a, .interwiki-frp a, .interwiki-fur a, .interwiki-fy a, .interwiki-ga a, .interwiki-gd a, .interwiki-gl a, .interwiki-gv a, .interwiki-ha a, .interwiki-hr a, .interwiki-ht a, .interwiki-hu a, .interwiki-ia a, .interwiki-id a, .interwiki-ie a, .interwiki-ilo a, .interwiki-io a, .interwiki-is a, .interwiki-it a, .interwiki-jbo a, .interwiki-jv a, .interwiki-kg a, .interwiki-ksh a, .interwiki-ku a, .interwiki-kw a, .interwiki-la a, .interwiki-lad a, .interwiki-lb a, .interwiki-li a, .interwiki-lij a, .interwiki-lmo a, .interwiki-ln a, .interwiki-lt a, .interwiki-lv a, .interwiki-map-bms a, .interwiki-mi a, .interwiki-ms a, .interwiki-na a, .interwiki-nap a, .interwiki-nds a, .interwiki-nl a, .interwiki-nn a, .interwiki-no a, .interwiki-nrm a, .interwiki-oc a, .interwiki-om a, .interwiki-os a, .interwiki-pam a, .interwiki-pl a, .interwiki-pms a, .interwiki-pt a, .interwiki-rm a, .interwiki-ro a, .interwiki-sc a, .interwiki-scn a, .interwiki-sco a, .interwiki-se a, .interwiki-simple a, .interwiki-sk a, .interwiki-sl a, .interwiki-so a, .interwiki-sq a, .interwiki-su a, .interwiki-sv a, .interwiki-sw a, .interwiki-tet a, .interwiki-tpi a, .interwiki-tk a, .interwiki-tl a, .interwiki-tw a, .interwiki-tr a, .interwiki-uz a, .interwiki-vec a, .interwiki-vi a, .interwiki-wa a, .interwiki-war a, .interwiki-wo a, .interwiki-yo a, .interwiki-cdo a, .interwiki-zh-min-nan a {
font-family: "Times New Roman", Times, serif;
}
- wpSave {
font-weight: bold;
}
/* hiddenStructure from Monobook - allows selective hiding of markup in templates */ .hiddenStructure {
display: none; speak: none;
}
/* Removes underlines from links */ .nounderlines a {
text-decoration: none;
}
/* CSS for testing a new Main Page design, see [[Wikipedia:WikiProject Usability/Main Page]] */
- EnWpMainPage { width: 100%; margin-top: 1em; }
- EnWpMainPage h2 { font-size: 130%; font-weight: bold; margin: 0; padding: 0; border: 0; }
- EnWpMpMargin { margin-right: 13.8em; }
- EnWpMpCol1 { float: left; clear: left; width: 50%; }
- EnWpMpCol2 { width: 49.9%; float: left; }
- EnWpMpBrowse { background: #f8fcff url(http://upload.wikimedia.org/wikipedia/en/9/9f/MP-three-books.png) no-repeat 180% 9%; border: 1px solid #c7c7c7; }
- EnWpMpBrowseCats li { font-size: 85%; margin-left: 1em; line-height: 1.5; }
- EnWpMpBrowseCats h3 { font-size: 120%; margin: .2em 0 .1em -.8em; padding: 0; font-weight: normal; }
- EnWpMpBrowseCats h3 a { font-weight: bold; }
- EnWpMpBook { background-image: url(http://upload.wikimedia.org/wikipedia/en/7/7e/MP-open-book.png); }
- EnWpMpFeaturedPic { text-align: center; margin: 0 0 .5em; font-size: 85%; font-weight: bold; }
- EnWpMpFeaturedPic h2 { font-size: 145%; text-align: left; }
.EnWpMpBrowseRight { float: right; width: 12.7em; } .EnWpMpBrowseBottom { margin: 1em 0; } .EnWpMpBrowseBottom #EnWpMpBrowseCats li, .EnWpMpBrowseBottom #EnWpMpUsefulLinks, .EnWpMpBrowseBottom #EnWpMpFeaturedPic { float: left; width: 24%; margin: 0; line-height: normal; } .EnWpMpBrowseBottom #EnWpMpBrowseCats h3 { margin-left: 0; }
- EnWpMpUsefulLinks { clear: left; }
- EnWpMpSearch { background: url(http://upload.wikimedia.org/wikipedia/en/a/ae/MP-magnifying-glass.png) no-repeat top right; }
- EnWpMpSearch input { vertical-align: middle; }
- EnWpMpSearchInner { float: right; width: 20em; text-align: center; }
- bodySearchMP { margin: 0; padding: 0; }
- bodySearchMP .bodySearchWrap { float: right; width: 17.5em; text-align: left; padding: .8em 0; }
- bodySearchMP label { display: block; font-size: 95%; font-weight: bold; margin-bottom: -.2em; }
- bodySearchMP .bodySearchBtnGo { font-weight: bold; padding-left: .3em; padding-right: .3em; margin-left: .5em; }
.EnWpMpContentBox { border: 1px solid; margin-bottom: .9em; }
- EnWpMpCol2 .EnWpMpContentBox { margin-left: .9em; }
.EnWpMpImage { float: right; margin: 0 0 .2em .2em; } .EnWpMpImage img { position: relative; z-index: 3; }
- EnWpMpSisterProjects { float: left; width: 49%; }
.EnWpMpSisterProject { float: left; width: 17em; margin: 0; height: 5.5em; margin: 0; } .EnWpMpSisterImg { float: left; width: 40px; height: 100%; }
- EnWpMpOtherLangs { margin-left: 50%; }
- EnWpMainPageNoCSS { display: none; }
- EnWpMpBook2 { background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/8e/MP-open-book2.png); }
- EnWpMpSearch2 { background: url(http://upload.wikimedia.org/wikipedia/en/3/3a/MP-magnifying-glass2.png) no-repeat top right; }
/* Custom link colors for use in [[MediaWiki:Edittools]] */ .charboxblack a:link, .charboxblack a:hover, .charboxblack a:visited, .charboxblack a:active { color: black; } .charboxsilver a:link, .charboxsilver a:hover, .charboxsilver a:visited, .charboxsilver a:active { color: silver; } .charboxgray a:link, .charboxgray a:hover, .charboxgray a:visited, .charboxgray a:active { color: gray; } .charboxwhite a:link, .charboxwhite a:hover, .charboxwhite a:visited, .charboxwhite a:active { color: white; } .charboxmaroon a:link, .charboxmaroon a:hover, .charboxmaroon a:visited, .charboxmaroon a:active { color: maroon; } .charboxred a:link, .charboxred a:hover, .charboxred a:visited, .charboxred a:active { color: red; } .charboxpurple a:link, .charboxpurple a:hover, .charboxpurple a:visited, .charboxpurple a:active { color: purple; } .charboxfuchsia a:link, .charboxfuchsia a:hover, .charboxfuchsia a:visited, .charboxfuchsia a:active { color: fuchsia; }
.charboxgreen a:link, .charboxgreen a:hover, .charboxgreen a:visited, .charboxgreen a:active { color: green; } .charboxlime a:link, .charboxlime a:hover, .charboxlime a:visited, .charboxlime a:active { color: lime; } .charboxolive a:link, .charboxolive a:hover, .charboxolive a:visited, .charboxolive a:active { color: olive; } .charboxyellow a:link, .charboxyellow a:hover, .charboxyellow a:visited, .charboxyellow a:active { color: yellow; }
.charboxnavy a:link, .charboxnavy a:hover, .charboxnavy a:visited, .charboxnavy a:active { color: navy; } .charboxblue a:link, .charboxblue a:hover, .charboxblue a:visited, .charboxblue a:active { color: blue; } .charboxteal a:link, .charboxteal a:hover, .charboxteal a:visited, .charboxteal a:active { color: teal; } .charboxaqua a:link, .charboxaqua a:hover, .charboxaqua a:visited, .charboxaqua a:active { color: aqua; }
/* custom edits */ .allpagesredirect a:link { color:#0066ff;}
/* 维基共享资源图像巡视格式 */
/* 链接 */
.tickerDiffLink { } /* diff links in ticker */
.tickerMiscLink { } /* misc links in ticker */
/* 去除引点 */
.tickerList ul, .tickerList ul li { list-style: none; text-indent:-2em; margin-left:2em; text-align:left; }
.tickerList ul ul, .tickerList ul ul li { list-style: none; text-indent:0; margin-left:1.5em; text-align:left; }
/* 各种记录格式 */
.tickerEntry_deleted { } /* 图像删除记录 */
.tickerEntry_replaced { } /* 图像替换记录 */
.tickerEntry_tagged { } /* 加上或删去问题模板的图像记录 */
.tickerEntry_redir { } /* 图像重新定向记录 */
.tickerEntry_recat { } /* 图像重新分类记录 */
.tickerEntry_notify { } /* 全界的更改记录 */
.tickerEntry_changed { } /* 一般的更改记录 */
/* 各种行为格式 */
.tickerAction_deleted:before { content:"(×)"; color: #FF0000; font-family:monospace; font-weight:bold; font-size:100%; background: pink; }
.tickerAction_replaced:before { content:" REPL "; color: #CC88FF; font-family:monospace; font-weight:bold; font-size:100%; }
.tickerAction_addedBad:before { content:" +VfD "; color: #FF8800; font-family:monospace; font-weight:bold; font-size:100%; }
.tickerAction_removedBad:before { content:" -VfD "; color: #00BB00; font-family:monospace; font-weight:bold; font-size:100%; }
.tickerAction_addedGood:before { content:" +OK "; color: #00BB00; font-family:monospace; font-weight:bold; font-size:100%; }
.tickerAction_removedGood:before { content:" -OK "; color: #FF8800; font-family:monospace; font-weight:bold; font-size:100%; }
/* 巡视功能使用列表 */
.tickerUsage { font-size:80%; }
/* 每次记录应用用于多数图像的模板 */
.tickerTemplateEntry { font-weight: bold; }
/* 每次记录应用次要记录---应用模板的某图像 */
.tickerSubEntry { }
/* 次要记录格式 */
.tickerMinorEntry { color:#666; } /* minor entry */
.tickerMinorEntry a,
.tickerMinorEntry a:link,
.tickerMinorEntry a:visited { color:#669; }
#bodyContent .tickerMinorEntry a.extiw,
#bodyContent .tickerMinorEntry a.extiw:link,
#bodyContent .tickerMinorEntry a.extiw:visited { color:#669; }
/* Donations link to be uncommented during fundraising drives */
- siteNotice {
margin-top:5px; padding-left: 4px; font-style: italic; text-align: center;
}
/*
- fundraising {
text-align: center; border: 1px solid gray; padding: 5px;
}
- /
/****************************/ /* BEGIN LIGHT BLUE SECTION */ /****************************/ /* Make all non-namespace pages have a light blue content area. This is done by
setting the background color for all #content areas to light blue and then overriding it for any #content enclosed in a .ns-0 (main namespace). I then do the same for the "tab" background colors. --Lupo */
- content {
background: #F8FCFF; /* a light blue */
}
- content div.thumb {
border-color: #F8FCFF;
}
.ns-0 * #content {
background: white;
}
- mytabs li {
background: #F8FCFF;
}
.ns-0 * #mytabs li {
background: white;
}
- mytabs li a {
background-color: #F8FCFF;
}
.ns-0 * #mytabs li a {
background-color: white;
}
- p-cactions li a, #p-cactions li a:hover, #p-cactions li.selected a {
background-color: #F8FCFF;
}
.ns-0 * #p-cactions li a {
background-color: #fbfbfb;
}
.ns-0 * #p-cactions li.selected a, .ns-0 * #p-cactions li a:hover {
background-color: white;
}
.ns-0 * #content div.thumb {
border-color: white;
}
/**************************/ /* END LIGHT BLUE SECTION */ /**************************/
/* Display "From Wikipedia, the free encyclopedia" */
- siteSub {
display: inline; font-size: 92%; font-weight: normal;
}
- bodyContent #siteSub a {
color: #000; text-decoration: none; background-color: transparent; background-image: none; padding-right: 0;
}
/* Bold 'edit this page' link to encourage newcomers */
- ca-edit a { font-weight: bold !important; }
/* Display "User $1, you are already logged in!"
([[MediaWiki:Alreadyloggedin]]) in red and bold */
div.alreadyloggedin { color: red; font-weight: bold; }
@media print {
/* Do not print edit link in templates using Template:Ed
Do not print certain classes that shouldn't appear on paper */
.editlink, .noprint, .metadata, .dablink { display: none }
#content { background: #FFFFFF; } /* white background on print */
}
/* Accessibility experiment: make diff changes not just colour-based */
.diffchange {
font-weight: bold; background-color: inherit;
}
td.diff-addedline, td.diff-deletedline, td.diff-context {
font-size: 85%; color: inherit;
}
- pt-login {
font-weight: bold; font-size: 110%;
}
form#userlogin {
float: left; padding: 1em 1em .7em 1em; background-color: #ffffe6; border: 2px solid #fc6; color: #000; margin-right: 2em;
}
form#userlogin table {
float: left; background-color: #ffffe6; color: #000;
}
p.error {
font-weight: bold;
}
/* Class styles */
/* .toccolours added here because version in
monobook/main.css wasn't being used by the print style */
.toccolours {
border:1px solid #aaaaaa; background-color:#f9f9f9; padding:5px; font-size: 95%;
}
/* Remove padding from external links displayed without icon */
- bodyContent .plainlinks a {padding: 0 !important}
- p-nav h5 {
display: none;
}
.portlet a {
text-decoration: none;
}
.portlet a:hover {
text-decoration: underline;
}
- p-nav .pBody {
padding-right: 0;
}
- p-nav a {
display: block; width: 100%;
}
/* Special characters list below edit window works better without underlining */
- editpage-specialchars a { text-decoration: none; }
- editpage-specialchars a:hover { text-decoration: underline; }
/* If you don't want to see special characters list at all,
put the following line in your User:You/monobook.css file (and remove the slash-asterisk comments) */
/* #editpage-specialchars { display: none; } */
/* Makes the background of a framed image white instead of gray. */ /* Only visible with transparent images. */ /* See #Framed_image_background_color */ div.thumb div a img {
background-color:#ffffff;
}
/* To position the spoken article link at the top of page Commented out while sitenotice present */
- spoken {
position: absolute; float: right; text-align: right; font-size: 90%; right: 0; z-index: 1; background: none; border-bottom-style: none; top: -2.2em; display: block !important;
}
/* try adding here, this had no effect in [[MediaWiki:Common.css]] */ .plainlinksneverexpand a.external.text:after {
display: none !important
}
/* Standard Navigationsleisten.*/
div.Boxmerge, div.NavFrame {
margin: 0px;
padding: 2px;
border: 1px solid #aaaaaa;
text-align: center;
border-collapse: collapse;
font-size: 95%;
} div.Boxmerge div.NavFrame {
border-style: none;
border-style: hidden;
} div.NavFrame + div.NavFrame {
border-top-style: none;
border-top-style: hidden;
} div.NavPic {
background-color: #ffffff;
margin: 0px;
padding: 2px;
float: left;
} div.NavFrame div.NavHead {
height: 1.6em;
font-weight: bold;
font-size: 100%;
background-color: #efefef;
position:relative;
} div.NavFrame p {
font-size: 100%;
} div.NavFrame div.NavContent {
font-size: 100%;
} div.NavFrame div.NavContent p {
font-size: 100%;
} div.NavEnd {
margin: 0px;
padding: 0px;
line-height: 1px;
clear: both;
} a.NavToggle {
position:absolute;
top:0px;
right:3px;
font-weight:normal;
font-size:smaller;
}
/* enlarge font-size for zh fonts */
- bodyContent { font-size:118% }
/* Fix Fontsize */ .portlet h5, .portlet ul,
- toc .toctoggle {
font-size: 100%;
} .pBody,
- footer,
div.thumb div {
font-size: 95%;
}
h2 {
font-weight: bold;
}
/* ul {
margin: 0.5em 0 0 1.5em;
}
*/
/* siteNotice 去掉斜体 */
- siteNotice {
font-style: normal;
}
/* Do not expand kvaleberg.com-URLs for printing */
- content span.coordinates a.external.text:after, #content span.coordinates a.external.autonumber:after {
content: "";
}
/* Formatierung betrifft Vorlagen: Geokoordinate, Koordinate2 & Koordinate3 */
- coordinates {
position:absolute; z-index:1; border:none; background:none; right:12px; top:1.3em; float:right; margin:0.0em; padding:0.0em; line-height:1.5em; text-align:right; text-indent:0; font-size:85%; text-transform:none; white-space:normal;
}
/* kleines Globus-Symbol neben der Geookordinate anzeigen */
- coordinates a[href ^="http://"] {
background: url(http://upload.wikimedia.org/wikipedia/de/d/d4/Gnome-globe.png) center right no-repeat; padding-right: 18px !important;
}
/* custom edits */
- catlinks { padding-top:1px; padding-bottom:1px;}
li.FA {
list-style-image: url("http://upload.wikimedia.org/wikipedia/en/6/60/LinkFA-star.png");
}
li.GA {
list-style-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Symbol_support_vote.svg/14px-Symbol_support_vote.svg.png");
}
/*</nowiki></pre>*/
这会被应用于Template:m to ft css（討論 - 鏈入頁面 - 编辑）.
[编辑] 可变的HTML属性名
HTML属性名可以弄成可变的。HTML Tidy在服务器端移除名字不合法的属性，因此其结果不依赖于是否忽略属性值的浏览器兼容性设置，而且传送的数据量也减少了。请参考w:en:Wikipedia:HiddenStructure和Template:en（討論 - 鏈入頁面 - 编辑）了解“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/tabs links
- Moz: see the rules above
- http://www.vertexwerks.com/tests/sidebox/ -- sidebox formatting
- http://www.alistapart.com/articles/slidingdoors2/ -- rounded tabs with rollover effect
- http://www.alistapart.com/articles/customcorners/ -- another variant for rounded box corners
- http://alistapart.com/articles/customcorners2/, Demo of this
- http://www.alistapart.com/articles/mountaintop/ -- even weirder corner variants
- http://www.virtuelvis.com/gallery/css/rounded/ -- simple freestyle variant using the :before and :after pseudo-elements (only css2 browsers, not in IE)
[编辑] 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
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 [5] 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
- http://www.csszengarden.com/ -- inspiration
- http://css-discuss.incutio.com/ -- highly concentrated info, very comprehensive
- http://www.alistapart.com/ -- great articles
- http://www.positioniseverything.net/ -- some entertaining ie bugs and more
[编辑] 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
[编辑] Changing access keys
These are now defined/set from js, you can easily customize them by changing some elements in the 'ta' array (see [6]). 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
- http://www.quirksmode.org/ -- see the Javascript and DOM section
- http://www.alistapart.com/
- http://www.quirksmode.org/dom/domform.html -- form cloning (might be possible to upload a few images at once using this, also a good starting point for the structure cloning)
- http://www.quirksmode.org/dom/links.html -- more links with good summaries
[编辑] See also
- Gallery of user styles
- Skin projects
- Help:Preferences
- Help:Namespace#Tab labels
