說明:用戶樣式
 |
| 維基百科使用手冊 |
登入用戶不僅可以設置維基百科參數，還可以透過Special:Mypage/common.css和Special:Mypage/common.js實現更強大的自訂。
common.css里編寫CSS，可以客製化頁面的字型、顏色、連結的位置等等。common.js里編寫JavaScript（JS），可以在網頁上增加功能。注意在維基百科上編寫的樣式表和JS代碼都是在GFDL下公開發布的。
概述
注意：在預設組態下，所有的用戶樣式和指令碼會被忽略；除非管理員在LocalSettings.php裏面加入這樣兩行：
$wgAllowUserJs = true;
$wgAllowUserCss = true;
在用戶樣式設定的時候，首先要選中一個面版，然後系統會確定相應的層疊樣式表（CSS）。用戶可針對每個面版對字型、顏色等做不同的選擇。CSS是用選擇器[1]來客製化的，每個選擇器作用的物件包括HTML元素、class和id。它們在具體的HTML代碼中定義。因此，只要檢視HTML原始碼，便可知道一個面版可以怎麼樣調整。尤其是那些class和id越多，則變化就越多。
所有面版都享有（繼承）MediaWiki:Common.css檔案中定義的樣式，其他的樣式則依選擇的面版不同而存放在分離的檔案中。例如，中文維基百科中預設的樣式為：
- https://zh.wikipedia.org/style/monobook/main.css 及 MediaWiki:Monobook.css
- https://zh.wikipedia.org/style/wikistandard.css 及 MediaWiki:Standard.css
- https://zh.wikipedia.org/style/cologneblue.css 及 MediaWiki:Cologneblue.css（科龍香水藍）
- https://zh.wikipedia.org/style/nostalgia.css 及 MediaWiki:Nostalgia.css（懷舊）
在元維基中則為：
- https://meta.wikimedia.org/style/monobook/main.css 及 m:MediaWiki:Monobook.css
- https://meta.wikimedia.org/style/wikistandard.css 及 m:MediaWiki:Standard.css
- https://meta.wikimedia.org/style/cologneblue.css 及 m:MediaWiki:Cologneblue.css
- https://meta.wikimedia.org/style/nostalgia.css 及 m:MediaWiki:Nostalgia.css
放在樣式目錄的檔案是供特定的面版使用的，它們在各個維基專案中大致上相同。樣式表目錄的名字在安裝的時候就設置好了，參見LocalSettings.php#Stylesheet_Location。
在vector面版中，你可以透過JavaScript以及CSS改變 https://zh.wikipedia.org/style/vector/main.css 及 MediaWiki:Vector.css的樣式定義。然後將這些改變存放在你的用戶頁子頁面Special:Mypage/vector.css和Special:Mypage/vector.js中。
你同樣可以改變標準面版；用戶頁面應該這樣起名：User:用戶名/ standard.css 和User:用戶名/ standard.js（其它的面版類推）。
只要輸入一些css或者js代碼到該頁即可。該頁面的預覽會有些特別：它能讓你根據頁面所定義的樣式看到頁面的邊界（而不是內容），只要所用的面版正好要用到正在預覽的頁面。這樣會有些限制，例如你會看到邊界範圍內的連結看起來怎麼樣，但也許看不到你想要檢查的所有類型的內容。在儲存之後，不管還在該頁面或是轉到了其它頁面，可以強制重新整理立即應用新的設置。
特定面版（在這裏是 https://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（全部小寫！）。
CSS
自訂CSS和瀏覽器CSS的對比
維基百科的登入用戶才能使用Mediawiki系統提供的自訂CSS，設置的CSS也只應用於維基百科，其他網站不受影響。
很多瀏覽器支援本地CSS。這樣的CSS會應用到所有網站，而不僅限於MediaWiki專案，且不論你是否登入了維基百科。
如果想針對不同的MediaWiki專案的相同頁面元素設置不同的樣式，如設置在中文維基用紅色連結顯示不存在的頁面，而在英文維基用藍色連結顯示不存在的頁面，這就不能用瀏覽器CSS；因為瀏覽器CSS幾乎[1]無法區別中文維基還是英文維基。這樣的樣式設置應該分別放在中文和英文維基的用戶子頁面。
不論你用自己的電腦還是別人的電腦登入維基百科，你的自訂CSS都會起作用；瀏覽器CSS則不會。
當瀏覽器設定為忽略網頁內及外部 CSS 中的字型大小的時候，設定字型大小樣式的代碼行只能放在本地CSS裏面。
CSS選擇器
CSS透過選擇器針對HTML元素、class、id，以及它們的組合設置樣式。頁面主體有關的樣式在下面列出，有些提供了顯示其效果的例子。
| 選擇器 | 效果 | 備註 |
|---|---|---|
| :link | help:index | |
| :link:link | ||
| :link:visited | ||
| :link#contentTop | ||
| :link.external | http://www.example.org | |
| :link.extiw | 跨維基連接 | |
| :link.image | 從完整圖像到圖像描述頁的連結 | |
| :link.internal | 連結到檔案本身（Media:），或者從縮圖及標誌圖示到圖像描述頁（注意對a.internel指定的顏色和字型大小僅適用於第一種情況） | |
| :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（以前是屬於的，使用舊版軟件的網站現在也還是這樣，例如[2]）；它們可以用:link和:link:visited設定樣式。一般來說：link.extiw後面的一些選擇器可以用來設置連結樣式的一些特殊情況。
跨語言連結可以用:
- #p-lang a
你也可以使樣式取決於某個屬性的值，例如，以下的選擇器：
- :link[title ="User:用戶名"]
- :link[title ="頁面名"]
- :link[href ="完整url"]
可以用來設定用戶（包括你自己）以及到特定頁面的連結的顏色，或使之突出顯示，就像在近期變更裏面已監視頁面會被加黑一樣。在Opera里可以做到這點，但IE不支援。參見Help:監視清單#CSS。
監視清單和近期變更使用兩個class：
- autocomment 範例
- new（見下）
頁面歷史具有autocomment這個class，而且還有：
- user
- minor
這樣為user設定的字型可用於頁面歷史，但不用於監視清單或者近期變更。
編輯頁面
在編輯頁面中使用下列選擇器：
- 編輯框: textarea#wpTextbox1
- 編輯摘要框: input#wpSummary
主要樣式塊
[3] 以下內容是針對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 及 id
模板中的HTML元素的class或者id是可以透過參數指定的。例如可以寫class="abc{{{1|def}}}"。這樣可以為一個或多個class名稱定義同一類型的樣式。如果該class未定義，將會被忽略，而採用標準的樣式。
最簡單的情況就是我們寫出class="abc{{{1}}}"並且定義一個class名為abcdef。如果模板參數為「def」就會用上這個class。
如果一個通用頁面僅在這些特定的class的樣式定義好的情況下才有意義，那麼它們必須定義在MediaWiki:Common.css裏面。只要它們沒被覆蓋掉，就會應用於所有用戶和所有面版。在這個專案裏面：
{{pimcnl|MediaWiki|Common.css}}
這會被應用於Template:m to ft css（討論 - 鏈入頁面 - 編輯）.
可變的HTML屬性名
HTML屬性名可以是可變的。HTML Tidy在伺服器端移除名字不合法的屬性，因此其結果不依賴於是否忽略屬性值的瀏覽器相容性設置，而且傳送的數據量也減少了。請參考w:en:Wikipedia:HiddenStructure和Template:en（討論 - 鏈入頁面 - 編輯）了解「class」值的可能變化。
範例
/* 设置内容区底色和标签底色为浅灰 */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }
/* 把背景里的书换成别的东西 */
body { background: Purple; }
/* 改变pre区域背景（changes the background of pre areas） */
pre { background: White }
/* 改变logo（change the logo） */
#p-logo a { background: url(http://en.wikipedia.org/upload/wiki.png) 35% 50% no-repeat !important; }
/* 不使用任何logo，向上移动盒子代替logo区域（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; }
/* 更改所选标签的边框背景 */
#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; }
打印視圖調整
/*
** 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) " ) ";
}
}
改變用戶工具列變為側邊欄
在Camino、Safari和Internet Explorer 7下工作執行。
/* 改变用户工具栏变为侧边栏（Transform the user toolbar into a sidebox） */
#p-personal {
position:relative;
z-index:3;
width: 11.6em;
}
#p-personal .pBody {
width: 11.6em;
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.3em 0.5em 0.3em 0.3em;
}
#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 and by anon IP */
/* needed if not already in place */
li#pt-userpage { background: none }
li#pt-anonuserpage { 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. ）這在Mozilla中提供了同樣的函數，見Help:User style/floating quickbar。
在Monobook面版的內容區域使用襯線字型（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)
移動分類連結
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)
/******************************************************************/
/* 向右移动分类链接 */
/******************************************************************/
/* 移动分类链接盒子 */
#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;
}
/* 格式化分类链接 */
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; }
關於CSS的外部連結
- http://www.csszengarden.com/ —— inspiration
- http://css-discuss.incutio.com/ ——highly concentrated info, very comprehensive
- http://www.alistapart.com/ ——好文章
- http://www.positioniseverything.net/ ——some entertaining ie bugs and more
JavaScript
JavaScript有很大的潛力，例如添加文字，還包括連結（for example adding text, including links），at the desired positions. This added content may depend on content on the HTML source page produced by the server; for example it may depend on HTML elements with an ID, by applying getElementById. The position of insertion may be specified by insertBefore
請參考說明:維基用戶指令碼開發指南。
複製編輯連結到內容區域底部（Duplicate edit links at the bottom of the content area）
See Help:User style/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 [5]). Example line:
ta['ca-nstab-main'] = new Array('c','View the content page');
The access key is the first value in the array. An example which changes this accesskey to '0':
ta['ca-nstab-main'] = new Array('0','View the content page');
Since alt-d is also a shortcut to the address bar in most browsers, you might want to disable the alt-d shortcut for Delete, by entering an empty string as access key this way:
ta['ca-delete'] = new Array('','Delete this page');
最後， to disable all access and tooltips drop
ta = false;
in your monobook.js.
這是最後一個建議，關於 ta = false不工作。看How to disable access key for discussion, and this example of monobook.js 尋找一個至少部分能工作的解決方法（for a solution that will work, at least partially.—— Note that monobook.js seems to be deprecated, and MediaWiki:Common.js is supposed to be used instead.
The site's global access keys are in corresponding JavaScript for the skins. For example, the keys for Monobook are in the (protected) page MediaWiki:Monobook.js.
To disable or change the global access keys for the 'power user editing shortcuts', you must edit the six (protected) pages starting with the Accesskey prefix in the MediaWiki namespace.
移動分類到頂部
下列代碼移動分類盒子到文章頂部。當然，你可能想要使用一些CSS使它看起來更漂亮：
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;
}
不幸的是，如果分類盒子太長（ if the category box is large ）(such as on entries on U.S. presidents and other major figures), it can push an infobox off to the side. To correct this, the "clear: right" attribute can be added to an infobox.
Wikitext-controlled CSS
CSS can be controlled through JS by wikitext. For example, a HTML element "span" without content can, through its class and id, provide parameters for JS specifying CSS for any parts of the page. For example, if a page contains a "span" element with class FA and id lc, w:en:MediaWiki:Monobook.js specifies the style and title of elements "li" of class interwiki-lc, thus controlling the style and title of the interlanguage link of language code lc in the margin, provided that the skin specifies this class interwiki-lc (E.g., Cologne Blue specifies class='external' for each language, so it does not work for that skin.) See also .
可訪問的變數
以下是Mediawiki啟用JS後產生的部分變數，用戶指令碼可以訪問。完整的列表請參見組態選項和mw:Manual:Interface/JavaScript。
var skin = "myskin";
var stylepath = "/skins-1.5";
var wgArticlePath = "/wiki/$1";
var wgScriptPath = "/w";
var wgServer = "http://meta.wikimedia.org";
var wgCanonicalNamespace = "Help";
var wgCanonicalSpecialPageName = false;
var wgNamespaceNumber = 12;
var wgPageName = "Help:User_style";
var wgTitle = "User style";
var wgAction = "view";
var wgArticleId = "6919";
var wgIsArticle = true;
var wgUserName = "Patrick";
var wgUserGroups = ["sysop", "*", "user", "autoconfirmed", "emailconfirmed"];
var wgUserLanguage = "en";
var wgContentLanguage = "en";
var wgBreakFrames = false;
var wgCurRevisionId = "568720";
關於JS的外部連結
- mw:ResourceLoader
- mw:ResourceLoader/Default modules：MediaWiki提供的可被JS使用的物件和方法。
- http://www.quirksmode.org/ ——見JavaScript和DOM部分
- 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.seoinseo.com/ ——SEO tutorials and resources
參考資料
- ^ Firefox 3.5 实现按站点自定义CSS样式. [2013-06-21].