Оформление "Уведомления"

Сообщений 1 страница 3 из 3

Поделиться12014-08-09 13:05:55

Автор: Irinalune
Администратор
Картинко:
Личное звание:
name: Дара
age: 17 лет
from: Хаос
status: Королева Хаоса
анкета:

Chronicl | Relations
Сообщений: 212
Уважение: [+0/-0]
Типа что-то: Какая-то хрень

Контейнер для всплывающей формы

.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;} - цвет, шрифт и т.д.

Большинство из стилевых свойств рекомендую задавать с аргументом !important;

Поделиться22014-08-09 13:06:55

Автор: Irinalune
Администратор
Картинко:
Личное звание:
name: Дара
age: 17 лет
from: Хаос
status: Королева Хаоса
анкета:

Chronicl | Relations
Сообщений: 212
Уважение: [+0/-0]
Типа что-то: Какая-то хрень

В целом блок в html выглядит так:

Код:

<div class="notify-message [b]jg-mention[/b]" 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>

Где выделенное жирным является динамическим классом.

Поделиться32014-08-09 13:07:36

Автор: Irinalune
Администратор
Картинко:
Личное звание:
name: Дара
age: 17 лет
from: Хаос
status: Королева Хаоса
анкета:

Chronicl | Relations
Сообщений: 212
Уважение: [+0/-0]
Типа что-то: Какая-то хрень

Готовые примеры:
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>

тестовик

Меню навигации

Пользовательские ссылки

Информация о пользователе

Оформление "Уведомления"

Сообщений 1 страница 3 из 3

Поделиться12014-08-09 13:05:55

Поделиться22014-08-09 13:06:55

Поделиться32014-08-09 13:07:36

Добро пожаловать в Амбер! Вы мечтали путешествовать по другим мирам или даже создавать собственные, стать личным Богом далекого от реальности Отражения? Здесь для Вас нет ничего невозможного! Любая Ваша фантазия может осуществиться на данном проекте, ведь возможности мультивселенной Амбера практически безграничны! По всем вопросам обращаться к Корвину		05.09.2014 - открытие проекта. Спешите занять роли полюбившихся персонажей! Квест - бал в замке Амбер. Записаться может любой желающий в теме "Квесты: предложения, обсуждения, запись" 28.09.2014 - Начался квест "Датское королевство"! Не забываем тыкать на кнопочки топов!