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

  • Автор темы SOUL
  • Дата создания

SOUL

Создатель
Сообщения
7 883
Репутация
11 113
Баллы
266
Можно скачать аддон, или сделать всё вручную, добавив в шаблон 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

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

DoW

Местный
Сообщения
296
Репутация
83
Баллы
28
Можно еще сделать для определённого пользователя
Код:
.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;
}
 
Реакции: SOUL

DoW

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

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

Вложения

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

Skaiman

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

DoW

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

Skaiman

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

DoW

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

Вот сделал что бы только статус
Код:
.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
Репутация
47
Баллы
13
1520857956477.png
подскажите что за адон выводит инфо при наведении на аватар?
 
Сверху Снизу