Wikimedia Meta-Wiki

Help:User style/zh

< Help:User style
MediaWiki手册：内容、读者、编辑者、管理人员、系统管理员、研究员 +/-

请参考Help:User style进行翻译。

用户可以自定义：字体、颜色、页边链接的位置，以及其他许许多多的内容！这是通过用户子页面中的自定义CSS来实现的。

概要Edit

通过使用不同的皮肤，用户对字体，颜色，页边链接的位置等可以有不同的选择。CSS是用选择器(selector):HTML元素 来定制的，class和id是在HTML代码中定制的。因而，想了解各个皮肤是什么样，可以通过查看网页的源代码来实现，特别要注意那些class和id，若使用得越多，则功能越多。

拿中文维基为例，默认的皮肤位于：

而在元维基，则是:

对于特定皮肤,样式文件夹(style directory)中的文件可能在每个方案(project)中都一样。样式文件夹的名字是在安装时设定的，参见LocalSettings.php#Stylesheet_Location.

在monobook皮肤中，你现在能够改变用户界面(UI)的任何方面，因为用户界面是在http://zh.wikipedia.org/style/monobook/main.css 和 zh:MediaWiki:Monobook.css这两个文件中定制的，或类似的，使用你自己的Javascript 和 CSS.做出的改变放在你的用户页面中叫做monobook.css 和 monobook.js的子页(subpage)中.

你也可以改变这一经典皮肤,你的子页必须命名为User:username/ standard.css 和 User:username/ standard.js (对于其他皮肤也是如此).

只要在此页面中输入一些CSS或JS即可。但这里的预览以一种特别的方式工作：它允许在该页样式信息(style info)的基础上查看页面的页边(margin)，前提是使用的皮肤是页面所应用的皮肤。但这有局限性，比如，能够预览到页边的链接看起来什么样，却未必是我们想察看的所有类型。保存之后，当还处于此页面或其他页面时，需要强行重载入(shift-reload/ctrl-f5)才能看到新的网页(file)。

The HTML source contains lines like 

<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";

for the project-wide CSS for the particular skin (in this case here on Meta referring to //meta.wikimedia.org/style/wikistandard.css ) and the personal JS and CSS for a particular skin.

For "MySkin" there is no main.css applicable. The applicable personal css page is User:username/ myskin.css (all lowercase!).

CSSEdit

用户子页面CSS与本地CSS文件的对比Edit

除此之外，用户可以在浏览器上设置使用本地的CSS。如果一位用户有多个浏览器，每个浏览器都可以设置不同的CSS，每张CSS样式表都会在所有网站上适用，而不只是MediaWiki，且不需要登录调用。然而，基于class名称的CSS规则只在其他网站使用相同class名称时才有效，例如：对选择器a.extiw设置的规则适用的范围较选择器h2要少一些。

对于需要在不同的MediaWiki项目使用不同CSS规则的情况，显而易见地，本地CSS文件是不适用的。这种情况下，用户需要在自己的子页面中指定这些规则。

一些地方的计算机，例如网吧里面的，并不允许用户改变浏览器设置。这种情况下，用户子页面的CSS总能派上用场。

当浏览器设定了忽略网站或外部CSS的字体大小时，指定CSS字体大小的规则就必须在本地CSS里书写。

CSS选择器Edit

在Monobook皮肤中，以下CSS选择器可以设置页面的样式。这些选择器和用例列举如下：

  • :link：未访问的链接。例如：help:index；默认样式：help:index。
  • :visited：已访问的链接。
  • :link#contentTop
  • :link.external：http://example ；默认：http://example
  • :link.extiw：正文内的跨维基链接 en:example；默认：en:example [1]
  • :link.image：从完整图像到图像描述页的链接。
  • :link.internal：到文件本身的链接（Media:），以及从缩略图和放大镜图标到文件描述页的链接。（注意：为a.internal指定的字体颜色和大小仅适用于以上第一种情况。） - Media:example.png
  • :link.new：不存在的页面；默认：doesnotexist
  • .allpagesredirect：abc；在Special:Allpages和Special:Prefixindex中的重定向。
  • 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：小号字体 — example。
  • table.toc
  • :link和:visited：一种常见错误是使用“a”而不是“:link”或者“:visited”来设置链接样式（适用于未访问的和已访问的链接）。区别在于：:link和:visited这两个伪类仅对真正的链接有效；而“a”既能适用于链接，也能适用于已命名的锚点（例如：<a name="bookmark"）。
  • #p-lang a：用于跨语言的链接。

用户也可以根据特定属性的值来指定样式，也就是使用以下的选择器

  • :link[title = "User:username"]}}
  • link[title = "pagename"]}}
  • link[href = "full url "]}}

来为指向特定用户或者页面的链接设置特定颜色或高亮显示（类似监视页面的最近更改的加粗效果）。这在Opera可用，但在IE不可用。

另请参阅：Help:Watching pages#CSS

监视列表和最近更改使用以下两个class：

  • .autocomment
    example
  • .new（参阅以下内容）

页面历史有autocomment这个class和：

  • .user
  • .minor

所以为user这个class指定的字体适用于页面历史，但不适用于监视列表或最近更改。

编辑页面Edit

  • 编辑框：textarea#wpTextbox1
