Help:資訊框/CSS

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

自訂樣式

預設的訊息框樣式可以使用infobox 標籤中的theme或theme-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;
}

be:Help:Інфабоксы/CSS