Не так давно на форумах был запущен новый сервис «Уведомления», однако уже сейчас у многих пользователей возникают вопросы по оформлению/переоформлению его составных частей на своих проектах. Что и понятно, у все свои уникальные представления.
Поэтому в данной теме мы попытаемся собрать всю полезную информацию касающуюся данной темы, которая напрямую зависит от задаваемых вами вопросов. Поэтому не стесняйтесь 
CSS
Контейнер для всплывающей формы
.notify-message - регулируем ширину, внутренние отступы, цвет контейнера и т.д.
Группа специальных классов для различных видов сообщений (цветной бордер слева)
.jg-mention {border-left: 12px solid #0076ff;} - ответ в теме
.jg-message {border-left: 12px solid #a2f53b;} - личное сообщение
Заголовок всплывающего сообщения:
.notify-message .jGrowl-header - регулируем цвет шрифта, размер, начертание
Регулирование цвета/размера текста внутри сообщения:
.notify-message .jGrowl-message a,
.notify-message .jGrowl-message a:hover {color: #fff !important;} - цвет, шрифт и т.д.
Кнопка закрытия контейнера уведомления:
.notify-message .jGrowl-close {background: #333; color: #ccc;}
.notify-message .jGrowl-close:hover {color: #fff; background: #444;}
Большинство из стилевых свойств рекомендую задавать с аргументом !important;
HTML
В целом блок в html выглядит так:
<div class="notify-message jg-mention" style="display: block;">
<div class="jGrowl-close">x</div>
<div class="jGrowl-header">Заголовок</div>
<div class="jGrowl-message">
<a href="#" title="Просмотреть упоминание" class="n-content">
<img src="1376742017.png" alt="Аватар">
<span><strong>Duka</strong> ответил(а) вам в теме:</span>
<span>«Название темы»</span>
<span class="jGrowl-date"><strong>Сегодня</strong>, в 12:40</span>
</a>
</div>
</div>
Где выделенное жирным является динамическим классом.
НАГЛЯДНО
Готовые примеры:
CSS-код
<style type="text/css">
.notify-message {background: #fff !important; color: #000 !important; opacity: 0.9 !important; box-shadow: 0 0 30px #888;}
.notify-message .jGrowl-message a, .notify-message .jGrowl-message a:hover {color: #000 !important;}
.jGrowl-close {background: #eee !important; color: #000 !important;}
.jGrowl-close:hover {color: #777 !important; background: #f1f1f1 !important;}
.jGrowl-date {border-top: 1px solid #ccc !important;}
</style>
Результат:
Теги: оформление уведомлений, изменить оформление, css уведомлений, дизайн уведомлений,Уведомления на форумах
