Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430

Решено Элементы сообщений картинкой

Статус
В этой теме нельзя размещать новые ответы.
MrBurn

MrBurn

Проверенные
Сообщения
249
Решения
1
Реакции
124
Баллы
8,140
Приветствую, подскажите с таким вопросом. Хочу сделать вместо стандартного оформления сообщений и лайков, вот в таком стиле как в прикреплённом файле. Буду благодарен за подсказки.
 

Вложения

  • sa.jpg
    sa.jpg
    23.9 KB · Просмотры: 51
Сортировка по дате Сортировка по голосам
Был где то плагин. Вообщем надо текст заменить картинкой. То есть "сообщения" заменяешь на вот то, "репутацию/ симпатии" на другое.
Тут можешь подобрать иконки
У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация
 
Позитивный голос 0 Негативный голос
Смысл бесполезную информацию выделять курсив :)
Надо сделать как то так, в шаблоне 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} AND {$xenOptions.enableTrophies}">
                    <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="pairsJustified xbMessages">
                        <dt><i class="fa fa-comments fa-fw Tooltip" title="{xen:phrase messages}" data-offsetx="-6" data-offsety="0"></i></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 xbLikes">
                        <dt><i class="fa fa-thumbs-up fa-fw Tooltip" title="{xen:phrase likes_received}" data-offsetx="-6" data-offsety="0"></i></dt>
                        <dd>{xen:number $user.like_count}</dd>
                    </dl>
                </xen:if>
               
                <xen:if is="@messageShowTrophyPoints AND {$user.user_id} AND {$xenOptions.enableTrophies}">
                    <dl class="pairsJustified xbTrophyPoints">
                        <dt><i class="fa fa-trophy fa-fw Tooltip" title="{xen:phrase trophy_points}" data-offsetx="-6" data-offsety="0"></i></dt>
                        <dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger concealed">{xen:number $user.trophy_points}</a></dd>
                    </dl>
                </xen:if>
В EXTRA.css добавить:
Код: 
.messageUserBlock .extraUserInfo.xbBoxedFA .xbMessages,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbLikes,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbTrophyPoints
{
    font-size:120%;
    background-color:@contentBackground;
    margin:2px 0px;
    border:1px solid @faintTextColor;
    border-radius:2px;
    display:inline-block;
    box-sizing:border-box;
    min-width:31%;
}
.messageUserBlock .extraUserInfo {
    display:block;
    text-align:center;
}
.messageUserBlock .extraUserInfo.xbBoxedFA .xbMessages dt,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbLikes dt,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbTrophyPoints dt
{
    font-size:16px;
    color:@primaryDarker;
    margin-right:0px;
    float:none;
    text-align:center;
    width:auto;
}
.messageUserBlock .extraUserInfo.xbBoxedFA .xbMessages dd,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbLikes dd,
.messageUserBlock .extraUserInfo.xbBoxedFA .xbTrophyPoints dd
{
    margin-right:0px;
    float:none;
    text-align:center;
    width:auto;
}
Обязательные условия, подключенный шрифт Font Awesome, в настройках Настройки стиля: Элементы сообщений, должны быть отмечены только:
  • Отображать количество сообщений
  • Отображать количество симпатий
  • Отображать баллы за трофеи
Возможно изменение ширины блока информации о пользователи, это только предварительно, надо подстраивать под стили.

Как бы можно сделать так:
2016-04-18_081420.png
Но у меня еще добавлены дислайки вместо трофеев, увеличен аватар ну и еще кое что :) не важно

ДА! Самое главное не забываем о существовании TMS, что бы не было осложнений в последствии :)

Блин забыл еще про один класс :) он же добавлен ко всему постбиту, короче все содержимое message_user_info надо менять или смотрите где добавлен класс xbBoxedFA, вот весь код:
Код: 
<xen:require css="message_user_info.css" />

<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">   
<div class="messageUserBlock {xen:if $user.isOnline, online}">
    <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
        <div class="avatarHolder">
            <span class="helper"></span>
            <a class="avatar Overlay Av{$user.user_id}b" href="{xen:link members, $user}">
                           <img src="{xen:helper avatar, {$user}, b}" alt="" style="{xen:helper avatarCropCss, $user}" />
                        </a>
            <xen:if is="{$user.isOnline}"><span class="Tooltip onlineMarker" title="{xen:phrase online_now}" data-offsetX="-22" data-offsetY="-8"></span></xen:if>
            <!-- slot: message_user_info_avatar -->
        </div>
    </xen:hook>

