Tad 教材網 - 線上書籍

:::

12. 將網頁變成佈景

14. 整合登入及使用者選單 next

\[972\]CSS打造XOOPS佈景
===================

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/bluefish/13.zip)

### 一、設定透明度（IE、FF皆適用）

1.透明度可以有效的讓物件和背景融合，數值越小，越不透明；反之，越大越透明。  
 2.此外，套用透明度時，需有明確的寬度設定，否則IE會沒有作用。

<font color="#3366ff">filter:alpha(opacity=30); /\* IE \*/  
 -moz-opacity:0.3; /\* Moz + FF \*/  
 opacity: 0.3; /\* 支援CSS3的瀏覽器\*/</font>

### 二、輪流套用顏色

1.<{cycle}>是smarty的特殊函數，可以讓您輪流秀出設定值。  
 2.將<div class="block\_title">改為<div class="<{cycle values="block\_title,block\_title\_r,block\_title\_g,block\_title\_b"}>">  
 3.在CSS檔中，分別設新增block\_title\_r、block\_title\_g、block\_title\_b樣式。  
 4.補充：<{counter}>則是可以依序加上編號。

### 三、處理png透明圖在IE6的問題

1.將iepngfix.zip解壓，取出iepngfix.htc、blank.gif放到根目錄。  
 2.在CSS檔中，有套用到png圖的地方，加入：behavior: url(iepngfix.htc);

### 四、套用不同區塊設定（以中間區塊為例）

1.將block.html樣板檔複製一份，並改名為block\_c.html。  
 2.修改block\_c.html的內容，成為您想要的外觀版面。  
 3.在佈景中，要引入實體檔案，需用佈景標籤：  
 (1) 若檔案在根目錄<{xoAppUrl iepngfix.htc}>  
 (2) 若檔案在佈景目錄<{xoImgUrl images/btc1.png}>

<font color="#3366ff">  
 <{if $block.title}>  
 <table cellspacing="0" cellpadding="0" class="block\_title\_c">  
 <tr>  
 <td style='width:61px;'><img src="<{xoImgUrl images/btc1.png}>"></td>  
 <td style='width:100%;background-image:url(<{xoImgUrl images/btc2.png}>);'><{$block.title}></td>  
 <td style='width:13px;'><img src="<{xoImgUrl images/btc3.png}>"></td></tr>  
 <tr><td colspan=3><{$block.content}></td></tr>  
 </table>  
 <{else}>  
 <{$block.content}>  
 <{/if}></font>  
   
 4.修改theme.html中，要改套用新樣板的區塊呈現區，修改其引入檔為block\_c.html。  
 5.修改style.css，針對不同區域的的外觀做設定。

<font color="#3366ff">table.block\_title\_c{  
 border-collapse:collapse;  
 padding: 0px;  
 border:none;  
 margin:0px;  
 }  
   
 table.block\_title\_c td{  
 behavior: url(iepngfix.htc);  
 }  
   
 table.block\_title\_c td img{  
 behavior: url(iepngfix.htc);  
 }  
 </font>

:::