регистрация
856материалов
3325комментариев
235тем на форуме
7003пользователя

Информационные сообщения для uCoz


Описание:

Наверное у вас не раз возникал вопрос как выделить ту или иную информацию на своем сайте. Примером такой информации может быть просьба зарегистрироваться посетителей чтобы получить доступ к комментированию статьи, важная часть сообщения с обращением к посетителям или же оформление сообщений на вашем форуме в рамки для текста. Предлагаю 5 цветовых решений таких информационных сообщений. Такие выделяющиеся блоки являются просто отличным способом привлечь внимание ваших посетителей к важной информации.

Установка в CSS:

Добавьте эти стили в ПУ / Дизайн / Управление дизайном (css) либо к себе в отдельный css файл
Код
.info_box {                         
                         margin:10px 0px 10px;                         
                         font-size:13px;                         
                         line-height:18px;                         
                         position:relative;                         
                         -moz-box-shadow:0 1px 1px rgba(0,0,0,0.1);                         
                         -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);                         
                         box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);                         
}                         
.info_box_content {                         
                         text-shadow:1px 1px 1px white;                         
                         padding:18px 43px 17px 66px;                         
                         min-height:35px;                         
}                         

.warning {                         
                         border:1px solid #E0B1B1;                         
}                         
.warning .info_box_content {                         
                         color:#AD7676;                         
                         background:#FFD9D5;                         
                         border:1px solid #FCEEEC;                         
                         -moz-box-shadow:inset 0 0 45px #f0bfba;                         
                         -webkit-box-shadow:inset 0 0 45px #F0BFBA;                         
                         box-shadow:inset 0 0 45px #F0BFBA;                         
}                         
.warning::before {                         
                         width:17px;                         
                         height:17px;                         
                         background:url(http://webmaster-ucoz.ru/ucoz/img/img/ico.png) no-repeat;                         
}                         
.note {                         
                         border:1px solid #B9DBB6;                         
}                         
.note .info_box_content {                         
                         color:#7EA57B;                         
                         background:#DFF7DD;                         
                         border:1px solid #F1F9F0;                         
                         -moz-box-shadow:inset 0 0 45px #cbe5c9;                         
                         -webkit-box-shadow:inset 0 0 45px #CBE5C9;                         
                         box-shadow:inset 0 0 45px #CBE5C9;                         
}                         
.note::before {                         
                         width:19px;                         
                         height:14px;                         
                         background:url(http://webmaster-ucoz.ru/ucoz/img/img/ico.png) no-repeat 0 -17px;                         
}                         
.nice {                         
                         border:1px solid #E2E2BA;                         
}                         
.nice .info_box_content {                         
                         color:#ADA771;                         
                         background:#F9F9DC;                         
                         border:1px solid #FBFBEF;                         
                         -moz-box-shadow:inset 0 0 45px #efefc0;                         
                         -webkit-box-shadow:inset 0 0 45px #EFEFC0;                         
                         box-shadow:inset 0 0 45px #EFEFC0;                         
}                         
.nice::before {                         
                         width:22px;                         
                         height:20px;                         
                         background:url(http://webmaster-ucoz.ru/ucoz/img/img/ico.png) no-repeat -19px -15px;                         
}                         
.advise {                         
                         border:1px solid #B3D8D3;                         
}                         
.advise .info_box_content {                         
                         color:#80ACB0;                         
                         background:#DDF5F7;                         
                         border:1px solid #F1FAFB;                         
                         -moz-box-shadow:inset 0 0 45px #c6edf0;                         
                         -webkit-box-shadow:inset 0 0 45px #C6EDF0;                         
                         box-shadow:inset 0 0 45px #C6EDF0;                         
}                         
.advise::before {                         
                         width:19px;                         
                         height:15px;                         
                         background:url(http://webmaster-ucoz.ru/ucoz/img/img/ico.png) no-repeat -17px 0;                         
}                         
.normal {                         
                         border:1px solid #DDD;                         
}                         
.normal .info_box_content {                         
                         color:#737373;                         
                         background:#FAFAFA;                         
                         border:1px solid #FAFAFA;                         
                         -moz-box-shadow:inset 0 0 45px #e7e7e7;                         
                         -webkit-box-shadow:inset 0 0 45px #E7E7E7;                         
                         box-shadow:inset 0 0 45px #E7E7E7;                         
}                         
.normal::before {                         
                         width:20px;                         
                         height:16px;                         
                         background:url(http://webmaster-ucoz.ru/ucoz/img/img/ico.png) no-repeat 0 -34px;                         
}                         

.warning::before, .note::before, .nice::before, .advise::before, .normal::before {                         
                         content:'';                         
                         position:absolute;                         
                         top:22px;                         
                         left:28px;                         
}

Установка сообщений:

Все очень просто, данный html код вы можете вставить в любое удобное для вас место, будь то новостной материал, или сообщения на форуме...

Код
<div class="info_box warning">
<div class="info_box_content">
Информа́ция — сведения, воспринимаемые человеком или специальными устройствами как отражение фактов материального мира в процессе коммуникации
</div>
</div>

Код
<div class="info_box note">                         
<div class="info_box_content">                         
Информа́ция — сведения, воспринимаемые человеком или специальными устройствами как отражение фактов материального мира в процессе коммуникации
</div>                         
</div>

Код
<div class="info_box nice">                         
<div class="info_box_content">                         
Информа́ция — сведения, воспринимаемые человеком или специальными устройствами как отражение фактов материального мира в процессе коммуникации
</div>                         
</div>

Код
<div class="info_box advise">                         
<div class="info_box_content">                         
Информа́ция — сведения, воспринимаемые человеком или специальными устройствами как отражение фактов материального мира в процессе коммуникации
</div>                         
</div>

Код
<div class="info_box normal">                         
<div class="info_box_content">                         
Информа́ция — сведения, воспринимаемые человеком или специальными устройствами как отражение фактов материального мира в процессе коммуникации
</div>                         
</div>

Различие блоков:

  • warning - красный
  • note - зеленый
  • nice - желтый
  • advise - голубой
  • normal - серый


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 14.04.2016 в 12:00
Материал просмотрен: 3814 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 18 комментариев

Пожаловаться
Сказать спасибо

18 комментариев


71_nik
Николай @71_nik 15.08.2015 21:221
+11
Отличный скрипт для оформления, но вот картинки удалены с сервера!
StimuL
Геннадий @StimuL 04.09.2015 12:042
+12
есть такое дело)) вот лови эту картинку Ссылка
Romchik
Спасибо, материал полностью обновлен!
Oksana
Оксана @Oksana 05.09.2015 00:214
+9
Красиво. Спасибо
Рагозин Валера 05.09.2015 18:055
+6
Красивые сообщения
smirno_valentina
Очень красиво
StimuL
Геннадий @StimuL 12.09.2015 22:367
+1
переделал себе под форум
1 2 »
avatar
Партнерская программа uKitCPA
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0