ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Информационные блоки для сайта

Информационные блоки для сайта

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

Вы также можете сами сделать свой информационный блок, который бы отлично отражал свою суть и безусловно подошел по своей стилистике на ваш интернет ресурс. Все будет выводится только в HTML коде, что можете сделать красиво статью или написать мануал и в этих блоках заключить ключевые слова.

Установка:

Для начало, давайте раздерем основной стиль, который будет выводит саму форму, и за это отвечает этот, сто в css ставим.Здесь в самом низу добавил закругление углов, кому нудно тот сделает дольше или уберет.

Код

.message {
  line-height: 24px;
  font-weight: normal;
  padding: 15px 15px 15px 80px;
  position: relative;
  margin: 10px 0;
  border-radius: 5px;
}

Но теперь идет коды и остальные стили.

Светло зеленый:

HTML

Код

<div class="success-message message">Светло зеленый информационный блок</div>

CSS

Код

.success-message {
background: url("http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/success.png") no-repeat scroll 15px 3px #EEF4D4;
border: 1px solid #8FAD3D;
}

Светло красный:

HTML

Код

<div class="error-message message">Светло красный информационный блок.</div>

CSS

Код

.error-message {
background: url("http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/error.png") no-repeat scroll 15px 3px #EFCEC9;
border: 1px solid #AE3F2E;
}

Светло синий:

HTML

Код

<div class="message-message message">Светло синий информационный блок.</div>

CSS

Код

.message-message {
background: url("http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/message.png") no-repeat scroll 15px 3px #C6D8F0;
border: 1px solid #4282CC;
}

Светло желтый:

HTML

Код

<div class="warning-message message">Светло желтый информационный блок.</div>

CSS

Код

.warning-message {
background: url("http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/warning.png") no-repeat scroll 15px 3px #FFEA97;
border: 1px solid #E2B500;
}

Здесь вы можете выбрать, какой именно вам нужен блок, а также его отредактировать по цвету, так все прописано в стилях.

29 Апреля 2016 Просмотров: 3488 Комментариев: (28)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 28
Порядок вывода комментариев: FeStemBer 29 Апреля 2016 18:52¹ 0 Как быть на форуме, если они только работают на HTML, просто они там намного нужней эти блоки. Kosten 29 Апреля 2016 18:58² 0 Tventum, но если у вас новая форма добавление, то думаю не каких преград не будет, там же можно переключать. Но мне так кажется что и там должны появляться, если что то можно попробовать дивы на bbкоды выставить. tsakonter 29 Апреля 2016 19:04³ 0 Kosten, так нормальные блоки, но нужно на всякий случай предоставлять и архив с иконками, может кто то хочет по другому установить. Kosten 29 Апреля 2016 19:07⁴ 0 Если так важно, то вы можете эти кнопки скачать и сделать папку в корне сайта. Просто сделал, чтоб сразу прописали и не нужно не чего грузить. Сафрон 29 Апреля 2016 19:10⁵ 0 Kosten, ты залей, которые у тебя на форуме стоят, там только админ и видит кнопки и как понимаю, это замечание и информация. Kosten 29 Апреля 2016 19:15⁶ 0 Сафрон, согласен с тобой, но тут одна заковырка, не устанавливал сам, точнее мне их скинули, так что нужно дождаться Воркман, так как на время он не в сети, и спросить, хотя думаю в интернете можно найти. csretven 29 Апреля 2016 19:18⁷ 0 Сафрон,но если форум активный, то думаю нужно ставить, а если не кто там не пишет или редко, то зачем они нужны. workman 02 Мая 2016 09:32⁸ 0 Косяк парни в том что если текст превышен одной строки то картинка слева остается не по центру а вверху .. Демо По моему лучше бы было если она так и оставалась по центру текста Kosten 02 Мая 2016 13:46⁹ 0 Но если так будет, то нормально и понятно. workman 02 Мая 2016 21:36¹⁰ 0 лучше было бы если оно стояло посередине не зависимо от того сколько текста там ... это было бы правильней и красившей ... Добавлю позже стили и поменяешь Kosten 02 Мая 2016 22:05¹¹ 0 Но по центру могут сами поставить в самом коде, это не сложно. workman 03 Мая 2016 09:45¹² 0 Постоянно регулируя под каждый текст??? Kosten 03 Мая 2016 14:00¹³ 0 Но если что стили пропишешь, а там кому нужно выберут. FeStemBer 03 Мая 2016 17:20¹⁴ 0 Вот по центру не так будет смотреться, ведь с левой стороны м одного места посты начинаться будут, а то если поставить по центру, то елка получится, но мне не нравится когда какую то информацию во центру выводят. Соглашусь, если это картинка или что то с дизайн, но очень редко встретишь, чтоб описание так делали. workman 03 Мая 2016 18:22¹⁵ 0 Смотрим сюда Kosten 03 Мая 2016 19:15¹⁶ 0 Что нормально под дизайн сайта сделано, и кнопку можно здесь любую выставить. Просто изначально они шли в папке, не стал их закидывать в архив, просто прописал, кому нужно сменит. Rinat1990 25 Мая 2016 04:42¹⁷ 0 А кто подскажет как прописывать эти информационные блоки под конкретную категорию? чтоб у каждой категории файлов свой информационный блок был? Kosten 25 Мая 2016 08:08¹⁸ 0 Стиль просто нужный выставить, хотя они больше для форума. Rinat1990 25 Мая 2016 08:25¹⁹ 0 ДА у меня на сайте они тоже неплохо смотрятся! Мне просто надо чтобы у каждой категории свое сообщение в этом информационном блоке было! Kosten 25 Мая 2016 10:07²⁰ 0 Вы можете не в CSS прописывать стили а поставив код с описанием, а ниже стили, какие вам нужно, заключить в Код <style> стиль </style> Прописать ниже. Rinat1990 25 Мая 2016 12:21²¹ 0 Ну у меня на странице прописано вот так: Код <div class="warning-message message"><center><b>КАК УСТАНОВИТЬ МОД</b></center> <br> 1.Прежде всего нужно узнать, где на вашем компьютере находится папка с игрой.<br> 2.Если вы знаете, где эта папка, то можете переходить к следующему пункту.<br> 3.В противном случае местонахождение папки с игрой можно узнать одним из следующих способов:<br> - Открыть Steam, нажать правой кнопкой мыши на игре "Spintires", выбрать "Свойства", выбрать вкладку "Локальные файлы", нажать кнопку "Посмотреть локальные файлы";<br> - Поискать папку по пути C:\Program Files (x86)\Steam\SteamApps \common\Spintires 4.Содержимое архива скопировать в папку Media в игре;<br> 5.Очистить кэш (не всегда обязательный, но желательный пункт);<br> 6.Запустить игру.<br> Удачной игры=)<br></div> И соответственно это сообщение выводится во всех категориях файлов! а мне необходимо чтобы для каждой категории свое сообщение выводилось! Сопрано 25 Мая 2016 12:42²² 0 Но здесь нужно или другой скрипт, или вы в тело когда ставите это описание, потом стили выбираете и ниже их пропишите как Костен написал, только заключите их в style. Rinat1990 25 Мая 2016 13:00²³ 0 Млин! Что то я не догоняю как это выглядеть должно! На примере можете мне отписать! Очень надо просто! Kosten 25 Мая 2016 13:05²⁴ 0 Вот полностью установите, потом стиль поменяете, какой вам нужен, и с CSS уберите тот стиль, который ниже кода стоять будет. Код <div class="warning-message message"><center><b>КАК УСТАНОВИТЬ МОД</b></center> <br> 1.Прежде всего нужно узнать, где на вашем компьютере находится папка с игрой.<br> 2.Если вы знаете, где эта папка, то можете переходить к следующему пункту.<br> 3.В противном случае местонахождение папки с игрой можно узнать одним из следующих способов:<br> - Открыть Steam, нажать правой кнопкой мыши на игре "Spintires", выбрать "Свойства", выбрать вкладку "Локальные файлы", нажать кнопку "Посмотреть локальные файлы";<br> - Поискать папку по пути C:\Program Files (x86)\Steam\SteamApps \common\Spintires 4.Содержимое архива скопировать в папку Media в игре;<br> 5.Очистить кэш (не всегда обязательный, но желательный пункт);<br> 6.Запустить игру.<br> Удачной игры=)<br></div> <style>.warning-message { background: url("http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/warning.png") no-repeat scroll 15px 3px #FFEA97; border: 1px solid #E2B500; }</style>
1 2 »