仿19楼帖内个人信息用户等级美化

对会员等级样式做了个小小修改，仿19楼用户等级美化分享出来给有需要的朋友。水平有限，不喜绕道
演示地址：http://bbs.sxmz.cc/thread-754-1-1.html

19楼样式：




修改前:


修改后:



涉及修改的文件：
template/default/common/module.css

template/default/forum/viewthread_node.htm

打开viewthread_node.htm

查找以下代码：

1. <p><em><a href="home.php?mod=spacecp&ac=usergroup&gid=$post[groupid]" target="_blank">{$post[authortitle]}</a></em></p>
   
2.                         

复制代码

替换为：

1. <ul class="userinfo_level"><li><span class="userinfo_gray">等级&nbsp;&nbsp;</span><span class="km_level"><em class="km_level_num">$post['stars']</em><em class="km_level_name"><a href="home.php?mod=spacecp&ac=usergroup&gid=$post[groupid]" target="_blank">{$post[authortitle]}</a></em></span></li></ul>
   
2.                         

复制代码

打开module.css

查找：

1. #pl_top .ad .pls, #pl_top .ad .plc { height: 1px;overflow: hidden; }
   
2.                 #pl_top .pls { text-indent: 15px; }

复制代码

在下面增加如下代码：

1. /* 个人信息会员等级样式美化 */
   
2. .userinfo_level { margin: 5px 10px 5px 10px; }
   
3. .userinfo_gray { color: #666; }
   
4. .userinfo_level li { line-height: 20px; text-indent: 10px; width: 100%; height: 20px; overflow: hidden; }
   
5. .userinfo_level li span { float: left; color: #444; }
   
6. .userinfo_level li span.km_level { width: 90px; background: url({IMGDIR}/level_info1.png) no-repeat left -25px; float: left; height: 17px; overflow: hidden; cursor: pointer; }
   
7. .userinfo_level li span.km_level em.km_level_num { float: left; text-indent: 12px; width: 25px; font: 10px/20px "Arial"; color: #fff; left: 0px; -webkit-text-size-adjust: none; display: block; }
   
8. .userinfo_level li span.km_level em { height: 17px; }
   
9. .userinfo_level li span.km_level em.km_level_name { float: left; text-align: center; height: 17px; line-height: 17px; text-indent: 0px; width: 58px; color: #099AD0; display: block; }
   
10. .userinfo_level li span.km_level em.km_level_name a { color: #099AD0; }
    

复制代码

保存后上传到相应目录，更新缓存。

需上传一张图片到static/image/common/ 下



需要升级进度条的下载官方插件安装即可：
https://discuz.dismall.com/thread-1883822-1-1.html

----------------------分割线----------------------------------
1022日修复错位问题,请从新使用上面代码编辑module.css

对不想显示星星等级的可以注释掉以下代码

1. <!--注释掉星星等级图<p{if $post['upgradecredit'] !== false} id="g_up$post[pid]" onmouseover="showMenu({'ctrlid':this.id, 'pos':'12!'});"{/if}><!--{eval showstars($post['stars']);}--></p>
   
2.                         <!--{if $post['upgradecredit'] !== false}-->
   
3.                                 <div id="g_up$post[pid]_menu" class="tip tip_4" style="display: none;">
   
4.                                         <div class="tip_horn"></div>
   
5.                                         <div class="tip_c">$post['authortitle'], {lang credits} $post['credits'], {lang thread_groupupgrade} $post['upgradecredit'] {lang credits}</div>
   
6.                                 </div>
   
7.                         <!--{/if}-->注释掉星星等级图-->

复制代码

谢谢分享哦。。。

不错，这个比较简单。

不错！ 感谢分享~

弄了，没反映!

求解！

ban2011 发表于 2011-10-19 22:27
弄了，没反映!

求解！

更新缓存没？浏览器完全刷新下

这个不错。。

http://bbs.sxmz.cc/thread-754-1-1.html

ding2006 发表于 2011-10-19 23:07
更新缓存没？浏览器完全刷新下

谢谢楼主回复！

按照您的方法，已经修改和更新！但在官方默认风格里只显示等级V图片，而进度条未有显示。

另请教，其他风格的修改方法！谢谢您！望指点一下新人！