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 授权许可。

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+