[Модификация шаблонов] Красивое отображение данных о пользователе в темах, с использованием Font Awesome

Тема в разделе "Стили для XenForo", создана пользователем klop, 6 июн 2015.

  1. klop

    klop

    Регистрация:
    19 ноя 2012
    Сообщения:
    1.523
    Симпатии:
    1.856
    В шаблоне 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>
    И заменяем на:
    Код:
    <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>
    Далее идём по пути: Панель управления - Стили - Настройки стиля - Макет сообщений - Контейнер информации о пользователе - Значение "Ширина" изменяем на 174px:
    [​IMG]
    Далее, переключаемся на вкладку "Контейнер содержимого" и изменяем значение внешнего отступа слева до 190px:
    [​IMG]
    Сохраняем все наши изменения и в шаблон 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: 15px;
        margin: 5px 10px;
        padding: 0 !important;
        }
    
    .extraUserInfo .pairsInline > dd {
        display: block;
        margin-top: 5px;
        font-size: 14px;
    }
    Получится у нас вот такое отображение:
    [​IMG]
     
    panamer, o-0-0-0 и Astemir нравится это.
  2. atomstr

    atomstr

    Регистрация:
    3 мар 2015
    Сообщения:
    19
    Симпатии:
    7
    1. вы забыли самое главное. написать как в паже_контейнер подключить загрузку самого фонтавесома.
    2. скрины вас выдают, Мих ты чтоль? а то скрины говорят о чем-то.
     
    o-0-0-0 нравится это.