線上書籍

Home

[972]CSS打造XOOPS佈景

一、加入XOOPS佈景檔頭
1.請開啟教材包中的「檔頭.txt」,並將裡頭所有內容複製起來。
2.開啟theme.html,貼上並覆蓋<body>之前(含<body>)的所有HTML語法。

二、加入XOOPS佈景語法
1.請開啟教材包中的「樣板碼.txt」,並將裡頭所有內容依序複製起來。
2.將複製起來的語法複製到theme.html中,並覆蓋原先標示的中文。

三、建立基本的區塊呈現區樣板檔(block.html)
1.區塊區域樣板檔不見得要有,也可直接做到them.html裡頭,但這樣容易導致theme.html不易維護,所以大多獨立出來。
2.您可以針對八個區域做八個不同的區塊呈現區樣板檔,也可以做一個大家一起用。
3.區塊呈現區樣板只有兩個樣板碼:
(1) 區塊標題:<{$block.title}>
(2) 區塊內容:<{$block.content}> (區塊內容另外有區塊本身樣板控制)
4.建議寫法如下:有標題,則秀出套樣式的標題及內容,若無,則秀出不套樣式的內容:

<{if $block.title}>
<div class="blockTitle"><{$block.title}></div>
<div class="blockContent"><{$block.content}></div>
<{else}>
    <{$block.content}>
<{/if}>

5.接著修改style.css加入 . blockTitle 以及 . blockContent 的樣式設定。

四、套用佈景
1.建議加入「版面風格」區塊,方便切換佈景,並記得到偏好設定將新的佈景加入選項。
2.修改基本CSS,如使用者選單(id="usermenu")或主選單(id="mainmenu")

#usermenu a,#mainmenu a{
    display: block;
    font-size: 12px;
    text-decoration: none;
    color: #4169E1;
    margin:3px;
    padding:2px;
}
#usermenu a:hover ,#mainmenu a:hover{
    color: White;
    background-color: #3F74A2;
}

3.若要垂直靠上(如id="content"),請加入「vertical-align:top;」即可。

五、有區塊才顯示(避免一堆無謂的空白)
1.有「上中區塊」才顯示(若網站沒套用任何區快到上中區塊呈現區,則整區消失):

<{if  $xoBlocks.page_topcenter}>區塊樣板語法<{/if}>

(1) 上左區塊:$xoBlocks.page_topleft
(2) 上右區塊:$xoBlocks.page_topright
(3) 上中區塊:$xoBlocks.page_topcenter
(4) 下左區塊:$xoBlocks.page_bottomleft
(5) 下右區塊:$xoBlocks.page_bottomright
(6) 下中區塊:$xoBlocks.page_bottomcenter
(7) 左區塊:$xoBlocks.page_left
(8) 右區塊:$xoBlocks.page_right