Стилизуем информацию под аватаром

[Skaiman]

Пользователь Skaiman разместил новый ресурс:

Стилизуем информацию под аватаром - Стили CSS в Message User Info.

За все, что находиться ниже баннеров "Команда форума" и тому подобное, отвечает класс CSS, extraUserInfo.
Для начала сделаем для него, например бордюр. Для этого в EXTRA.css зададим стиль:

.extraUserInfo {
   border: 1px solid #5c9911;
   border-radius: 3px;
}

Цвет бордюра можно взять из "Цветовой палитры" настраиваемого стиля. Для своего примера я взял @secondaryLight. Значит #5c9911 можно заменить на...

Узнать больше об этом ресурсе...

 

[NulledFL]

Wow!! Huge collection mate! :)

Do you know how to do this mouse-effect and put fontawesome icons there?

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

 

[Георгий Шевченко]

Wow!! Huge collection mate! :-)

Do you know how to do this mouse-effect and put fontawesome icons there?

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

Посмотреть вложение 19918

http://xenforo.info/resources/extrauserinfo-font-awesome.2255/

 

[NulledFL]

[QUOTE = "George Shevchenko, post: 48448, member: 3040"] http://xenforo.info/resources/extrauserinfo-font-awesome.2255/ [/ QUOTE]
Спасибо. Теперь попробуйте копать, что зависания эффект. :)

 

[Георгий Шевченко]

[QUOTE = "George Shevchenko, post: 48448, member: 3040"] http://xenforo.info/resources/extrauserinfo-font-awesome.2255/ [/ QUOTE]
Спасибо. Теперь попробуйте копать, что зависания эффект. :-)

Примерная логика на CSS

.messageUserBlock {
display: block;
}

.extraUserInfo {
  display: none;
}

.messageUserBlock:hover > .extraUserInfo {
display: block;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

А вот кстати , похожая анимация.
http://xenforo.info/threads/flat-awesome.5864/page-2#post-47969

 

[NulledFL]

Примерная логика на CSS

.messageUserBlock {
display: block;
}

.extraUserInfo {
  display: none;
}

.messageUserBlock:hover > .extraUserInfo {
display: block;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

А вот кстати , похожая анимация.
http://xenforo.info/threads/flat-awesome.5864/page-2#post-47969

Trying to put some transition effect. I mean sliding on/off effect.

 

[Time]

Как сделать точки как у вас?

 

[Hope]

https://xenforo.info/resources/Добавляем-иконки-в-информацию-о-пользователе.411/

 

[Time]

Я имел виду не иконки а полоска из точек

 

[Hope]

https://xenforo.info/threads/Вывод-инфы-под-аватаром-в-сообщениях.878/#post-3252

 

[Time]

Его пробовал в итоге только цвет рамки меняется


/* Добавляем точечные линии в информацию под аватаром */
dl.pairsJustified {
border-bottom: dotted 2px #d7edfc;
}
/* Добавляем точечные линии в информацию под аватаром */

 

[Skaiman]

Добавляем точечные линии в информацию под аватаром

Название класс :), border-bottom он и есть border-bottom, еще можно штришковые линии добавить

 

[Time]

еще можно штришковые линии добавить

Как? хочу сравнить

 

[Skaiman]

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

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