嘉義縣政府教育網路中心

:::

以Tad\_themes佈景管理打造XOOPS網站外觀
===========================

school2012的主選單/使用者選單樣式如下面左邊那張圖，每一行的連結底下是一個漸層圖檔![](http://enc.cyc.edu.tw/themes/school2012/images/menu_background.png)，如下表左圖

<table border="1" cellpadding="1" cellspacing="1"> <tbody> <tr> <td> 原本樣式

![](http://enc.cyc.edu.tw/uploads/tad_book3/image/tad_themes/tad_themes_i02.png)

</td> <td> 修改後樣式

![](http://enc.cyc.edu.tw/uploads/tad_book3/image/tad_themes/tad_themes_i03.png)

</td> </tr> </tbody> </table>

這個漸層圖在淺色的配置下沒什麼問題，但若網站調整成各種色系，這個漸層圖可能就不適合。此外當文字長度增加跑出第二行的時候，整個區塊會變得很奇怪。

XOOPS 2.5.x可以到樣板管理找school2012佈景下面的css/itensXoops.css編輯（或是透過FTP編輯），將16～20行的

#mainmenu a, #usermenu a{display:block; line-height:2em;background-image:url(../images/menu\_background.png);background-position: center center;padding-left:20px;}  
 #mainmenu a:hover, #usermenu a:hover{}  
 #mainmenu a.menuSub{font-size:12px; color:#333; line-height:2.5em; margin-left:25px; border-bottom:1px dashed #FAFAFA;}  
 #mainmenu a:hover.menuSub{border-bottom:1px dashed #333;}

改成

#mainmenu a, #usermenu a{display:block; line-height:2.0em;background-image:url();padding-left:15px;border-bottom:1px dashed #999;font-size:1.1em;}  
 #mainmenu a:hover, #usermenu a:hover{border-bottom:1px dashed #333;}  
 #mainmenu a.menuSub{font-size:1em; line-height:1.6em; margin-left:15px; border-bottom:1px dashed #999;}  
 #mainmenu a:hover.menuSub{border-bottom:1px dashed #333;}

若有其他自訂區塊也想用相同的效果可以這樣做，注意中間的網站連結不需要加上<br>分行

第一行<div id=usermenu>

中間<a href=......>網站連結</a>

最後一行</div>

XOOPS 2.5.x的樣板管理可以對佈景下的HTML和CSS檔直接編輯，不過注意這些檔案內容只能有英文數字，若有中文字（日文等雙位元字）在裡面，編輯後內容會亂掉。

![](http://enc.cyc.edu.tw/uploads/tad_book3/image/tad_themes/tad_themes_i04.png)

嘉義縣政府教育網路中心
頂六機房地址：嘉義縣中埔鄉金蘭村頂山門25號(頂六國民小學內)
URL：https://enc.cyc.edu.tw／EMail：enc@mail.cyc.edu.tw
PSTN：05-2304464／FAX：05-2302051／VOIP：96029900
Line通話：https://lin.ee/FqnbTx1

MarkDown