Благодарим за выбор нашего сервиса!
Тестовое сообщение
Сообщений 1 страница 5 из 5
Поделиться22013-05-04 14:39:28
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo consequat mattis. Sed gravida, enim id auctor posuere, turpis sem aliquet libero, non rutrum ante risus quis neque. Maecenas molestie euismod volutpat. Suspendisse vel nisi luctus massa consectetur fermentum sit amet vel lorem. Maecenas molestie, neque ac tincidunt adipiscing, metus diam faucibus lorem, sit amet ultricies lacus ligula eu ante. Sed sed sem tellus, ac fringilla est. Ut sagittis massa rhoncus dolor feugiat a sagittis purus vulputate. Fusce sed metus nec tellus interdum tincidunt. Suspendisse scelerisque vestibulum dui et dignissim. Pellentesque sit amet risus tristique augue congue bibendum. Proin ultrices dui id sem laoreet sollicitudin. Praesent at nulla ut augue porttitor pretium quis ut lacus. Pellentesque at sapien nisl. Etiam dignissim, enim in porttitor posuere, odio est gravida lorem, at posuere ipsum sem vel enim.
In iaculis, dui quis tincidunt sagittis, nisi libero lacinia urna, eu posuere arcu ligula sed tortor. Nulla facilisi. Phasellus eget leo sem, quis convallis quam. Fusce viverra sollicitudin nisi non viverra. In hac habitasse platea dictumst. Sed lorem magna, faucibus et aliquam ac, fermentum at nulla. Morbi at quam id lorem suscipit tempor. Pellentesque ante ligula, mollis quis euismod vel, viverra vel turpis. Praesent sed ipsum diam, id bibendum risus. Integer iaculis hendrerit nulla, ut ornare turpis volutpat vitae. Pellentesque ac diam vitae massa ornare vehicula sodales at urna. Aenean gravida, nisi in consectetur ultrices, mauris tortor venenatis tellus, nec consequat magna enim in eros. Nullam id orci vel tortor ultrices fermentum ut quis lacus. Vestibulum quam sapien, consequat quis elementum sit amet, pulvinar at mi. Proin ultricies tortor ac dui iaculis a tincidunt lectus fringilla.
Etiam blandit diam turpis. Fusce lobortis consequat tortor ac fermentum. Fusce sollicitudin lacinia lectus non dapibus. Fusce ullamcorper viverra posuere. Duis laoreet, sapien nec elementum volutpat, magna leo tempus velit, sed sollicitudin lacus turpis non mi. Sed dapibus consectetur sagittis. Suspendisse tincidunt libero eu ligula consectetur eleifend. Donec euismod enim a metus scelerisque nec hendrerit odio condimentum. In congue porta elit at fringilla. Maecenas vulputate enim et elit placerat eget feugiat orci eleifend. Nam volutpat, velit aliquet lacinia porta, justo nisi tempor lacus, ac lacinia dui nisi a risus. Ut sollicitudin scelerisque felis quis auctor. Donec semper pulvinar fermentum.
Nam et dolor quis purus aliquam tincidunt eget vehicula libero. Fusce sagittis tristique lacus, eget mollis nunc vulputate a. Fusce pharetra congue malesuada. Nullam et ante sed magna blandit laoreet a nec odio. Sed suscipit tellus eu massa pretium sollicitudin. Aliquam aliquam tortor a felis malesuada interdum. Etiam aliquet, leo at vestibulum congue, dolor diam tincidunt orci, luctus convallis velit neque sit amet lectus. In in sem quis justo tincidunt facilisis. Vivamus laoreet leo varius mauris feugiat euismod dapibus arcu molestie. Sed nec augue sit amet nulla tristique mollis. Nunc vel erat nibh. Morbi iaculis blandit adipiscing. Nullam ac dolor quis libero viverra tincidunt.
Nam et massa felis, a malesuada nisl. Phasellus sollicitudin fermentum sollicitudin. Integer rhoncus neque non lacus eleifend semper. Ut ante nisi, ultricies vel malesuada ac, semper ullamcorper metus. Sed mollis leo sit amet lacus hendrerit eget varius tortor aliquam. Mauris ultrices egestas sagittis. Mauris in viverra arcu. Sed consectetur, massa at posuere pharetra, purus justo tristique risus, tempus sagittis nibh purus et nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus tempus magna eget laoreet. Duis enim erat, commodo vitae commodo vitae, sollicitudin id justo.
Поделиться32013-05-04 21:31:03
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo consequat mattis. Sed gravida, enim id auctor posuere, turpis sem aliquet libero, non rutrum ante risus quis neque. Maecenas molestie euismod volutpat. Suspendisse vel nisi luctus massa consectetur fermentum sit amet vel lorem. Maecenas molestie, neque ac tincidunt adipiscing, metus diam faucibus lorem, sit amet ultricies lacus ligula eu ante. Sed sed sem tellus, ac fringilla est. Ut sagittis massa rhoncus dolor feugiat a sagittis purus vulputate. Fusce sed metus nec tellus interdum tincidunt. Suspendisse scelerisque vestibulum dui et dignissim. Pellentesque sit amet risus tristique augue congue bibendum. Proin ultrices dui id sem laoreet sollicitudin. Praesent at nulla ut augue porttitor pretium quis ut lacus. Pellentesque at sapien nisl. Etiam dignissim, enim in porttitor posuere, odio est gravida lorem, at posuere ipsum sem vel enim.
In iaculis, dui quis tincidunt sagittis, nisi libero lacinia urna, eu posuere arcu ligula sed tortor. Nulla facilisi. Phasellus eget leo sem, quis convallis quam. Fusce viverra sollicitudin nisi non viverra. In hac habitasse platea dictumst. Sed lorem magna, faucibus et aliquam ac, fermentum at nulla. Morbi at quam id lorem suscipit tempor. Pellentesque ante ligula, mollis quis euismod vel, viverra vel turpis. Praesent sed ipsum diam, id bibendum risus. Integer iaculis hendrerit nulla, ut ornare turpis volutpat vitae. Pellentesque ac diam vitae massa ornare vehicula sodales at urna. Aenean gravida, nisi in consectetur ultrices, mauris tortor venenatis tellus, nec consequat magna enim in eros. Nullam id orci vel tortor ultrices fermentum ut quis lacus. Vestibulum quam sapien, consequat quis elementum sit amet, pulvinar at mi. Proin ultricies tortor ac dui iaculis a tincidunt lectus fringilla.
Etiam blandit diam turpis. Fusce lobortis consequat tortor ac fermentum. Fusce sollicitudin lacinia lectus non dapibus. Fusce ullamcorper viverra posuere. Duis laoreet, sapien nec elementum volutpat, magna leo tempus velit, sed sollicitudin lacus turpis non mi. Sed dapibus consectetur sagittis. Suspendisse tincidunt libero eu ligula consectetur eleifend. Donec euismod enim a metus scelerisque nec hendrerit odio condimentum. In congue porta elit at fringilla. Maecenas vulputate enim et elit placerat eget feugiat orci eleifend. Nam volutpat, velit aliquet lacinia porta, justo nisi tempor lacus, ac lacinia dui nisi a risus. Ut sollicitudin scelerisque felis quis auctor. Donec semper pulvinar fermentum.
Nam et dolor quis purus aliquam tincidunt eget vehicula libero. Fusce sagittis tristique lacus, eget mollis nunc vulputate a. Fusce pharetra congue malesuada. Nullam et ante sed magna blandit laoreet a nec odio. Sed suscipit tellus eu massa pretium sollicitudin. Aliquam aliquam tortor a felis malesuada interdum. Etiam aliquet, leo at vestibulum congue, dolor diam tincidunt orci, luctus convallis velit neque sit amet lectus. In in sem quis justo tincidunt facilisis. Vivamus laoreet leo varius mauris feugiat euismod dapibus arcu molestie. Sed nec augue sit amet nulla tristique mollis. Nunc vel erat nibh. Morbi iaculis blandit adipiscing. Nullam ac dolor quis libero viverra tincidunt.
Nam et massa felis, a malesuada nisl. Phasellus sollicitudin fermentum sollicitudin. Integer rhoncus neque non lacus eleifend semper. Ut ante nisi, ultricies vel malesuada ac, semper ullamcorper metus. Sed mollis leo sit amet lacus hendrerit eget varius tortor aliquam. Mauris ultrices egestas sagittis. Mauris in viverra arcu. Sed consectetur, massa at posuere pharetra, purus justo tristique risus, tempus sagittis nibh purus et nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus tempus magna eget laoreet. Duis enim erat, commodo vitae commodo vitae, sollicitudin id justo.
Поделиться52013-08-20 20:58:30
Контейнер для всплывающей формы
.notify-message - регулируем ширину, внутренние отступы, цвет контейнера и т.д.
Группа специальных классов для различных видов сообщений (цветной бордер слева)
.jg-mention {border-left: 12px solid #0076ff;} - ответ в теме
.jg-ls {border-left: 12px solid #a2f53b;} - личное сообщение
Заголовок всплывающего сообщения:
.notify-message .jGrowl-header - регулируем цвет шрифта, размер, начертание
Регулирование цвета/размера текста внутри сообщения:
.notify-message .jGrowl-message a, .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 выглядит так:
<div class="notify-message jg-alert" style="display: block;">
<div class="jGrowl-close">x</div>
<div class="jGrowl-header">Заголовок</div>
<div class="jGrowl-message">
<a href="#" title="Просмотреть упоминание">
<img src="1376742017.png" alt="Аватар">
<span><strong>Duka</strong> ответил(а) вам в теме:</span>
<span>«Название темы»</span>
<span class="jGrowl-notation">Чтобы прочитать кликните...</span>
<span class="jGrowl-date"><strong>Сегодня</strong>, в 12:40</span>
</a>
</div>
</div>
Где выделенное жирным является динамическим классом.