線上書籍

[972]CSS打造XOOPS佈景

一、主選單

1.id="mainmenu"（整個主選單）
(1) class="menuTop"（第一個選項，通常是回首頁）
(2) class="menuMain"（一般主選項）
(3) class="menuSub"（次選項）

二、使用者選單（若已內建到佈景，則可略過）

1.id="usermenu"（整個使用者選單）
(1) class="menuTop"（第一個選項）
(2) class="highlight"（有新信時）

三、表格框線部份（評論區、「新會員」或「張貼者排行」區塊就會用到）

1.class="outer"（表格外框）
2.class="head"（表格頭）
3.class="foot"（表格尾）
4.class="odd"（奇數列）
5.class="even"（偶數列，建議盡量設成有顏色，因為常被拿來當工具列底色）

四、XOOPS基本CSS範例（xoops.css）

1.請在style.css中用「@import url(xoops.css);」引入之。

#mainmenu a {
display: block;
margin: 6px 2px;
text-decoration: none;
color:rgb(0,51,102);
}

#mainmenu a:hover {
background-image: url(images/xx.png);
background-position: 0px;
background-repeat: no-repeat;
color:rgb(255,0,51);
}

#mainmenu a.menuTop {
padding-left: 8px;
color:rgb(255,51,0);
background-image: none;
}

#mainmenu a.menuMain {
padding-left: 18px;
}

#mainmenu a.menuSub {
padding-left: 36px;
color:rgb(0,102,102);
}

#mainmenu a.menuSub:hover {
background-position: 18px;
}

.outer {
border: 1px solid silver;
border-collapse:collapse;
}

.head {
background-color: rgb(153,153,51);
padding: 5px;
color:rgb(255,255,255);
font-weight: bold;
}

.foot {
background-color: rgb(153,153,51);
padding: 5px;
color:rgb(255,255,255);
font-weight: bold;
}

.even {
background-color: rgb(255,255,255);
padding: 5px;
}

.odd {
background-color: rgb(225,255,196);
padding: 5px;
}

tr.even td {
background-color: rgb(255,255,255);
padding: 5px;
}

tr.odd td {
background-color: rgb(225,255,196);
padding: 5px;
}