Xoops‎ > ‎MODULE‎ > ‎

插入圖庫圖片頁面修改排版

不管是在討論區、新聞區發表XOOPS文章時,有個插入圖庫圖片的功能。
但是點開這個頁面,它沒有套用到THEME,LOGO又是XOOPS的原始圖檔,像是來到另一個世界。
就算把XOOPS的圖片改掉,將 html\images\logo.gif 原圖蓋過去只會變得更詭異:


整個改造需要修改樣版。

打開 html\modules\system\templates\system_imagemanager.html 將 style 部份
table#imagemain th {border: 0; background-color: #2F5376; color:white; font-size: 12px; padding: 5px; vertical-align: top; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif;}
table#header td {width: 100%; background-color: #2F5376; vertical-align: middle;}

修改成你要的樣式,如:
table#imagemain th {border: 1; background-color: #FFFFCC; color:black; font-size: 12px; padding: 5px; vertical-align: top; text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif;}
table#header td {width: 100%; background-color: #FFFFFF; vertical-align: middle;}


再把圖片大小消掉,將
<img src="<{$xoops_url}>/images/logo.gif" width="150" height="80" alt="" />

改成
<img src="<{$xoops_url}>/images/logo.gif" alt="" />


順便在此頁頂部多加一個頁數選擇連結,這樣選下一頁就不用拉到底才能按到下一頁囉!
將頂端的選單table部分
 <table cellspacing="0" id="imagenav">
      <tr>
        <td>
        <select name="cat_id" onchange="location='<{$xoops_url}>/imagemanager.php?target=<{$target}>&cat_id='+this.options[this.selectedIndex].value"><{$cat_options}>
        </select> 
        <input type="hidden" name="target" value="<{$target}>" />
        <input type="submit" value="<{$lang_go}>" />
        </td>
        <{if $show_cat > 0}>
        <td align="right"><a href="<{$xoops_url}>/imagemanager.php?target=<{$target}>&op=upload&imgcat_id=<{$show_cat}>"><{$lang_addimage}></a></td>
        <{/if}>
       </tr>
    </table>

改成
<table cellspacing="0" id="imagenav">
    <tr> 
      <td> 
        <select name="cat_id" onChange="location='<{$xoops_url}>/imagemanager.php?target=<{$target}>&cat_id='+this.options[this.selectedIndex].value"><{$cat_options}>
        </select>
        <input type="hidden" name="target" value="<{$target}>" />
        <input type="submit" value="<{$lang_go}>" name="submit" />
      </td>
      <td>
        <div id="pagenav"><{$pagenav}></div>
      </td>
      <{if $show_cat > 0}> 
      <td align="right"><a href="<{$xoops_url}>/imagemanager.php?target=<{$target}>&op=upload&imgcat_id=<{$show_cat}>"><{$lang_addimage}></a></td>
      <{/if}> </tr>
  </table>

修改好之後別忘了存檔。

再到後台的系統 »» 樣版管理 »» 你的樣版 »» 系統
將 system_imagemanager.html 檔整個以剛剛改好的內容覆蓋更新。

完成後插入圖庫圖片頁面和整個網頁就比較像同一個世界的囉!


在這個功能下的新增圖像檔頁面也是一樣。
 打開 html\modules\system\templates\system_imagemanager.html 將 style 部份
td.caption {border: 0; background-color: #2F5376; color:white; font-size: 12px; padding: 5px; vertical-align: top; text-align:left; font-family: Verdana, Arial, Helvetica, sans-serif;}
table#imageform {border: 1px solid silver;}
table#header td {width: 100%; background-color: #2F5376; vertical-align: middle;}

修改成你要的樣式,如:
td.caption {border: 0; background-color: #FFFFCC; color:#000000; font-size: 12px; padding: 5px; vertical-align: top; text-align:left; font-family: Verdana, Arial, Helvetica, sans-serif;}
table#imageform {border: 1px solid silver;}
table#header td {width: 100%; background-color: #FFFFFF; vertical-align: middle;}


 再把圖片大小消掉,將
<img src="<{$xoops_url}>/images/logo.gif" width="150" height="80" alt="" />

改成
<img src="<{$xoops_url}>/images/logo.gif" alt="" />

修改好之後存檔。

再到後台的系統 »» 樣版管理 »» 你的樣版 »» 系統 
將 system_imagemanager2.html 檔整個覆蓋更新。
Comments