绿兔子 发表于 2020-2-8 20:33:53

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

點擊右邊 編輯 進入

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

   
{numbercard}
    {groupicon}<p>{*}</p>{/groupicon}
    {authortitle}<p><em>{*}</em></p>{/authortitle}
    {customstatus}<p class="xg1">{*}</p>{/customstatus}
    {star}<p>{*}</p>{/star}
    {upgradeprogress}<p>{*}</p>{/upgradeprogress}
    <dl class="pil cl">

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

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

    </dl>
    {medal}<p class="md_ctrl">{*}</p>{/medal}

    <dl class="pil cl">{baseinfo=field_qq,0}</dl>

复制代码


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

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

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

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


    <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>
最後登入代碼

查找原本在線時間的代碼


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

复制代码


替換為

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


复制代码


查找原本最後登入的代碼

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

复制代码


替換為

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

复制代码


設置前



設置後



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

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

可以不要空格即可
比如

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


复制代码


如果要修改文件的話

打開

template/default/common/module.css 文件

查找


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

复制代码


替換為


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

复制代码


上方代碼中的

width: 164px

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

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

圖標

六翼天使494 发表于 2020-2-10 22:08:08

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

Gordon520 发表于 2020-2-11 00:38:09

前排,哇咔咔

塞翁364 发表于 2020-2-14 17:10:02

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

123456811 发表于 2020-2-17 06:31:08

不错,顶一个!
页: [1]
查看完整版本: 帖內左側信息顯示與美化 (X3.0~X3.2版本 更新)