吾爱部落

如果你生活在地球,或者想来地球旅行,那就赶紧注册吧!
立即注册

合作站点账号登陆

QQ登录

只需一步,快速开始

快捷导航
查看: 329|回复: 1

[美化素材]论坛贴内信息栏美化

[复制链接]
  • TA的每日心情
    开心
    2019-10-18 19:13
  • 签到天数: 36 天

    [LV.5]常住居民I

    发表于 2019-4-29 18:58:35 | 显示全部楼层 |阅读模式
    首先先上贴内信息栏的美化代码:
    1. <style>
    2. .pls-top{width: 150px;margin: 0 auto;border: dashed 1px #2196F3; padding: 10px 0;border-radius: 3px;height: 40px;}
    3. .pls-title{position: absolute; margin-top: -20px;margin-left: 45px;background: #2196F3;padding: 0 5px 0 5px;color: #FFF;font-size: 12px;border-radius: 3px;line-height: 20px;height: 20px;}
    4. .pls-center{width: 150px;margin: 0 auto;border: dashed 1px #2196F3;padding: 10px 0;border-radius: 3px;margin-top: 15px;}
    5. .md_ctrl img{margin: 3px 2px;}
    6. </style>
    7. <div class="pls-top">
    8. <span class="pls-title">灌水成绩</span>
    9. <table width="100%" style="margin-left: 15px;margin-top: 5px;">
    10. <tbody>
    11. <tr>
    12. <td width="30%">
    13. {baseinfo=threads,0}<br><img src="static/image/common/switch_style.png" style="float: left;margin-left: -15px;margin-right: 2px;"><font color="red">主题</font>
    14. </td>
    15. <td width="30%">{baseinfo=posts,0}<br><img src="img/1.gif" style="
    16. float: left;margin-left: -15px;margin-top: 4px;margin-right: 2px;"><font color="green" style="line-height: 20px;">帖子</font></td>
    17. <td width="30%">{baseinfo=credits,0}<br><img src="img/2.png" style="float: left;margin-left: -15px;margin-top: 4px;margin-right: 2px;">
    18. <font color="#369" style="line-height: 20px;">积分</font></td>   
    19. </tr>
    20. </tbody>
    21. </table>
    22. </div>
    23. <div class="pls-center">
    24. <span class="pls-title">等级头衔</span>
    25. <ul style=" width: 145px;">
    26. <li style="padding-left: 30px;padding-top: 5px;margin-top:3px;"><img src="img/3.png" style="float: left;margin-left: -15px;margin-right: 2px;"><font color="red">ID:</font> {baseinfo=uid,0}</li>
    27. <li style="padding-left: 30px;padding-top: 5px;"><img src="img/4.gif" style="float: left;margin-left: -15px;margin-right: 2px;margin-top: 3px;">{authortitle}</li>
    28. <li style="padding-left: 30px;padding-top: 5px;"><img src="img/8.gif" style="float: left;margin-left: -15px;margin-right: 2px;    margin-top: 3px;"><font color="#e91e63">头衔: {customstatus}<p class=xg1>{*}</p>{/customstatus}</font></li>
    29. <li style="margin-top:5px;">{upgradeprogress}</li>
    30. </ul>
    31. </div>
    32. <!-- part3-->
    33. <div class="pls-center">
    34. <span class="pls-title">积分成就</span>
    35. <ul style="width: 145px;">
    36. <li style="padding-left: 20px;padding-top: 5px;"><img src="img/5.gif" style="float: left;margin-left: -15px;
    37. margin-right: 2px;margin-top: 3px;"><font color="red">威望:</font> {baseinfo=extcredits1,0} <font color="red">点</font></li>
    38. <li style="padding-left: 20px;padding-top: 5px;"><img src="img/6.png" style="float: left;margin-left: -15px;
    39. margin-right: 2px;margin-top: 3px;"><font color="blue">贡献:</font> {baseinfo=extcredits2,0} <font color="blue">次</font></li>
    40. <li style="padding-left: 20px;padding-top: 5px;"><img src="img/7.png" style="float: left;margin-left: -15px;
    41. margin-right: 2px;margin-top: 3px;"><font color="green">金钱:</font> {baseinfo=extcredits3,0} <font color="green">个</font></li>
    42. <li style="padding-left: 20px;padding-top: 5px;"><img src="img/8.png" style="float: left;margin-left: -15px;
    43. margin-right: 2px;margin-top: 3px;"><font color="#9c27b0">违规:</font> {baseinfo=extcredits4,0} <font color="#9c27b0">次</font></li>
    44. <li style="padding-left: 20px;padding-top: 5px;"><img src="img/9.png" style="float: left;margin-left: -15px;
    45. margin-right: 2px;margin-top: 3px;"><font color="#FF5722">在线时间:{baseinfo=oltime,0}</font></li>
    46. <li style="padding-left: 5px;padding-top: 5px;"><font color="#e91e63">注册时间:{baseinfo=regtime,0}</font></li>
    47. <li style="padding-left: 5px;padding-top: 5px;"><font color="#e91e63">最后登录:{baseinfo=lastdate,0}</font></li>
    48. </ul>
    49. </div>
    50. <div class="pls-center">
    51. <span class="pls-title">个人勋章</span>
    52. {medal}<p class="md_ctrl"style="margin:5px 10px 5px 15px !important;">{*}</p>{/medal}
    53. </div>
    54. <div class="pls-center">
    55. <span class="pls-title">联系方式</span>
    56. <div style="margin:0px;margin-top: 10px;margin-left: 35px;">{baseinfo=field_qq,0}</div>
    复制代码

    3. 打开网站“管理中心”- “界面” -“界面设置” - “贴内用户信息” 选择“添加新方案”其中: 方案名称:自定义命名左侧信息模版: CTRL+V将刚刚复制的文档里面的代码全部站内进去。 保存4. 将刚刚添加新方案设置为全局, 保存即可;5. 将此文件夹内的img上传至网站根目录(包含img这个文件夹)
    img图片及其对应图片格式设置:

    IMG_9946.PNG
    IMG_9945.PNG
    IMG_9944.PNG
    IMG_9943.PNG
    IMG_9942.GIF
    IMG_9941.PNG
    IMG_9940.PNG
    IMG_9939.GIF
    IMG_9938.GIF
    IMG_9937.PNG
    IMG_9936.PNG
    IMG_9935.GIF
    吾爱部落官方QQ群:596144792
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2019-11-1 17:08
  • 签到天数: 33 天

    [LV.5]常住居民I

    发表于 2019-6-14 13:40:10 | 显示全部楼层
    吾爱部落官方QQ群:596144792
    回复

    使用道具 举报

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

    本版积分规则

    Archiver|手机版|小黑屋|吾爱部落

    GMT+8, 2020-1-25 01:43 , Processed in 0.074529 second(s), 25 queries .

    Copyright © 2018-2019 吾爱部落 | 時雨

    Powered by Discuz! X3.4

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