Инструкция Скрытие информации о пользователе под аватаром с CSS эффектом

SOUL

АдминкА
Администратор
Сообщения
7.695
Симпатии
10.887
Баллы
266
#1
Можно скачать аддон, или сделать всё вручную, добавив в шаблон EXTRA.css
Код:
.messageUserBlock .extraUserInfo
{
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.messageUserInfo:hover .extraUserInfo
{
    opacity: 1;
    max-height: 300px;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
    html .messageUserBlock .extraUserInfo
    {
        opacity: 1;
        height: auto;
        transition: none;
    }
    .messageUserInfo:hover .extraUserInfo
    {
        height: auto;
    }

}
</xen:if>

Вот, что должно получиться:

скрытие инфы о юзере.gif
 

Вложения

witcherivan

Местный
Сообщения
152
Симпатии
132
Баллы
43
#2
Активация данного css эффекта:
  • Внешний вид - Стили - Default Style (либо ваш стиль) - Группы настроек стиля - Элементы сообщений
Screenshot_10.png
  • Отображать дополнительные поля
Screenshot_11.png
 

DoW

Местный
Сообщения
296
Симпатии
83
Баллы
28
#3
Можно еще сделать для определённого пользователя
Код:
.message[data-author="Ник юзера"] .messageUserBlock a.username {color: rgba(216, 216, 216, 0.7); text-shadow: #B71C1C 0px 0px 3px;}
.message[data-author="Ник юзера"] .messageUserBlock .extraUserInfo
{
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.message[data-author="Ник юзера"] .messageUserInfo:hover .extraUserInfo
{
    opacity: 1;
    max-height: 300px;
}
Можно вообще скрыть что бы информация не появлялась для определенного пользователя, этим кодом
Код:
.message[data-author="Ник юзера"] .messageUserBlock a.username {color: rgba(216, 216, 216, 0.7); text-shadow: #B71C1C 0px 0px 3px;}
.message[data-author="Ник юзера"] .messageUserBlock .extraUserInfo
{
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}
.message[data-author="Ник юзера"] .messageUserInfo:hover .extraUserInfo
{
    opacity: 1;
}

.tagList, .tagList li {
    display: inline;
    }
    .tagBlock {
    margin: 10px 0;
    font-size: 11px;
}
.message[data-author="Ник юзера."] .messageUserInfo:hover .extraUserInfo
{
    opacity: 1;
    max-height: 300px;
}
 

DoW

Местный
Сообщения
296
Симпатии
83
Баллы
28
#4
А как вот так скрыть? Только для меня?
Что бы было только статус и иконки

Помираю уже ждать
 

Вложения

Последнее редактирование модератором:

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
6.205
Симпатии
6.028
Баллы
266
#5
Ну ты же нашел для определенного пользователя отображение, так и скрой для определенного пользователя display: none
 

DoW

Местный
Сообщения
296
Симпатии
83
Баллы
28
#6
Skaiman, ТАк мне нужно что бы статус в сети и иконки
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
6.205
Симпатии
6.028
Баллы
266
#7
А как вот так скрыть? Только для меня?
А это не твой вопрос? Если будете тыкать отрицательный рейтинг когда попало, приму меры, думай головой кому тыкаешь. Не мни себе, что кто то тебе чего то должен.
Иконки добавляются через дополнительные поля.
Статус с помощью условий и css
Код:
<xen:if is="{$user.isOnline}">
    В сети
<xen:else />
    Вне сети
</xen:if>
 

DoW

Местный
Сообщения
296
Симпатии
83
Баллы
28
#8
А это не твой вопрос? Если будете тыкать отрицательный рейтинг когда попало, приму меры, думай головой кому тыкаешь. Не мни себе, что кто то тебе чего то должен.
Иконки добавляются через дополнительные поля.
Так иконки у меня есть, нужно сделать что бы был только статус и иконки
Прости если что

Вот сделал что бы только статус
Код:
.message[data-author="*"] .messageUserBlock a.username {color: rgba(216, 216, 216, 0.7); text-shadow: #B71C1C 0px 0px 3px;}
.message[data-author="*"] .messageUserBlock .extraUserInfo
{
    opacity: 1;
    max-height: 31px;
      overflow: hidden;
    transition: all 0.5s ease-in-out;
}

.message[data-author="*"] .messageUserInfo:hover .extraUserInfo
{
    opacity: 1;
    max-height: 31px;
}
Как иконки выводить, вопрос остался
 
Последнее редактирование модератором:

†††

Проверенный
Сообщения
43
Симпатии
45
Баллы
13
#11
1520857956477.png
подскажите что за адон выводит инфо при наведении на аватар?
 
Вверх Снизу