Красивое отображение информации о пользователе

Тема в разделе "Инструкции и основная информация", создана пользователем Next, 06.03.16.

  1. Next

    Next Администратор

    Сообщения:
    5.643
    Репутация:
    73
    Рейтинг:
    +565 / -0
    Если хотите получить красивые значки (сообщения, симпатии, трофеи) под Вашей аватаркой с использованием Font Awesome, то необходимо сделать следующее:

    1. В шаблоне message_user_info находим:
    Код:
    
    <xen:if is="@messageShowMessageCount AND {$user.user_id}">
                        <dl class="pairsJustified">
                            <dt>{xen:phrase messages}:</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>
                    </xen:if>
                 
                    <xen:if is="@messageShowTotalLikes AND {$user.user_id}">
                        <dl class="pairsJustified">
                            <dt>{xen:phrase likes_received}:</dt>
                            <dd>{xen:number $user.like_count}</dd>
                        </dl>
                    </xen:if>
                 
                    <xen:if is="@messageShowTrophyPoints AND {$user.user_id}">
                        <dl class="pairsJustified">
                            <dt>{xen:phrase trophy_points}:</dt>
                            <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
                        </dl>
                    </xen:if>
    
    2. Меняем на код ниже на:
    Код:
    
    <xen:if is="@messageShowMessageCount AND {$user.user_id}">
                        <dl class="pairsInline">
                            <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>
                    </xen:if>
             
                    <xen:if is="@messageShowTotalLikes AND {$user.user_id}">
                        <dl class="pairsInline">
                            <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>
                    </xen:if>
             
                    <xen:if is="@messageShowTrophyPoints AND {$user.user_id}">
                        <dl class="pairsInline">
                            <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>
                    </xen:if>
    
    3. Далее в Админке: Панель управления - Стили - Настройки стиля - Макет сообщений - Контейнер информации о пользователе - Значение "Ширина" изменяем на 174px:

    4. Далее, переключаемся на вкладку "Контейнер содержимого" и изменяем значение внешнего отступа слева до 190px:

    5. Сохраняем все наши изменения и в шаблон EXTRA.css добавляем:
    Код:
    .extraUserInfo .pairsInline .fa {
        font-size: 20px;
        opacity: .5;
        color: rgb (150,150,150)
    }
    .messageUserBlock .extraUserInfo .pairsInline {
        display: inline-block;
        margin-bottom: 5px;
        text-align: center;
        width: 32%;
    }
    .messageUserBlock .extraUserInfo {
        color: rgb(106, 106, 106);
        font-size: 10px;
        margin: 5px 10px;
        padding: 0 !important;
        }
    
    .extraUserInfo .pairsInline > dd {
        display: block;
        margin-top: 5px;
        font-size: 10px;
        padding: 4px;
        max-width: none;
        border: 1px solid rgb(165,202,228);
        border-radius: 2px;
        background: rgb(252,252,252);
        text-align: center;
    }

    У Вас должен быть подключен шрифт Font Awesome

    1.png
     
    • Мне понравилось Мне понравилось x 1
    • 3.14

      3.14 Новичок

      Сообщения:
      2
      Репутация:
      5
      Рейтинг:
      +0 / -0
      полезная информация, еще бы центровать аватарку:)
       
    • UFO

      UFO Участник

      Сообщения:
      32
      Репутация:
      11
      Рейтинг:
      +6 / -1
    • IonRadu

      IonRadu Участник

      Сообщения:
      53
      Репутация:
      5
      Рейтинг:
      +1 / -0
      как ключиты Font Awesome?
       
    • Next

      Next Администратор

      Сообщения:
      5.643
      Репутация:
      73
      Рейтинг:
      +565 / -0
      [cXF] Font Awesome Switch
      [SVG]Font Awesome

      или
      Шаблон PAGE_CONTAINER, после <head> добавить
      Код:
      <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet">