• Главная
  • uCoz
  • Как выделить непрочитанные личные сообщения ?
Как выделить непрочитанные личные сообщения ?

Как выделить непрочитанные личные сообщения ?

О чем материал ?

Имея общение с пользователями на своем личном сайте вы работаете с модулем пользователи посредство функции общения через "Личные сообщения", когда приходит новое сообщение и оно не прочитанное, название выделяется жирным шрифтом. Согласитесь, что этого недостаточно для визуального понимания, что сообщение новое

Сегодня мы вам постараемся предложить простое решение, которое добавит для ваших ЛС больше визуального понимания в работе с новыми сообщениями.

Как выделить непрочитанное сообщение в ЛС uCoz ?

Делается это достаточно просто, достаточно в таблицу стилей прописать следующие стили:

.unread {border-bottom:1px dashed red;}
.unread:before {margin: 3px;width: 8px;height: 8px;float: left;position: relative;top: 3px;content: "";background: red;border-radius: 10px;}

этими стилями мы перед непрочитанным сообщением добавим круглую отметку красного цвета и само название непрочитанного сообщения подчеркнем красной пунктирной линией.

Как перед непрочтенным сообщением добавить свою иконку ?

Для добавления иконки, вы вместо стилей с примера выше можете использовать например такое решение:

.unread:before {width: 24px;height: 24px;float: left;position: relative;top: -2px;content: "";background:url('/File/mail-unread.png')no-repeat;}

здесь используется иконка конвертик размерами 24х24 которая напротив непрочитанного сообщения даст явно понятие, что сообщение нужно открыть и прочесть.

Примечание

Вы конечно же можете использовать свою иконку с своими размерами, не стоит переусердствовать с размерами, выбирайте иконку 16х16 или 24х24 не более.

Эти два решения все же будет лучше чем вообще не выделять. Если вам понравится данное решение или вы используете свое, поделитесь в комментариях к материалу.

Когда будете использовать свою иконку не забывайте изменить ссылку на свое изображение и изменить ширину и высоту в примере стилей 24х24 на ваши размеры.

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Похожие материалы:
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек