帖內左側信息顯示與美化 (X3.0~X3.2版本 更新)

绿兔子

點擊右邊 編輯 進入

以下是 個人喜好 方案
左側信息模板:全部代碼

   

1. {numbercard}
   
2.     {groupicon}<p>{*}</p>{/groupicon}
   
3.     {authortitle}<p><em>{*}</em></p>{/authortitle}
   
4.     {customstatus}<p class="xg1">{*}</p>{/customstatus}
   
5.     {star}<p>{*}</p>{/star}
   
6.     {upgradeprogress}<p>{*}</p>{/upgradeprogress}
   
7.     <dl class="pil cl">
   
8. 
   
9.     <dt><img src="http://i.imgur.com/RG2jdDO.gif">    <font color="ff0000">{baseinfo=extcredits1,1}</font></dt><dd>{baseinfo=extcredits1,0}<font color="ff0000">點</font></dd>
   
10.             
    
11.     <dt><img src="http://i.imgur.com/i7yRHRr.png">    <font color="3399ff">{baseinfo=extcredits3,1}</font></dt><dd>{baseinfo=extcredits3,0}<font color="3399ff">次</font></dd>
    
12. 
    
13.     <dt><img src="http://i.imgur.com/jkJMrwc.png">    <font color="008800">{baseinfo=extcredits2,1}</font></dt><dd>{baseinfo=extcredits2,0}<font color="008800">枚</font></dd>
    
14. 
    
15.     </dl>
    
16.     {medal}<p class="md_ctrl">{*}</p>{/medal}
    
17. 
    
18.     <dl class="pil cl">{baseinfo=field_qq,0}</dl>

复制代码

复制代码


這裡我添加了 html 語法
將文字變色也添加了圖標

紫色字部分是添加了圖標
紅色字部分是添加了變色

   

1. <dt><img src="http://i.imgur.com/RG2jdDO.gif">    <font color="ff0000">{baseinfo=extcredits1,1}</font></dt><dd>{baseinfo=extcredits1,0}<font color="ff0000">點</font></dd>
   
2.             
   
3. 
   
4.     <dt><img src="http://i.imgur.com/i7yRHRr.png">    <font color="3399ff">{baseinfo=extcredits3,1}</font></dt><dd>{baseinfo=extcredits3,0}<font color="3399ff">次</font></dd>
   
5. 
   
6. 
   
7.     <dt><img src="http://i.imgur.com/jkJMrwc.png">    <font color="008800">{baseinfo=extcredits2,1}</font></dt><dd>{baseinfo=extcredits2,0}<font color="008800">枚</font></dd>

复制代码

圖標的部分也可以在這裡新增即可
不用添加 html 語法



如果不知道要如何添加變色代碼
可以在風格這裡選擇好顏色後
再將色碼複製起來使用即可



設置好之後如圖



只要用一些 html 語法就能達到美化效果
如果您設置了很多不同的方案時
也可以設置不同的用戶組設置不同的方案



另外有些站長設置最後登入和在線時間時
如果想再添加圖標
就會產生顯示不完全的問題
也就是有些字不顯示了

我們可以將前後的代碼刪除
然後在添加個換行的代碼即可

比如
在線時間代碼
<br>
最後登入代碼

查找原本在線時間的代碼

1.    <dt>{baseinfo=oltime,1}</dt><dd>{baseinfo=oltime,0}</dd>
   

复制代码

复制代码


替換為

1.     <img src="http://i.imgur.com/7LehsP7.png">  <font color="#FF4B00">{baseinfo=oltime,1}: {baseinfo=oltime,0}</font><br>

复制代码

复制代码


查找原本最後登入的代碼

   

1. <dt>{baseinfo=lastdate,1}</dt><dd>{baseinfo=lastdate,0}</dd>

复制代码

复制代码


替換為

   

1. <img src="http://i.imgur.com/eso4xmo.gif">  <font color="F000F0">{baseinfo=lastdate,1}: {baseinfo=lastdate,0}</font>

复制代码

复制代码


設置前



設置後



有站長在反應說
註冊日期或是最後登錄這項美化
如果加上圖標又空格而日期是 2014-12-20
就會產生斷行也就是不能在同一行顯示

我們有兩種方法可以解決
如果不想修改文件的話

可以不要空格即可
比如

1.     <img src="http://i.imgur.com/eso4xmo.gif"><font color="F000F0">{baseinfo=lastdate,1}:{baseinfo=lastdate,0}</font>

复制代码

复制代码


如果要修改文件的話

打開

template/default/common/module.css 文件

查找

  

1.   .pls { width: 160px; background: {SPECIALBG}; overflow: hidden; border-right: 1px solid {CONTENTSEPARATE}; }

复制代码

复制代码


替換為

1.    .pls { width: 164px; background: {SPECIALBG}; overflow: hidden; border-right: 1px solid {CONTENTSEPARATE}; }

复制代码

复制代码


上方代碼中的

width: 164px

164px 這個數值可以適度的調整
一般 164 或是 165 即可不建議調整太大
數值太大的話會產生左右不對稱

修改前請先備份
修改後記得更新緩存

圖標

六翼天使494

支持你哈...................................

Gordon520

前排，哇咔咔

塞翁364

发发呆，回回帖，工作结束~

123456811

不错，顶一个！