<xen:if is="!{$isQuickReply}">
    <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
        <h3 class="userText">
            <xen:username user="$user" itemprop="name" rich="true" />
            {xen:helper userBanner, $user, 'wrapped'}
            <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 1, 1}</xen:contentcheck></em></xen:if>           
            <!-- slot: message_user_info_text -->
        </h3>
    </xen:hook>
       
    <xen:if hascontent="true">
        <div class="extraUserInfo xbBoxedFA">
            <xen:contentcheck>
            <xen:hook name="message_user_info_extra" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
                <xen:if is="@messageShowRegisterDate AND {$user.user_id}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase joined}:</dt>
                        <dd>{xen:date $user.register_date, 'd.m.y'}</dd>
                    </dl>
                </xen:if>
               
                <xen:if is="@messageShowMessageCount AND {$user.user_id}">
                    <dl class="pairsJustified xbMessages">
                        <dt><i class="fa fa-comments fa-fw Tooltip" title="{xen:phrase messages}" data-offsetx="-6" data-offsety="0"></i></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 xbLikes">
                        <dt><i class="fa fa-thumbs-up fa-fw Tooltip" title="{xen:phrase likes_received}" data-offsetx="-6" data-offsety="0"></i></dt>
                        <dd>{xen:number $user.like_count}</dd>
                    </dl>
                </xen:if>
               
                <xen:if is="@messageShowTrophyPoints AND {$user.user_id} AND {$xenOptions.enableTrophies}">
                    <dl class="pairsJustified xbTrophyPoints">
                        <dt><i class="fa fa-trophy fa-fw Tooltip" title="{xen:phrase trophy_points}" data-offsetx="-6" data-offsety="0"></i></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="@messageShowGender AND {$user.gender}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase gender}:</dt>
                        <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
                    </dl>
                </xen:if>
               
                <xen:if is="@messageShowOccupation AND {$user.occupation}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase occupation}:</dt>
                        <dd itemprop="role">{xen:string censor, $user.occupation}</dd>
                    </dl>
                </xen:if>
               
                <xen:if is="@messageShowLocation AND {$user.location}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase location}:</dt>
                        <dd><a href="{xen:link 'misc/location-info', '', 'location={xen:string censor, $user.location, '-'}'}" target="_blank" rel="nofollow" itemprop="address" class="concealed">{xen:string censor, $user.location}</a></dd>
                    </dl>
                </xen:if>
           
                <xen:if is="@messageShowHomepage AND {$user.homepage}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase home_page}:</dt>
                        <dd><a href="{xen:string censor, $user.homepage, '-'}" rel="nofollow" target="_blank" itemprop="url">{xen:string censor, $user.homepage}</a></dd>
                    </dl>
                </xen:if>
                           
            </xen:hook>           
            <xen:if is="@messageShowCustomFields AND {$user.customFields}">
            <xen:hook name="message_user_info_custom_fields" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
           
                <xen:foreach loop="$userFieldsInfo" key="$fieldId" value="$fieldInfo">
                    <xen:if is="{$fieldInfo.viewable_message} AND ({$fieldInfo.display_group} != 'contact' OR {$user.allow_view_identities} == 'everyone' OR ({$user.allow_view_identities} == 'members' AND {$visitor.user_id}))">
                        <xen:if hascontent="true">
                            <dl class="pairsJustified userField_{$fieldId}">
                                <dt>{xen:helper userFieldTitle, $fieldId}:</dt>
                                <dd><xen:contentcheck>{xen:helper userFieldValue, $fieldInfo, $user, {$user.customFields.{$fieldId}}}</xen:contentcheck></dd>
                            </dl>
                        </xen:if>
                    </xen:if>
                </xen:foreach>
               
            </xen:hook>
            </xen:if>
            </xen:contentcheck>
        </div>
    </xen:if>
       
</xen:if>

    <span class="arrow"><span></span></span>
</div>
</div>
 
Позитивный голос 0 Негативный голос
Skaiman написал(а):
Выполнено?
Нажмите для раскрытия...
А, из-за этого, сейчас пересмотрю. А в плане своих картинок подключение? Что если вшить это:

Код: 
<span style="float: left; margin-left: 20px;">
                <img src="адрес картинки" width="32px" height="32px">
И по аналогии на правую сторону.
 
Позитивный голос 0 Негативный голос
MrBurn написал(а):
Что если вшить это
Нажмите для раскрытия...
Вшей :) но что дал под шрифт, а под картинки все по другому будет уже :) и зачем они нужны то, что вы цепляетесь за них, шрифт легче и практичнее, век картинок проходит, шрифты, вектор сейчас :)
 
Позитивный голос 0 Негативный голос
Skaiman написал(а):
Вшей :-) но что дал под шрифт, а под картинки все по другому будет уже :-) и зачем они нужны то, что вы цепляетесь за них, шрифт легче и практичнее, век картинок проходит, шрифты, вектор сейчас :-)
Нажмите для раскрытия...
Ну картинки смотрятся красочней, это как по мне. Более интересный вариант получается.
 
Позитивный голос 0 Негативный голос
MrBurn написал(а):
Ну картинки смотрятся красочней, это как по мне. Более интересный вариант получается.
Нажмите для раскрытия...
Спорный вопрос, конечно, ну так вшивай, я ж сказал или тебе надо готовое решение, мне не интересно с картинками, значит и не буду делать :)

К стати у меня есть шрифт с цветными иконками, гененрировал, но там код длинный получается :) но как бы не страшно можно вставлять.
 

Вложения

  • flat-color.zip
    1.5 MB · Просмотры: 5
Позитивный голос 0 Негативный голос
Skaiman написал(а):
Спорный вопрос, конечно, ну так вшивай, я ж сказал или тебе надо готовое решение, мне не интересно с картинками, значит и не буду делать :-)
Нажмите для раскрытия...
Вот такой вариант получился.
 

Вложения

  • ser.jpg
    ser.jpg
    11.1 KB · Просмотры: 30
Позитивный голос 0 Негативный голос
Статус
В этой теме нельзя размещать новые ответы.
Современный облачный хостинг провайдер | Aéza
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4

Похожие темы

FaireMan
  • Вопрос
XenForo 2.x.x Аддон главной страницы
Ответы
1
Просмотры
152
dimka1510
dimka1510
W
  • Вопрос
XF 2.2 Обновление и перестроение счетчиков и кэшей извне
Ответы
1
Просмотры
339
Atikin
Atikin
LordGusli
  • Вопрос
XF 2.2 Ежедневные посещения форума
Ответы
3
Просмотры
325
MrFallen
MrFallen
Diter
  • Вопрос
XF 2.1 Уведомления об ограниченных правах
Ответы
6
Просмотры
438
VGK
V
By Qweron
  • Закрыта
  • Решено
Спрятать IP сервера от пользователей
Ответы
7
Просмотры
918
By Qweron
By Qweron
Назад
Сверху Снизу