Help:User style/zh

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search
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这两个文件中定制的,或类似的,使用你自己的JavascriptCSS.做出的改变放在你的用户页面中叫做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!).

CSS[edit]

用户子页面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.externalhttp://example ;默认:http://example
  • :link.extiw:正文内的跨维基链接 en:example;默认:en:example [1]
  • :link.image:从完整图像到图像描述页的链接。
  • :link.internal:到文件本身的链接(Media:),以及从缩略图和放大镜图标到文件描述页的链接。(注意:为a.internal指定的字体颜色和大小仅适用于以上第一种情况。) - Media:example.png
  • :link.new不存在的页面;默认:doesnotexist
  • .allpagesredirectabc;在Special:AllpagesSpecial: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 Mozilla[edit]

/* 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 links[edit]

Print view tweaks[edit]

/*
** 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[edit]

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 position[edit]

Kludgy version available. See talk page.

Monobook menus with serif fonts in the content area[edit]

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)

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

Moving category links[edit]

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[edit]

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

Javascript[edit]

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[edit]

See User Styles/bottom tabs

Bottom tabs in Firefox
Simple version of bottom links in action

Changing access keys[edit]

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 top[edit]

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[edit]

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 · Stop words · 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 · Edit toolbar · 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 · List · Table · Sorting · Colors · Images and file uploads
Fixing mistakes
Show preview · Testing · Reverting edits
Advanced functioning
Expansion · Template · Advanced templates · Parser function · Parameter default · Variable · System message · Substitution · Array · Calculation · Embed page
Others
Special characters · Renaming (moving) a page · Preparing a page for translation · Talk page · Signatures · Sandbox · Legal issues for editors