设为首页收藏本站

Discuz! 官方站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 49072|回复: 48

[求助] 【分享】帖內左側信息顯示與美化 (X3.0~X3.2版本 2015/4/7更新)

[复制链接]
发表于 2013-4-26 20:39:46 | 显示全部楼层 |阅读模式
本帖最后由 dicky57 于 2015-8-5 17:06 编辑

大家好
今天和大家分享一下使用心得
和新手站長們一起學習成長^^

之前的版本要設置帖內左側
用戶信息顯示的位置時
只要在後台 帖內左側 勾選即可

1.jpg

現在 3.0 版本有一些功能很貼心
給了站長們無限的想像空間
也就是大家可以盡情發揮自己的創意設置美化

默認安裝好後是這樣的

2.jpg

3.jpg

這裡自己新增了一個佈局方案 (個人喜好)

4.jpg

點擊右邊 編輯 進入

以下是 個人喜好 方案
左側信息模板:全部代碼
  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. <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>
  9.         

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


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



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

  14. <dl class="pil cl">{baseinfo=field_qq,0}</dl>
复制代码
5.jpg

這裡我添加了 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 語法

9.jpg

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

6.jpg

設置好之後如圖

7.jpg

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

8.jpg

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

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

比如
在線時間代碼
<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>
复制代码


設置前

1.png

設置後

2.png

有站長在反應說
註冊日期或是最後登錄這項美化
如果加上圖標又空格而日期是 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 即可不建議調整太大
數值太大的話會產生左右不對稱

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

圖標

1.gif

2.png

3.png

4.gif

4.gif

feed.gif

chart.png

5.png

6.gif

7.png


2015/4/7 更新
這次更新是頭像陰影美化
在樓主樓層第十頁

做了一些更新
分享給有需要的站長

在這樓的第二頁 ~ 第十一頁 ↓


评分

4

查看全部评分

发表于 2013-4-26 20:43:04 | 显示全部楼层
好像很复杂的样子啊
回复

使用道具 举报

 楼主| 发表于 2013-4-26 20:45:54 | 显示全部楼层
shuaisky 发表于 2013-4-26 20:43
好像很复杂的样子啊

嗯~
不會複雜的

您可以參考我的代碼
自己添加試試

您仔細查看只要添加 html 語法
就能達到美化效果了
回复

使用道具 举报

发表于 2013-4-26 22:18:47 | 显示全部楼层
谢谢 很详细哈
回复

使用道具 举报

发表于 2013-4-26 22:20:55 | 显示全部楼层
好帖,回复做个记号.
回复

使用道具 举报

发表于 2013-4-26 22:26:03 | 显示全部楼层
楼主如何如图所示把论坛后面的微博代码删了.换成文字呢 084447kywjkp148pw42www.jpg
回复

使用道具 举报

发表于 2013-4-27 01:03:05 | 显示全部楼层
不错~学习了~~
回复

使用道具 举报

发表于 2013-4-27 01:22:25 | 显示全部楼层
唔错,攞嚟试吓先。
回复

使用道具 举报

 楼主| 发表于 2013-4-27 17:53:52 | 显示全部楼层

嗯~
不客氣
大家互相學習交流
回复

使用道具 举报

 楼主| 发表于 2013-4-27 18:01:31 | 显示全部楼层
本帖最后由 dicky57 于 2013-4-27 18:02 编辑
爱过疼过伤过 发表于 2013-4-26 22:26
楼主如何如图所示把论坛后面的微博代码删了.换成文字呢

嗯~
不太瞭解您的意思

您是想要刪除紅框處嗎

222551czox0n6u4f0000cf.jpg.thumb.jpg

這裡留空試試

未命名.jpg

然後在那個位置添加文字嗎
如果是的話
修改這份文件試試
找到適當的位置
在添加您自己的代碼
修改前請先備份

路徑

template/default/forum/discuz.htm 文件

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|Comsenz ( 粤B2-20090059-165 )  

GMT+8, 2017-12-11 15:21

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表