XF 1.4 Как сделать такое оформление

[Alexander228]

Как реализовать такое красивое оформление?

 

[unconfirmed]

Как реализовать такое красивое оформление?

.просмотр кода элемента?

 

[DEVIL]

Первым делом идём в Настройки стиля > Элементы сообщений, отмечаем такие галочки:

Далее идём в модификации шаблонов и создаём их.
Шаблон user_banners.css
Заменяешь всё содержимое на

    .userBanner.wrapped
    {
        border-top-right-radius: 1;
        border-top-left-radius: 1;
        position: relative;
 
    }
 
        .userBanner.wrapped span
        {
            position: absolute;
            top: -4px;
            width: 5px;
            height: 4px;
            background-color: inherit;
            display: none;
        }
 
        .userBanner.wrapped span.before
        {
            border-top-left-radius: 3px;
            left: -1px;
        }
 
        .userBanner.wrapped span.after
        {
            border-top-right-radius: 3px;
            right: -1px;
        }
 
.userBanner.bannerHidden { background: none; box-shadow: none; border: none; }
.userBanner.bannerHidden.wrapped { margin-left: 0; margin-right: 0; }
.userBanner.bannerHidden.wrapped span { display: none; }

.userBanner.bannerStaff {
    font-size: 12px;
    text-shadow: 0 0 7px;
    color: white;
    background: rgb(152, 16, 37) url(/bgred.gif);
    padding: 5px;
}
.userBanner.bannerStaff:before {
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -8px;
    left: -10px;
    content: "";
    border-bottom: 8px solid transparent;
    border-right: 8px solid rgb(119, 5, 22);
}
.userBanner.bannerStaff:after {
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -8px;
    right: -10px;
    content: "";
    border-bottom: 8px solid transparent;
    border-left: 8px solid rgb(119, 5, 22);
}

.userBanner.bannerStaff.wrapped span {  }

.userBanner.bannerPrimary { color: rgb(35, 168, 109); background-color: rgb(32, 32, 32); border-color: rgb(71, 97, 117); }
.userBanner.bannerPrimary.wrapped span { background-color: rgb(71, 97, 117); }

