1. Не видишь хайд? скачивай через альтернативную ссылку. Жми на кнопку Download

  2.  Для того, что бы скачивать материал на сайте без ограничений, вы можете приобрести группу Premium. Подробнее здесь (кликабельно) Либо нажать на кнопку "Download"

  3. На нашем форуме большой выбор по обучающим курсам,монуалам,по заработку и продвижению сайтов! Спешите зарегистрироваться! И вы узнаете для себя огромный навык по заработку в интернете!
    Скрыть объявление

Для полноценного доступа к сайту, 

и получения всех  преимуществ,

рекомендуем  Зарегистрироваться 

Эффект для аватара

Тема в разделе "Настройки XenForo", создана пользователем admin, 4 янв 2018.

Scriptvip -магазин скриптов Инфо-продукты Детский врач-Друг семьи
  1. adminAdministrator

    admin

    Команда форума

    Статус:
    Не в сети
    Country:
    Russian Federation
    Регистрация:
    01.01.2018
    Сообщения:
    1.303
    Симпатии:
    2

    В шаблон message_user_info
    заменить все содержимое на:
    Код:
    <xen:require css="message_user_info.css" />
    
    <div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">   
    <div class="messageUserBlock">
        <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
    
                        <div class="imgholder">
                    <div class="outer1 circle"></div>
                    <div class="outer2 circle"></div>
                    <figure>
                    <figcaption class="caption"><xen:username user="$user" itemprop="name" rich="true" /></figcaption>
                    </figure>
                <xen:avatar user="$user" size="m" img="true" />
                <figcaption class="caption">
                            <!-- slot: message_user_info_text -->
                            </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:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user, 1, 1}</xen:contentcheck></em></xen:if>
                {xen:helper userBanner, $user, 'wrapped'}
                <!-- slot: message_user_info_text -->
            </h3>
        </xen:hook>
          
        <xen:if hascontent="true">
            <div class="extraUserInfo">
                <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}</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}">
    В EXTRA.CSS добавить:
    Код:
    /*FX effect avatar Body */
    .imgholder {
    
        height: 81px;
        margin: 44px 30px;
    
    }
    
    
    /* thumbnails style */
    .imgholder img{
        position:absolute;
        left:0;
        top:0;
        width:120px;
        height:120px;
        z-index:5;
        border-radius:100px;
        -moz-border-radius:100px;
        -webkit-border-radius:100px;
        opacity:0.3;
        filter: alpha(opacity = 30);
        box-shadow:0 0 5px #000;
        -moz-box-shadow:0 0 5px #000;
        -webkit-box-shadow:0 0 5px #000;
     
        transform: scale(0.5,0.5);
        -ms-transform: scale(0.5,0.5);
        -moz-transform: scale(0.5,0.5);
        -webkit-transform: scale(0.5,0.5);
     
        transition:
            opacity 1s,
            transform 1s ease-in-out 0.3s;
        -moz-transition:
            opacity 1s,
            -moz-transform 1s ease-in-out 0.3s;
        -webkit-transition:
            opacity 1s,
            -webkit-transform 1s ease-in-out 0.3s;
    }
    .imgholder:hover img{
        opacity:1;
        filter: alpha(opacity = 100);
        transform: scale(1,1);
        -ms-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -webkit-transform: scale(1,1);
    }
    
    .imgholder figcaption{
        position:absolute;
        left:48px;
        top:40%;
        width:185px;
        color:#004E87;
        font-weight:bold;
        text-shadow:-1px -1px 0 #fff;
        z-index:4;
     
        transition:
            top 0.5s ease-out;
        -moz-transition:
            top 0.5s ease-out;
        -webkit-transition:
            top 0.5s ease-out;
    }
    .imgholder:hover figcaption{
        top:20%;
    }
    /* decorations style */
    .imgholder .circle{
        position:absolute;
        border-radius:100px;
        -moz-border-radius:100px;
        -webkit-border-radius:100px;
    }
    .imgholder .outer1{
        top:-8px;
        left:-8px;
        width:120px;
        height:120px;
        z-index:2;
     
        border:8px solid;
        border-color:#DEEBFC;
        box-shadow:0 0 3px #AFD3FF;
        -moz-ox-shadow:0 0 3px #AFD3FF;
        -webkit-box-shadow:0 0 3px #AFD3FF;
     
        background: #ffffff;
        background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
        background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
        background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
        background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
        background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
     
        transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
     
        transition:
            transform 1.8s ease-in-out,
            box-shadow 1s ease-out,
            border-color 1.5s;
        -moz-transition:
            -moz-transform 1.8s ease-in-out,
            -moz-box-shadow 1s ease-out,
            border-color 1.5s;
        -webkit-transition:
            -webkit-transform 1.8s ease-in-out,
            -webkit-box-shadow 1s ease-out,
            border-color 1.5s;
    }
    .imgholder:hover .outer1{
        border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
        box-shadow:0 0 10px #0285E2;
        -moz-box-shadow:0 0 10px #0285E2;
        -webkit-box-shadow:0 0 10px #0285E2;
        transform:rotate(-10deg);
        -ms-transform:rotate(-10deg);
        -moz-transform:rotate(-10deg);
        -webkit-transform:rotate(-10deg);
    }
                  
                  
                  
    .imgholder .outer2{
        top:-18px;
        left:-18px;
        width:136px;
        height:136px;
        z-index:1;
     
        border:10px solid;
        border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
        box-shadow:0 0 20px #8EB9FF;
        -moz-box-shadow:0 0 20px #8EB9FF;
        -webkit-box-shadow:0 0 20px #8EB9FF;
        opacity:0;
        filter: alpha(opacity = 0);
     
        transform: scale(1.3,1.3) rotate(180deg);
        -ms-transform: scale(1.3,1.3) rotate(180deg);
        -moz-transform: scale(1.3,1.3) rotate(180deg);
        -webkit-transform: scale(1.3,1.3) rotate(180deg);
          
        transition:
            opacity 0.5s,
            transform 0.7s ease-out;
        -moz-transition:
            opacity 0.5s,
            -moz-transform 0.7s ease-out;
        -webkit-transition:
            opacity 0.5s,
            -webkit-transform 0.7s ease-out;
    }               
                                  
    .imgholder:hover .outer2{
        opacity:0.9;
        filter: alpha(opacity = 90);
        transform: scale(1,1) rotate(-10deg);
        -ms-transform: scale(1,1) rotate(-10deg);
        -moz-transform: scale(1,1) rotate(-10deg);
        -webkit-transform: scale(1,1) rotate(-10deg);
    }
    
     
    
    .imgholder figcaption {
        color: #004E87;
        font-weight: bold;
        left: 7px;
        position: absolute;
        text-shadow: 0 0 0 rgba(0, 0, 0, 0), -1px -1px 0 #FFFFFF;
        top: 153px;
        transition: top 0.5s ease-out 0s;
        width: 185px;
        z-index: 4;
    }
    
    /*FX effect avatar Body */
    [code-help.ru]image.gif