:::

4-5 調整主選單/使用者選單區塊

school2012的主選單/使用者選單樣式如下面左邊那張圖,每一行的連結底下是一個漸層圖檔,如下表左圖

原本樣式

修改後樣式

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

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檔直接編輯,不過注意這些檔案內容只能有英文數字,若有中文字(日文等雙位元字)在裡面,編輯後內容會亂掉。