.userBanner.bannerSecondary { color: #8f6c3f; background-color: #f9d9b0; border-color: #f9d9b0; }
.userBanner.bannerSecondary.wrapped span { background-color: #f9d9b0; }

.userBanner.bannerRed        { color: white; background-color: red; border-color: #F88; }
.userBanner.bannerRed.wrapped span { background-color: #F88; }

.userBanner.bannerGreen      {      background: #12470D; border-color: #12470D;  font-size: 13px; font-style: inherit;
    font-weight: inherit;}
.userBanner.bannerGreen.wrapped span { background-color: green; }

.userBanner.bannerOlive      { color: black; background-color: olive; border-color: olive; }
.userBanner.bannerOlive.wrapped span { background-color: olive; }

.userBanner.bannerLightGreen { background: rgb(46, 162, 74); border-color: rgb(46, 162, 74); }
.userBanner.bannerLightGreen.wrapped span { background-color: lightgreen; }

.userBanner.bannerBlue       {background-color: #FF1493;
    font-size: 12px; }
.userBanner.bannerBlue.wrapped span { background-color: #88F; }

.userBanner.bannerRoyalBlue  { color: white; background-color: royalblue; border-color: #81A9E1;  }
.userBanner.bannerRoyalBlue.wrapped span { background-color: #81A9E1; }

.userBanner.bannerSkyBlue    { color: black; background-color: skyblue; border-color: skyblue; }
.userBanner.bannerSkyBlue.wrapped span { background-color: skyblue; }

.userBanner.bannerGray       { color: black; background-color: gray; border-color: #AAA; }
.userBanner.bannerGray.wrapped span { background-color: #AAA; }

.userBanner.bannerSilver     { color: black; background-color: silver; border-color: silver; }
.userBanner.bannerSilver.wrapped span { background-color: silver; }

.userBanner.bannerYellow     { color: black; background-color: yellow; border-color: #E0E000; }
.userBanner.bannerYellow.wrapped span { background-color: #E0E000; }

.userBanner.bannerOrange     { color: black; background-color: orange; border-color: #FFC520; }
.userBanner.bannerOrange.wrapped span { background-color: #FFC520; }

Далее куда-либо загружаем
В моём случае это сайт.ру/bgred.gif , если зальёте куда-нибудь в другое место, в этой строке url(/bgred.gif); замените на нужный путь.

Шаблон message_user_info

Спойлер

<xen:require css="message_user_info.css" />



<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
<div class="messageUserBlock">
<div id="ts_overlay">
<xen:if is="{$thread.user_id} == {$user.user_id}">


</xen:if>

</div>
    <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
    <h3 class="userText">
  
    <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">

     <xen:username user="$user" itemprop="name" rich="true" />
<xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 2, 2}</xen:contentcheck></em></xen:if>
 
            <!-- slot: message_user_info_text -->

        </h3>
    </xen:hook>
        <div class="avatarHolder">

            <span class="helper"></span>
            <xen:avatar user="$user" size="l" img="true" class="Ava150"/>
  
    <div class="pff2"> <div class="pff"></div></div>

    </div>

    </xen:hook>


<xen:if is="!{$isQuickReply}">
        <div class="extraUserInfo"><xen:if hascontent="true">
            <xen:contentcheck>
  
                 <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
 
        <h3 class="userText">
            {xen:helper userBanner, $user, 'wrapped'}
            <!-- slot: message_user_info_text -->
        </h3></dl>
    
                </dl>

                 <xen:if is="!in_array({$user.user_id}, array(1, 300, 7130, 38, 2393, 2922, 170))">
                <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">
                        <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>
                <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="@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}">
                        <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>
 
 
           <xen:include template="extraContactInfo" />
    </xen:if>
    </div>

</xen:if>
    </div>
</div>

Ну и шаблон message_user_info.css

Спойлер

.messageUserInfo
{
    float: left;
    display: table-cell;
    text-align: center;
    max-width: 172px;
    min-width: 172px;
    width: 172px;


}

    .messageUserBlock
    {
        -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
        text-align: center;
        @property "/messageUserBlock";
 
        position: relative;
    }
 

 
            .messageUserBlock div.avatarHolder .avatar
            {
                display: block;
                font-size: 0;
            }
 
 
        .messageUserBlock .userBanner
        {
   
            margin-bottom: 5px;
            display: block;
            padding: 5px 40px;
            width: 98%;
            margin-left: -38px;
            margin-right: 20px;
 
        }
 
        .messageUserBlock .userBanner:last-child
        {
            margin-bottom: 0;
 
    font-size: 13px;
        }
 
        .messageUserBlock a.username
        {
            @property "messageUsername";
            font-size: 16px;
            font-weight: normal;
            overflow: hidden;
            text-align: center;
            @property "/messageUsername";
            display: inline-block;

 
        }
 
.messageUserBlock .userTitle {
    font-size: 12px;
    color: rgb(156, 156, 156);
    margin-bottom: 5px;
    display: block;
font-family: Verdana;
}
 
.messageUserBlock .extraUserInfo {
    font-size: 12px;
    margin: 15px;
    z-index: 6;
}
 
 
 
.messageUserBlock .extraUserInfo dl {
margin: 2px 0 0;
background: #101010;

}
               
            .messageUserBlock .extraUserInfo img
            {
                max-width: 100%;
            }
 
        .messageUserBlock .arrow
        {
            position: absolute;
            top: 10px;
            right: -10px;
 
            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;
 
            border: 10px solid transparent;
            border-left-color: rgb(57, 57, 57);
            -moz-border-left-colors: rgb(57, 57, 57);
            border-right: none;
 
            /* Hide from IE6 */
            _display: none;
        }
 
            .messageUserBlock .arrow span
            {
                position: absolute;
                top: -10px;
                left: -11px;
   
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
   
                border: 10px solid transparent;
                border-left-color: rgb(30, 31, 32);
                -moz-border-left-colors: rgb(30, 31, 32);
                border-right: none;
            }


@media (max-width:480px)
{
    .Responsive .messageUserInfo
    {
        float: none;
        width: auto;
    }

    .Responsive .messageUserBlock
    {
        overflow: hidden;
        margin-bottom: 5px;
        position: relative;
    }

    .Responsive .messageUserBlock div.avatarHolder
    {
        float: left;
        padding: 5px;
    }

        .Responsive .messageUserBlock div.avatarHolder .avatar img
        {
            width: 48px;
            height: 48px;
        }

    .Responsive .messageUserBlock h3.userText
    {
        margin-left: 64px;
    }
 
    .Responsive .messageUserBlock .userBanner
    {
        max-width: 150px;
        margin-left: 0;
        margin-right: 0;
        -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-right-radius: 3px; border-top-right-radius: 3px;
        position: static;
        display: inline-block;
    }
 
        .Responsive .messageUserBlock .userBanner span
        {
            display: none;
        }

    .Responsive .messageUserBlock .extraUserInfo
    {
        display: none;
    }

    .Responsive .messageUserBlock .arrow
    {
        display: none;
    }
}
/* avatar section */
.Ava150 img {

width: 100%;
height: auto;
max-height: 250px;
}
div#ts_overlay {position:absolute;top:-22px;right:126px;z-index:99;}
.messageUserBlock h3.userText {
    margin: 15px;
    text-align: center;
}

После чего скачиваем [GX] Статус онлайн и оффлайн идём в Внешний вид > Настройки стиля > [GX] Статус онлайн и оффлайн > для оффлайн выставляем такой цвет -


Для ОНЛАЙН по такому же принципу - rgb(125, 125, 125)
Далее добавляем значок
Внешний вид > шаблоны > gx_status
<span id="Online_Status_GX">В сети</span>
Заменяем на:
<span id="Online_Status_GX"><i style="margin-right: 5px;" class="fa fa-desktop" aria-hidden="true"></i>В сети</span>
Также в шаблон EXTRA.css
Добавим следующий код:

.pairsJustified dt {
    color: rgb(234,234,234);
}
.pff2 {
    margin: -20px 0 0;
    background: #101010;
    margin-bottom: -3px;
    padding-top: 3px;
}
.pff {
    position: relative;
    padding: 1px 0 3px;
}

Ну и результат:

P.s., это всё на стиле Brivium - Zinc
Могут быть косяки и неровности, лишний код и прочее.
По поводу телеграма и прочего не вижу смысла писать, инструкции на xfi есть.

 

[unconfirmed]

Первым делом идём в Настройки стиля > Элементы сообщений, отмечаем такие галочки:
Посмотреть вложение 70720
Далее идём в модификации шаблонов и создаём их.
Шаблон user_banners.css
Заменяешь всё содержимое на

    .userBanner.wrapped
    {
        border-top-right-radius: 1;
        border-top-left-radius: 1;
        position: relative;
 
    }
 
        .userBanner.wrapped span
        {
            position: absolute;
            top: -4px;
            width: 5px;
            height: 4px;
            background-color: inherit;
            display: none;
        }
 
        .userBanner.wrapped span.before
        {
            border-top-left-radius: 3px;
            left: -1px;
        }
 
        .userBanner.wrapped span.after
        {
            border-top-right-radius: 3px;
            right: -1px;
        }
 
.userBanner.bannerHidden { background: none; box-shadow: none; border: none; }
.userBanner.bannerHidden.wrapped { margin-left: 0; margin-right: 0; }
.userBanner.bannerHidden.wrapped span { display: none; }

.userBanner.bannerStaff {
    font-size: 12px;
    text-shadow: 0 0 7px;
    color: white;
    background: rgb(152, 16, 37) url(/bgred.gif);
    padding: 5px;
}
.userBanner.bannerStaff:before {
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -8px;
    left: -10px;
    content: "";
    border-bottom: 8px solid transparent;
    border-right: 8px solid rgb(119, 5, 22);
}
.userBanner.bannerStaff:after {
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -8px;
    right: -10px;
    content: "";
    border-bottom: 8px solid transparent;
    border-left: 8px solid rgb(119, 5, 22);
}

.userBanner.bannerStaff.wrapped span {  }

.userBanner.bannerPrimary { color: rgb(35, 168, 109); background-color: rgb(32, 32, 32); border-color: rgb(71, 97, 117); }
.userBanner.bannerPrimary.wrapped span { background-color: rgb(71, 97, 117); }

.userBanner.bannerSecondary { color: #8f6c3f; background-color: #f9d9b0; border-color: #f9d9b0; }
.userBanner.bannerSecondary.wrapped span { background-color: #f9d9b0; }

.userBanner.bannerRed        { color: white; background-color: red; border-color: #F88; }
.userBanner.bannerRed.wrapped span { background-color: #F88; }

.userBanner.bannerGreen      {      background: #12470D; border-color: #12470D;  font-size: 13px; font-style: inherit;
    font-weight: inherit;}
.userBanner.bannerGreen.wrapped span { background-color: green; }

.userBanner.bannerOlive      { color: black; background-color: olive; border-color: olive; }
.userBanner.bannerOlive.wrapped span { background-color: olive; }

.userBanner.bannerLightGreen { background: rgb(46, 162, 74); border-color: rgb(46, 162, 74); }
.userBanner.bannerLightGreen.wrapped span { background-color: lightgreen; }

.userBanner.bannerBlue       {background-color: #FF1493;
    font-size: 12px; }
.userBanner.bannerBlue.wrapped span { background-color: #88F; }

.userBanner.bannerRoyalBlue  { color: white; background-color: royalblue; border-color: #81A9E1;  }
.userBanner.bannerRoyalBlue.wrapped span { background-color: #81A9E1; }

.userBanner.bannerSkyBlue    { color: black; background-color: skyblue; border-color: skyblue; }
.userBanner.bannerSkyBlue.wrapped span { background-color: skyblue; }

.userBanner.bannerGray       { color: black; background-color: gray; border-color: #AAA; }
.userBanner.bannerGray.wrapped span { background-color: #AAA; }

.userBanner.bannerSilver     { color: black; background-color: silver; border-color: silver; }
.userBanner.bannerSilver.wrapped span { background-color: silver; }

.userBanner.bannerYellow     { color: black; background-color: yellow; border-color: #E0E000; }
.userBanner.bannerYellow.wrapped span { background-color: #E0E000; }

.userBanner.bannerOrange     { color: black; background-color: orange; border-color: #FFC520; }
.userBanner.bannerOrange.wrapped span { background-color: #FFC520; }

Далее куда-либо загружаем Посмотреть вложение 70721
В моём случае это сайт.ру/bgred.gif , если зальёте куда-нибудь в другое место, в этой строке url(/bgred.gif); замените на нужный путь.

Шаблон message_user_info

Спойлер

<xen:require css="message_user_info.css" />



<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
<div class="messageUserBlock">
<div id="ts_overlay">
<xen:if is="{$thread.user_id} == {$user.user_id}">


</xen:if>

</div>
    <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
    <h3 class="userText">
 
    <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">

     <xen:username user="$user" itemprop="name" rich="true" />
<xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 2, 2}</xen:contentcheck></em></xen:if>
 
            <!-- slot: message_user_info_text -->

        </h3>
    </xen:hook>
        <div class="avatarHolder">

            <span class="helper"></span>
            <xen:avatar user="$user" size="l" img="true" class="Ava150"/>
 
    <div class="pff2"> <div class="pff"></div></div>

    </div>

    </xen:hook>


<xen:if is="!{$isQuickReply}">
        <div class="extraUserInfo"><xen:if hascontent="true">
            <xen:contentcheck>
 
                 <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
 
        <h3 class="userText">
            {xen:helper userBanner, $user, 'wrapped'}
            <!-- slot: message_user_info_text -->
        </h3></dl>
   
                </dl>

                 <xen:if is="!in_array({$user.user_id}, array(1, 300, 7130, 38, 2393, 2922, 170))">
                <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">
                        <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>
                <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="@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}">
                        <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>
 
 
           <xen:include template="extraContactInfo" />
    </xen:if>
    </div>

</xen:if>
    </div>
</div>

Ну и шаблон message_user_info.css

Спойлер

.messageUserInfo
{
    float: left;
    display: table-cell;
    text-align: center;
    max-width: 172px;
    min-width: 172px;
    width: 172px;


}

    .messageUserBlock
    {
        -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
        text-align: center;
        @property "/messageUserBlock";
 
        position: relative;
    }
 

 
            .messageUserBlock div.avatarHolder .avatar
            {
                display: block;
                font-size: 0;
            }
 
 
        .messageUserBlock .userBanner
        {
  
            margin-bottom: 5px;
            display: block;
            padding: 5px 40px;
            width: 98%;
            margin-left: -38px;
            margin-right: 20px;
 
        }
 
        .messageUserBlock .userBanner:last-child
        {
            margin-bottom: 0;
 
    font-size: 13px;
        }
 
        .messageUserBlock a.username
        {
            @property "messageUsername";
            font-size: 16px;
            font-weight: normal;
            overflow: hidden;
            text-align: center;
            @property "/messageUsername";
            display: inline-block;

 
        }
 
.messageUserBlock .userTitle {
    font-size: 12px;
    color: rgb(156, 156, 156);
    margin-bottom: 5px;
    display: block;
font-family: Verdana;
}
 
.messageUserBlock .extraUserInfo {
    font-size: 12px;
    margin: 15px;
    z-index: 6;
}
 
 
 
.messageUserBlock .extraUserInfo dl {
margin: 2px 0 0;
background: #101010;

}
              
            .messageUserBlock .extraUserInfo img
            {
                max-width: 100%;
            }
 
        .messageUserBlock .arrow
        {
            position: absolute;
            top: 10px;
            right: -10px;
 
            display: block;
            width: 0px;
            height: 0px;
            line-height: 0px;
 
            border: 10px solid transparent;
            border-left-color: rgb(57, 57, 57);
            -moz-border-left-colors: rgb(57, 57, 57);
            border-right: none;
 
            /* Hide from IE6 */
            _display: none;
        }
 
            .messageUserBlock .arrow span
            {
                position: absolute;
                top: -10px;
                left: -11px;
  
                display: block;
                width: 0px;
                height: 0px;
                line-height: 0px;
  
                border: 10px solid transparent;
                border-left-color: rgb(30, 31, 32);
                -moz-border-left-colors: rgb(30, 31, 32);
                border-right: none;
            }


@media (max-width:480px)
{
    .Responsive .messageUserInfo
    {
        float: none;
        width: auto;
    }

    .Responsive .messageUserBlock
    {
        overflow: hidden;
        margin-bottom: 5px;
        position: relative;
    }

    .Responsive .messageUserBlock div.avatarHolder
    {
        float: left;
        padding: 5px;
    }

        .Responsive .messageUserBlock div.avatarHolder .avatar img
        {
            width: 48px;
            height: 48px;
        }

    .Responsive .messageUserBlock h3.userText
    {
        margin-left: 64px;
    }
 
    .Responsive .messageUserBlock .userBanner
    {
        max-width: 150px;
        margin-left: 0;
        margin-right: 0;
        -webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-right-radius: 3px; border-top-right-radius: 3px;
        position: static;
        display: inline-block;
    }
 
        .Responsive .messageUserBlock .userBanner span
        {
            display: none;
        }

    .Responsive .messageUserBlock .extraUserInfo
    {
        display: none;
    }

    .Responsive .messageUserBlock .arrow
    {
        display: none;
    }
}
/* avatar section */
.Ava150 img {

width: 100%;
height: auto;
max-height: 250px;
}
div#ts_overlay {position:absolute;top:-22px;right:126px;z-index:99;}
.messageUserBlock h3.userText {
    margin: 15px;
    text-align: center;
}

После чего скачиваем [GX] Статус онлайн и оффлайн идём в Внешний вид > Настройки стиля > [GX] Статус онлайн и оффлайн > Посмотреть вложение 70722 для оффлайн выставляем такой цвет -

Посмотреть вложение 70723
Для ОНЛАЙН по такому же принципу - rgb(125, 125, 125)
Далее добавляем значок Посмотреть вложение 70724
Внешний вид > шаблоны > gx_status
<span id="Online_Status_GX">В сети</span>
Заменяем на:
<span id="Online_Status_GX"><i style="margin-right: 5px;" class="fa fa-desktop" aria-hidden="true"></i>В сети</span>
Также в шаблон EXTRA.css
Добавим следующий код:

.pairsJustified dt {
    color: rgb(234,234,234);
}
.pff2 {
    margin: -20px 0 0;
    background: #101010;
    margin-bottom: -3px;
    padding-top: 3px;
}
.pff {
    position: relative;
    padding: 1px 0 3px;
}

Ну и результат:
Посмотреть вложение 70725
P.s., это всё на стиле Brivium - Zinc
Могут быть косяки и неровности, лишний код и прочее.
По поводу телеграма и прочего не вижу смысла писать, инструкции на xfi есть.

.только Brivium - Silicon и немного иначе =)

 

[DEVIL]

Да, отличается, согласен, плюс у меня там бардак в шаблоне был.
И я имел в виду что результат на Zinc'e.

 

[Skaiman]

DEVIL, вот уже не первый раз замечаю, ты даешь оформление с сайта, автор которого здесь присутствует и может он не хочет со всеми подряд делиться своими наработками. По скриншоту было сразу видно от куда это и bingo_shark не стал делать описание, я понимаю, ты соображаешь как рипнуть и понимаешь что к чему и где, но не стремись быть впереди паровоза. Пойми это немного неэтично.

 

[Alexander228]

Да, отличается, согласен, плюс у меня там бардак в шаблоне был.
И я имел в виду что результат на Zinc'e.

на baisik сработает?

DEVIL, вот уже не первый раз замечаю, ты даешь оформление с сайта, автор которого здесь присутствует и может он не хочет со всеми подряд делиться своими наработками. По скриншоту было сразу видно от куда это и bingo_shark не стал делать описание, я понимаю, ты соображаешь как рипнуть и понимаешь что к чему и где, но не стремись быть впереди паровоза.

Нет, интересует только такое оформление блока с инфой, можно даже не именно таким, а что-то в этом роде

 

[Skaiman]

Нет, интересует только такое оформление блока с инфой, можно даже не именно таким, а что-то в этом роде

Что нет? Так то меня как раз и не интересует то, что интересует тебя, обращался я совсем не к тебе :)
А вот сработает или нет на стиле Baisik, зависит только от тебя :)

 

[Mirovinger]

DEVIL, вот уже не первый раз замечаю, ты даешь оформление с сайта, автор которого здесь присутствует и может он не хочет со всеми подряд делиться своими наработками. По скриншоту было сразу видно от куда это и bingo_shark не стал делать описание, я понимаю, ты соображаешь как рипнуть и понимаешь что к чему и где, но не стремись быть впереди паровоза. Пойми это немного неэтично.

Автор как бы намекнул, что не против, если отписал в манере, что F12 в помощь, а кто это будет делать, это уже не столько Важно. =)

 

[S3RG3Y]

Автор как бы намекнул, что не против, если отписал в манере, что F12 в помощь, а кто это будет делать, это уже не столько Важно. :-)

Уметь бы ещё f12 (Кодом элемента), пользоваться:1f3erg:

Далее добавляем значок
Внешний вид > шаблоны > gx_status
<span id="Online_Status_GX">В сети</span>
Заменяем на:
<span id="Online_Status_GX"><i style="margin-right: 5px;" class="fa fa-desktop" aria-hidden="true"></i>В сети</span>

Не работает в стандартном стиле.

 

[root]

Сделал все по инструкции,но вот информация чуть чуть корявая.

 

[unconfirmed]

LoudCode, .

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Skaiman]

Сделал все по инструкции,но вот информация чуть чуть корявая.

Информация может быть и не точная, но надо понимать, что там написано и уметь поправить, а вставлять, не знамо что, незнамо куда, в добавок куча правок которые взаимозаменяют друг друга. Учите, учтитесь и будет счастье!