example1
  • 编辑摘要框：input#wpSummary
example2

主要样式块Edit

参见 Customization:Explaining_skins#Major_style_blocks_by_name

非显示内容Edit

对于文本和图片，一种特别的样式是不显示这些内容。 

.classname {display: none}
#id {display: none}

不显示的链接没有任何作用。

一种应用是在JavaScript中使用一个隐藏键来排序表格。

它不能用来在模板名称、参数名称、参数值、链接到的页面名称等场景下删除文本。

现在解析器函数能实现这些功能。

display: none不输出内容。而visibility: hidden输出空白来替代原本的内容；它与visibility: visible相对。

例子：

p <span style="visibility: hidden">q</span>r输出 p qr

用例Edit

/* 为内容和标签页后的背景添加浅灰色填充 */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }

/* 将背景设置为不随内容滚动 */
body { background-attachment: fixed; }

/* 替换背景 */
body { background: Purple; }

/* 改变<pre>标签块的背景  */
pre { background: White }

/* 改变维基百科logo */
#p-logo a { background: url(http://en.wikipedia.org/upload/wiki.png) 35% 50% no-repeat !important; }

/* 不使用维基百科logo，并将下方的文本上移 */
#p-logo { display: none }
#column-one { padding-top: 0; }

/* 去除用户名旁边的人像图标 */
li#pt-userpage { background: none }

/* 使用浏览器设定的字体和大小 */
body, #globalWrapper { font: inherit !important; }

/* 总是给链接加下划线 */
a { text-decoration: underline; }

/* 改变未选中标签页的背景颜色 */
#p-cactions ul li a { background: #C7FDC7; }

/* 改变选中标签页的背景颜色 */
#p-cactions ul li.selected a { background: white; }

/* 改变选中标签页的边框颜色 */
#p-cactions li.selected { border-color: #aaaaaa; }

/* 在鼠标悬停时不去除标签页底部 */
#p-cactions li a:hover { z-index: 0; text-decoration: none; }
#p-cactions li.selected a:hover { z-index: 3; }

/* 设置搜索框和下方按钮的字体 */
input.searchButton {
    background-color: #efefef !important;
    border: 1px outset !important;  
}
#searchInput { border: 1px inset !important; }

/* 标准链接颜色 */
a { color: #0000FF; }
a:visited { color: #7F007F; }
a:active, a.new { color: #FF0000; }
a.interwiki, a.external { color: #3366BB; }
a.stub { color: #772233; }

/* 在<pre>块上设置滚动条 */
pre { overflow: auto; }

Rounded corners in MozillaEdit

/* 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 corner rules in firefox
Rounded corners/tabs linksEdit

Print view tweaksEdit

/*
** 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 sideboxEdit

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.

Make the quickbar float / sideboxes have fixed positionEdit

Kludgy version available. See talk page.

Monobook menus with serif fonts in the content areaEdit

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 [1] and copy the first part. No warranty; works on Netscape7/Win98 for me ... -- Tillwe 14:05, 30 May 2004 (UTC)Reply[reply]

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

Moving category linksEdit

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

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 stylingEdit

/* 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; }

关于CSS的一些外部链接Edit

JavascriptEdit

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 areaEdit

See User Styles/bottom tabs

 
Bottom tabs in Firefox
 
Simple version of bottom links in action

Changing access keysEdit

These are now defined/set from js, you can easily customize them by changing some elements in the 'ta' array (see [2]). 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 topEdit

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;
}

JS相关的外部链接Edit

注释Edit

  1. ↑ HTML代码是 <a href="//en.wikipedia.org/wiki/example" class="extiw" title="en:example">en:example</a>，在所有皮肤都相同。

参见Edit

样式

脚本

Links to other help pages

Help contents
Meta · Wikinews · Wikipedia · Wikiquote · Wiktionary · Commons: · Wikidata · MediaWiki · Wikibooks · Wikisource · MediaWiki: Manual · Google
Versions of this help page (for other languages see further)
What links here on Meta or from Meta · Wikipedia · MediaWiki
Reading
Go · Search · Namespace · Page name · Section · Backlinks · Redirect · Category · Image page · Special pages · Printable version
Tracking changes
Recent changes (enhanced) | Related changes · Watching pages · Diff · Page history · Edit summary · User contributions · Minor edit · Patrolled edit
Logging in and preferences
Logging in · Preferences · User style
Editing
Starting a new page · Advanced editing · Editing FAQ · Export · Import · Shortcuts · Edit conflict · Page size
Referencing
Links · URL · Piped links · Interwiki linking · Footnotes
Style and formatting
Wikitext examples · CSS · Reference card · HTML in wikitext · Formula · Lists · Table · Sorting · Colors · Images and file uploads
Fixing mistakes
Show preview · Reverting edits
Advanced functioning
Expansion · Template · Advanced templates · Parser function · Parameter default · Magic words · System message · Substitution · Array · Calculation · Transclusion
Others
Special characters · Renaming (moving) a page · Preparing a page for translation · Talk page · Signatures · Sandbox · Legal issues for editors
语言:
English · Deutsch · español · français · italiano · русский · 日本語 · 中文
Retrieved from "https://meta.wikimedia.org/w/index.php?title=Help:User_style/zh&oldid=24641906"