Help:User style/zh

From Meta, a Wikimedia project coordination wiki
Jump to: navigation, search
MediaWiki手册: 目录 |幫助:手冊指引/ Handbook Guidelines | 編輯政策 | 其他

MediaWiki软件帮助 — 读者手册编辑者手册仲裁员手册系统管理员手册黑客手册

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

The user can customize: fonts, colors, positions of links in the margins, and many other things! This is done through custom stylesheets stored in subpages of the user's "User" page.

概要[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 in user subpages vs. css in a local file[edit]

In addition to the above, or alternatively, a local CSS can be set on the browser. If one uses multiple browsers, each can be set to a different CSS. Each applies to the whole world wide web, not just a MediaWiki project (and does not depend on being logged in). However, a setting only affects other webpages if they use the same class name; e.g. a setting for the selector a.extiw affects fewer pages on the web than one for h2.

For lines of CSS which should be different on different MediaWiki projects, e.g. for a different background color for easy distinction, clearly the local CSS can not be used; at least these lines should be put in the user subpages.

Some computers, e.g. in internet cafes, do not allow users to set preferences for the browser. In that case the user subpages allow the setting of a user style anyway.

When the browser has been set to the option to ignore the font size specified in the webpage or external CSS, CSS lines regarding font size have to be put in the local CSS.

Css selectors[edit]

The css selectors, expressed in terms of elements, classes and id's, relevant for the style of the page body include:

  • a - note that "a" is not always a link, in particular, the "Special page" tab is not (see Help:Namespace#Tab_labels)
  • a:link, a:visited - together these are all the links, as opposed to "a" elements which are just anchors - example: help:index
  • a#contentTop
  • a.external - http://example
  • a.extiw – interwiki link in page body - en:example
  • a.image – link from full image to image description page
  • a.internal – link to file itself (Media:), and links from thumbnail and magnifying glass icon to image description page (note that color and font size specified for a.internal are only applicable in the first case) - Media:example
  • a.new example
  • body.ns-0, ..., body.ns-15 (namespaces)
  • div#bodyContent
  • div#column-content
  • div#editsection
  • div#globalWrapper
  • div#tocindent
  • div.tocline
  • h1.firstHeading
  • h2
  • h3
  • img.tex TeX image
  • small - example
  • table.toc

Normal internal links are not in class internal (they used to be, and still are on sites that use an older version of the software, e.g. [1]); they can be styled referring to a:link and a:visited in general, after which styling of a.extiw etc. can provide for exceptions to this general style for links.

For interlanguage links:

  • #p-lang a

One may also have the style depend on the value of an attribute, e.g. with the selectors:

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

to color-code or highlight particular users (including oneself) and/or links to particular pages (like the bolding of watched pages on Recent Changes). This works in Opera, but not in IE. See also Help:Watching pages#Css.

The watchlist and Recent Changes use two classes:

  • autocomment
    example
  • new (see below)

The page history has classes autocomment and:

  • user
  • minor

Thus the font specified for user applies in the page history, but not in the watchlist or Recent Changes.

Edit page[edit]

  • Edit box: textarea#wpTextbox1
example
  • Edit summary box: input#wpSummary
example

Template parameters[edit]

A class or id can be a template parameter, an element as template parameter does not work.

Samples[edit]

/* make the background behind the content area and the tabs a light grey */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }

/* stop background image from scrolling with content area */
body { background-attachment: fixed; }

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

/* changes the colour 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 */
a { text-decoration: underline; }

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

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

/* change border colour 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 */
a { color: #0000FF; }
a:visited { color: #7F007F; }
a:active, a.new { color: #FF0000; }
a.interwiki, a.external { color: #3366BB; }
a.stub { color: #772233; }

/* put scrollbar on pre sections instead of ugly cutoff/overlap in firefox */
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 [2] 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; }

External links on 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 [3]). 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;
}

External links on JS[edit]

See also[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 · URLs · 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
语言: English  · Deutsch · español · français · italiano · 日本語 · русский · 中文