1. XenForo 1.5.14 中文版——支持中文搜索!现已发布!查看详情
  2. Xenforo 爱好者讨论群:215909318 XenForo专区

美化 发帖、威望、支持用图型显示

本帖由 午夜涩茶2015-07-02 发布。版面名称:XenForo中文版

  1. 午夜涩茶

    午夜涩茶 超级版主 管理成员

    注册:
    2012-03-25
    帖子:
    624
    赞:
    96
    1.模板message_user_info
    查找
    代码:
    <div class="avatarHolder">
                <span class="helper"></span>
    替换
    代码:
    <div class="avatarHolder" align="center">
    <div class="extraUserInfo roundStats">
    <dl class="pairsInline roundMessage">
    <dt><span class="fa fa-comments fa-fw Tooltip" title="{xen:phrase messages}"></span></dt>
    <dd><a href="{xen:link search/member, '', 'user_id={$user.user_id}'}" class="concealed" rel="nofollow">{xen:number $user.message_count}</a></dd>
    </dl>
    
    <dl class="pairsInline roundLike">
    <dt><span class="fa fa-thumbs-up fa-fw Tooltip" title="{xen:phrase likes_received}"></span></dt>
    <dd>{xen:number $user.like_count}</dd>
    </dl>
    
    <dl class="pairsInline roundTrophy">
    <dt><span class="fa fa-trophy fa-fw Tooltip" title="{xen:phrase trophy_points}"></span></dt>
    <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
    </dl>     
    </div>     
            <span class="helper"></span>

    2.模板 EXTRA.CSS

    添加

    代码:
    .messageUserInfo .messageUserBlock .avatar > img { border-radius: 50%; }
    
    .roundStats .fa {
      font-size: 30px;
      line-height: 37px;
      margin-left: -1px;
      margin-top: -1px;
      opacity: 0.25;
    }
    .roundStats .pairsInline {
      border: 1px solid #d5d5d5;
      border-radius: 100%;
      height: 36px;
      width: 36px;
    }
    .messageUserBlock .roundStats .roundTrophy { margin-left: 20px; overflow: hidden; }
    .messageUserBlock .roundStats .roundLike { margin-left: 5px; overflow: hidden; }
    .messageUserBlock .roundStats .roundMessage { margin-left: 20px; margin-top: -10px; overflow: hidden; }
    
    .roundStats .pairsInline > dd {
      color: #000000;
      display: block;
      margin-top: -24px;
      text-align: center;
    }
    .messageUserInfo .extraUserInfo.roundStats {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
      float: left;
      margin-left: -24px;
      margin-top: -2px;
      position: absolute;
    }
    .messageUserBlock .extraUserInfo { font-size: 11px; padding: 4px 6px; }
    3. 3.png

    4. 4.png


    效果图

    5.png


     
    已获得 zhenglee 的点赞。
正在加载...