Мануал 2.x Всплывающий контент при наведении на аватар

[23808]

Для начала идём делать модификацию шаблона message_macros
Ищем

<xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />

Если вы уже меняли размер аватаров здесь, тогда замените m на значение которое у вас стоит.
Заменяем на

<xf:if is="{{ $__globals.post.message_state == 'deleted' }}">
                    <xf:avatar user="$user" size="l" defaultname="{$fallbackName}" itemprop="image" />
                    <xf:else />
                <div class="holder">
                    <xf:avatar user="$user" size="l" defaultname="{$fallbackName}" itemprop="image" />
                    <div class="blockmsg">
                <a href="{{ link('members', $user) }}" target="_blank">Открыть профиль</a></div>
                </div>
                    </xf:if>

Немного разберёмся

<xf:if is="{{ $__globals.post.message_state == 'deleted' }}">

Нужен для того, чтоб контент не всплывал на удалённых сообщениях.

 <div class="holder">

                    <xf:avatar user="$user" size="l" defaultname="{$fallbackName}" itemprop="image" />

                    <div class="blockmsg">

                <a href="{{ link('members', $user) }}" target="_blank">Открыть профиль</a></div>

                </div>

<div class="holder"> div в котором будет наш аватар и контент, который будет всплывать, у меня это ссылка на открытие профиля пользователя, вы же можете всунуть туда что душе угодно.

Теперь нужно добавить это в екстру.

.holder {
    position: relative;
    overflow: hidden;
}
.holder:hover .blockmsg {
    bottom: 0;
    opacity: 1;
}
.blockmsg {
    position: absolute;
    left: 0;
    bottom: -50px;
    right: 0;
    background: linear-gradient(to top, black 0%, transparent 100%);
    padding: 5px;
    height: 40px;
    transition: .5s;
    opacity: 0;
}
.blockmsg a {
    color: white;
}
.blockmsg a:hover {
    text-decoration: none;
}

Ну и наконец, в настройках стиля - сообщения
изменить ширину блока информации о пользователе на 192px.

Вот что получиться в итоге

 

[ratagag]

Спасибо

 

[Goldcs]

Коуто

 

[makarov]

годно

 

[howtomw]

Спасибо