除了預設的樣式外,也可以透過 [社群管理 / 編輯樣式] 設計社群呈現的樣子。
以下列出常用的樣式設定方式 (以 /* ... */ 標註者為說明文字):
1. 設定社群背景 (圖片與顏色)
透過 body 內的 background 屬性設定,例如:
body { background:#000000; } /* 將背景設成黑色 */
body { background:url(圖片網址); } /* 將圖片網址設成背景 */
2. 設定社群文字 (字型、大小與顏色)
透過 body 內的 font-family、font-size 與 color 屬性設定。例如:
body {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
3. 設定標題圖片 (顏色、圖片)
透過 #banner 內的 background 屬性設定,來控制標題的顏色或圖片。例如:
#banner { background:#000000; } /* 將標題設成黑色 */
#banner { background:url(圖片網址); } /* 將圖片網址設成標題 */
4. 設定標題文字 (字型、大小與顏色)
透過 #banner .title 中 font-family、font-size 與 color 屬性設定。例如:
#banner .title {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
5. 設定副標題文字 (字型、大小與顏色)
透過 #banner .info 中 font-family、font-size 與 color 屬性設定。例如:
#banner .info {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
6. 設定標題大小 (長、寬)
透過 #banner 內的 height 與 width 屬性設定,來控制標題圖片的長與寬。例如:
#banner {
width: 1000px;
height: 100px;
}
7. 設定工具列的背景色 / 圖片
透過 #tool 內的 background 屬性設定,變更選單區塊顏色或圖片。例如:
#tool { background:#000000; } /* 將工具列背景設成黑色 */
#tool { background:url(圖片網址); } /* 將工具列背景設成圖片 */
8. 設定選單區塊在滑鼠經過變換的圖片 (顏色、圖片)
透過#tool li a:hover 內的 background 屬性設定,變更選單區塊滑鼠經過時的顏色或圖片。例如:
#tool li a:hover { background:#000000; } /* 滑鼠經過時背景變成黑色 */
#tool li a:hover { background:url(圖片網址); } /* 滑鼠經過時背景變成圖片 */
9. 設定連結文字 (字型、大小與顏色)
更改背景後,連結文字可能因為顏色相近的關係看不太清楚,透過 a 中的 font-family、font-size 與 color 屬性設定變更。例如:
a:link { color:#0000FF; } /* 連結字體變藍色 */
a:visited { color:#00FF00; } /* 點擊連結過文字變成綠色 */
a:hover { color:#FF0000; } /* 滑鼠移動到連結時字體變紅色 */
a:active { color:#FFFFFF; } /* 執行中連結變白色 */
10. 設定側欄標題文字 (字型、大小與顏色)
透過 .boxheader 中加入 font-family、font-size 與 color 屬性設定。例如:
.boxheader {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
11. 設定側欄中非連結文字 (字型、大小與顏色)
透過 #menu .boxBody 中 font-family、font-size 與 color 屬性設定。例如:
#menu .boxBody {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}
12. 設定標題文字位置
透過 #banner .title 中 left、top 的屬性設定,可改變標題文字的位置。例如:
#banner .title { position:relative; top:10px;} /* 標題文字由原本的位置開始向下移動10px */
13. 設定選單位置
透過 #tool 中的 left、top 的屬性設定,例如:
#tool { font-size: 15px; } /* 字體大小變成 15px */
14. 設定文章的標題文字 (字型、大小與顏色)
透過 .doc .title 中 font-family、font-size 與 color 屬性設定。例如:
.doc .title {
font-family: Arial;
font-size: 15px;
color: #FF0000;
}