[972]CSS打造XOOPS佈景
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}>則是可以依序加上編號。
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);
}