FANDOM


移動化訊息框可以使用CSS來自訂。

自訂樣式

預設的訊息框樣式可以使用infobox 標籤中的themetheme-source屬性來更改。這使得訊息框的樣式可以透過個別社區的CSS來修改。

  • theme屬性使用於將自訂的CSS分類(class)用於訊息框時。
  • theme-source屬性讓你可以用模板變量來變更CSS分類。

如果兩個屬性都使用在訊息框中,theme屬性會被視為預設。

Theme

例如 theme="delta" 會增加一個名為 pi-theme-delta 的class到訊息框的HTML之中,這會以該CSS為自訂樣式:

例如:

<infobox theme="delta">
  // infobox contents go here
</infobox>

用於定義的css如下(在css頁面special:css中編輯):

.pi-theme-delta {
   // custom styles  
}

以下代码将把第二层背景颜色转换成红色:

.pi-theme-delta .pi-secondary-background {
    background-color: #CF3D0C;
}

如果theme不确定,可以使用 .pi-theme-wikia 代替

Theme-source

例如, theme-source="location" 意指當location被用於文章訊息框時,它會使用它的值(value)作為它的分類。

例如:

<infobox theme-source="location">
   ...
</infobox>
{{an infobox
 |location = Africa
}}

用於定義模板樣式的CSS會是這樣:

.pi-theme-africa {
   //custom styles
}

如果你想自定义讯息框中某个特别的部分,你可以使用以下代码:

.pi-theme-africa .pi-secondary-background {
   //custom styles
}

Helper class

移動化訊息框有很多用於設計的helper class,可讓你很容易地變更樣式:

.pi-background
訊息框的整體背景
.pi-secondary-background
表格開頭以及導航背景
.pi-font
資料內容的字體樣式
.pi-secondary-font
表格開頭, 標示以及導航的字體
.pi-item-spacing
每個訊息框單位周圍的邊框。
.pi-border-color
訊息框單位的邊界顏色。

注意: 這不是可使用Class的完整的列表-其他更多的class可參見Help:移動化訊息框/標籤

語法例子

選擇自訂"oblivion"樣式,並選定圖片標示字體大小。 :

.pi-theme-oblivion .pi-caption {
   font-size: 16px;
}

改變訊息框寬度:

.portable-infobox {
   width: 300px;
}

改變訊息框背景顏色:

.pi-background {
   background-color: #ff0000;
}

改變訊息框頂部以及導航背景:

.pi-secondary-background {
   background-color: #00ff00;
}

改變訊息框邊界顏色:

.pi-border-color {
   border-color: #00ff00;
}

改變訊息框單元邊框:

.pi-item-spacing {
   padding-top: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
}

改變訊息框資訊欄位字體大小:

.pi-font {
    font-size: 16px;
}

Change infobox headers, labels and navigation values font size:

.pi-secondary-font {
    font-size: 18px;
}

改變資訊框標題字體大小:

.pi-title {
    font-size: 24px;
}
 

進階

一般來說,如果你需要更改特定的樣式主題,你會撰寫如以下:

.pi-theme-name .pi-secondary-background {
   background-color:#334;
}

然而,當一個CSS的 class在同一個元素上時,你需要同時選擇二者,並在這些Class之間不留空格。例如.pi-background<aside>元素上等同於在(.pi-theme-name), 因此改變背景的CSS就是:

.pi-theme-name.pi-background {
   background-color:#334;
}
除了特别提示,社区内容遵循CC-BY-SA 授权许可。