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

Next

Регистрация
29.09.14
Сообщения
8,903
Симпатии
860
#1
Если хотите получить красивые значки (сообщения, симпатии, трофеи) под Вашей аватаркой с использованием 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
 

3.14

Регистрация
03.03.16
Сообщения
2
Симпатии
0
#2
полезная информация, еще бы центровать аватарку:)
 

UFO

Регистрация
10.09.15
Сообщения
94
Симпатии
22
#3

IonRadu

Регистрация
15.03.16
Сообщения
53
Симпатии
1
#4
Если хотите получить красивые значки (сообщения, симпатии, трофеи) под Вашей аватаркой с использованием 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
как ключиты Font Awesome?
 

Next

Регистрация
29.09.14
Сообщения
8,903
Симпатии
860
#5
[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">
 
Автор темы Похожие темы Тема в разделе Ответов Дата создания
Инструкции и основная информация 7