線上書籍

Home

[972]CSS打造XOOPS佈景

一、新增一組樣板組

1.「後台→模板管理→新樣板組名稱」
2.「後台→系統選項→一般設定→基本參數設定→預設樣板組」

二、找到想修改的區塊（以「線上用戶」為例）

1.「後台→區塊管理→（找到要修改的區塊）→編輯→編輯樣板」
2.可以直接在線上修改「HTML樣板」的內容，亦可複製到文件編輯器修改完再貼上。
3.除<{$block.lang_xxx}>語系（可隨意修改）外，可透過比對得知樣板標籤之用途：
(1) <{$block.online_total}> 是總人數，亦即「2人線上」
(2) <{$block.online_members}> 是會員人數，亦即「會員: 1」
(3) <{$block.online_guests}> 是遊客人數，亦即「遊客: 1」
(4) <{$block.online_names}> 則是會員名稱，亦即「tad」

<style>
div#onlie_div{
  width:180px;
  height:180px;
  background-image:url("<{$xoops_url}>/themes/佈景/images/doratop.png");
  behavior: url(iepngfix.htc);
}
table#onlie_block{
  border:0px solid gray;
  border-collapse:collapse;
  width:109px;
  height:48px;
  margin:52px auto auto 19px;
}

table#onlie_block td{
  border:0px solid gray;
  font-family: Verdana, Arial;
}

table#onlie_block td.num{
  text-align:center;
  font-size:14px;
  font-weight:bold;
  color:#0097E3;
}

table#onlie_block td a{
  font-size: 11px;
  text-decoration: none;
  color: gray;
}
</style>
<div id="onlie_div">
  <table id="onlie_block">
  <tr style="height:24px;">
    <td style="width:33px;"></td>
    <td style="width:38px;"></td>
    <td style="width:38px;"></td>
  </tr>
  <tr style="height:24px;">
    <td></td>
    <td class="num">
      <{$block.online_members}>
    </td>
    <td class="num">
      <{$block.online_guests}>
    </td>
  </tr>
  <tr style="height:16px;">
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td colspan=3>
      <{$block.online_names}>
      <a href="javascript: openWithSelfMain('<{$xoops_url}>/misc.php?action=showpopups&amp;type=online','Online',420,350);" title="<{$block.lang_more}>">
      <{$block.lang_more}>
      </a>
    </td>
  </tr>
  </table>
</div>

 

三、標題空白，則不秀出區塊標題

1.編輯block.html

<{if $block.title}>
  原設定
<{else}>
  <{$block.content}>
<{/if}>

改裝前

 

改裝後