13. 設定區塊外觀

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

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

filter:alpha(opacity=30); /* IE */
-moz-opacity:0.3; /* Moz + FF */
opacity: 0.3; /* 支援CSS3的瀏覽器*/

二、輪流套用顏色

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}>

<{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}>

4.修改theme.html中，要改套用新樣板的區塊呈現區，修改其引入檔為block_c.html。
5.修改style.css，針對不同區域的的外觀做設定。

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);
}