Xoops‎ > ‎THEME‎ > ‎

樣版與佈景CCS控制對照(一)

Theme-phpakox首頁 

佈景phpakox中的style.ccs檔案和樣版互相對照。



1.
左邊主選單區塊的標題以blockTitle控制:
<td class="blockTitle">主選單區塊</td>

style.ccs檔案中設定在這一項:
.blockTitle {background-color: #E2DBD3; color: #666600; padding: 2px; font-weight: bold}

2.左邊主選單區塊內容中的首頁選項以menuTop控制:
<a class="menuTop" href="http://www.wrnsg.com/">回首頁</a>

佈景phpakox的style.ccs檔案沒有設這一項。


3.左邊主選單區塊內容中的其他的選項以menuMain控制:
<a class="menuMain" href="http://www.wrnsg.com/modules/news2/">本站公告</a>

佈景phpakox的style.ccs檔案沒有設這一項。


4.設有連結的以a和a:hover控制,於style.ccs檔案中設定在這一項:
a { font-family: Tahoma, taipei; font-size: 12px; text-decoration: none; color: #666666; font-style: normal}
a:hover { text-decoration: underline overline;  font-family: Tahoma, taipei; font-size: 12px; color: #FF9966; font-style: normal}

可完整增設整個連結變色或樣式:
A:link 
A:visited 
A:active 
A:hover 

樣式可參考此文:網站建置百寶箱 / CSS操控術 / 連結變色


5.左邊一般選單區塊的標題以blockTitle控制:
<td class="blockTitle">搜尋區塊</td>

與1.同。


6.左邊一般選單區塊的內容以blockContent控制:
<td class="blockContent">

style.ccs檔案中設定在這一項:
.blockContent {background-color: #efefef; padding: 2px;}

7.表單項目以input控制,於style.ccs檔案中設定在這一項:
input { background-color : transparent; color : #000000; font-family : 'AR PL New Sung',Tahoma,...略; 
font-size : 12px; font-weight : normal;border-color : #000000;  border-top-width : 1px; border-right-width : 1px; 
border-bottom-width : 1px; border-left-width : 1px;text-indent : 2px;  }



8.自訂區塊的標題以blockTitle控制:
<td class="blockTitle">Welcome</td>

與1.及5.同。


9.自訂區塊的標題以blockContent控制:
<td class="blockContent"><table...>

與6.同。但本自訂區塊內含表格,所以和table項有關,於style.ccs檔案中設定在這一項:
table { width: 100%; margin: 5; padding: 5; font-size: small}
table td { padding: 0; border-width: 0; vertical-align: top; font-family: 'AR PL New Sung',Verdana, ...略;}


10.列表項目的標題以th控制:
<th>

style.ccs檔案中設定在這一項:
th { background-color: #e0e0e0; text-align: left; padding: 3px;}


11.列表項目偶數行以even控制:
<tr class="even">

style.ccs檔案中設定在這一項:
.even { background-color: #DDE1DE;}


12.列表項目奇數行以odd控制:
<tr class="odd">

style.ccs檔案中設定在這一項:
.odd { background-color: #eeeeee;}


*一般呈現在網站上,沒有特別設定的文字大小、色彩、字型等等由此控制:
textarea {font-family: 'AR PL New Sung',Tahoma, ...略; font-size: 12px;background-color : transparent; 
font-weight : bold; border-color : #000000;  border-top-width : 1px; border-right-width : 1px; border-bottom-width : 1px; 
border-left-width : 1px; text-indent : 2px;}

Comments