Содержание
Имея общение с пользователями на своем личном сайте вы работаете с модулем пользователи посредство функции общения через "Личные сообщения", когда приходит новое сообщение и оно не прочитанное, название выделяется жирным шрифтом. Согласитесь, что этого недостаточно для визуального понимания, что сообщение новое
Сегодня мы вам постараемся предложить простое решение, которое добавит для ваших ЛС больше визуального понимания в работе с новыми сообщениями.
Делается это достаточно просто, достаточно в таблицу стилей прописать следующие стили:
.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
Автор: Юрий Герук
Благодарность автору!Здравствуй Гость, как Вы видите еще никто не оставил свой комментарий, будьте первым, поделитесь мнением о материале выше.
Здравствуй Гость, комментарии могут оставлять только зарегистрированные пользователи, зарегистрируйтесь и поделитесь мнением о материале выше Регистрация или Войти.