» »

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


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

На сайте всегда должны присутствовать информационные блоки, которые несли бы суть данного решение. И они идут под разным оттенком цвета и кнопкой. Здесь все очень просто, если кто то нарушил правила ресурса, то можно не писать в красном цвете, а просто поставить блок, и красиво будет и понятно. Так как 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.04.2016 Просмотров: 819 Комментарий: (28)

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

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

Комментарий: 28
FeStemBer
FeStemBer 29.04.2016 18:521
0
Как быть на форуме, если они только работают на HTML, просто они там намного нужней эти блоки.
Kosten
Kosten 29.04.2016 18:582
0
Tventum, но если у вас новая форма добавление, то думаю не каких преград не будет, там же можно переключать. Но мне так кажется что и там должны появляться, если что то можно попробовать дивы на bbкоды выставить.
tsakonter
tsakonter 29.04.2016 19:043
0
Kosten, так нормальные блоки, но нужно на всякий случай предоставлять и архив с иконками, может кто то хочет по другому установить.
Kosten
Kosten 29.04.2016 19:074
0
Если так важно, то вы можете эти кнопки скачать и сделать папку в корне сайта. Просто сделал, чтоб сразу прописали и не нужно не чего грузить.
Сафрон
Сафрон 29.04.2016 19:105
0
Kosten, ты залей, которые у тебя на форуме стоят, там только админ и видит кнопки и как понимаю, это замечание и информация.
Kosten
Kosten 29.04.2016 19:156
0
Сафрон, согласен с тобой, но тут одна заковырка, не устанавливал сам, точнее мне их скинули, так что нужно дождаться Воркман, так как на время он не в сети, и спросить, хотя думаю в интернете можно найти.
csretven
csretven 29.04.2016 19:187
0
Сафрон,но если форум активный, то думаю нужно ставить, а если не кто там не пишет или редко, то зачем они нужны.
workman
workman 02.05.2016 09:328
0
Косяк парни в том что если текст превышен одной строки то картинка слева остается не по центру а вверху .. Демо По моему лучше бы было если она так и оставалась по центру текста
Kosten
Kosten 02.05.2016 13:469
0
Но если так будет, то нормально и понятно.

workman
workman 02.05.2016 21:3610
0
лучше было бы если оно стояло посередине не зависимо от того сколько текста там ... это было бы правильней и красившей ... Добавлю позже стили и поменяешь
Kosten
Kosten 02.05.2016 22:0511
0
Но по центру могут сами поставить в самом коде, это не сложно.
workman
workman 03.05.2016 09:4512
0
Постоянно регулируя под каждый текст???
Kosten
Kosten 03.05.2016 14:0013
0
Но если что стили пропишешь, а там кому нужно выберут.
FeStemBer
FeStemBer 03.05.2016 17:2014
0
Вот по центру не так будет смотреться, ведь с левой стороны м одного места посты начинаться будут, а то если поставить по центру, то елка получится, но мне не нравится когда какую то информацию во центру выводят. Соглашусь, если это картинка или что то с дизайн, но очень редко встретишь, чтоб описание так делали.
workman
workman 03.05.2016 18:2215
0
Смотрим сюда
Kosten
Kosten 03.05.2016 19:1516
0
Что нормально под дизайн сайта сделано, и кнопку можно здесь любую выставить. Просто изначально они шли в папке, не стал их закидывать в архив, просто прописал, кому нужно сменит.

Rinat1990
Rinat1990 25.05.2016 04:4217
0
А кто подскажет как прописывать эти информационные блоки под конкретную категорию? чтоб у каждой категории файлов свой информационный блок был?
Kosten
Kosten 25.05.2016 08:0818
0
Стиль просто нужный выставить, хотя они больше для форума.
Rinat1990
Rinat1990 25.05.2016 08:2519
0
ДА у меня на сайте они тоже неплохо смотрятся! Мне просто надо чтобы у каждой категории свое сообщение в этом информационном блоке было!
Kosten
Kosten 25.05.2016 10:0720
0
Вы можете не в CSS прописывать стили а поставив код с описанием, а ниже стили, какие вам нужно, заключить в

Код
<style> стиль </style>


Прописать ниже.
Rinat1990
Rinat1990 25.05.2016 12:2121
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.05.2016 12:4222
0
Но здесь нужно или другой скрипт, или вы в тело когда ставите это описание, потом стили выбираете и ниже их пропишите как Костен написал, только заключите их в style.
Rinat1990
Rinat1990 25.05.2016 13:0023
0
Млин! Что то я не догоняю как это выглядеть должно! На примере можете мне отписать! Очень надо просто!
Kosten
Kosten 25.05.2016 13:0524
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>
froloff161ru
froloff161ru 04.10.2016 03:5725
0
Хорошая штука. Но как это реализовать так, чтобы текст с призывом включается из админки WP в каждом посте к примеру? Поставил галочку в посте и текст появился. Если просто прописывать на каждой странице это не есть хорошо для индексации, да и виден текст в общей ленте.
Kosten
Kosten 04.10.2016 15:1426
0
Здесь даже не чего не могу подсказать, что по индексации, но они не закрыты для роботов поисковых.
froloff161ru
froloff161ru 04.10.2016 20:5727
0
Проблему решил добавив дополнительные кнопки в редакторе. Пришлось сделать изображение такого информационного блока, специально для не заполненных объектов городского портала с призывом приобрести "премиум" размещение. От того, что стандартные объекты на моём сайте имеют только данный текст, его-то и начнут индексировать поисковики. А текст одинаковый, панхет баном. В новостном журнале же, пойдёт и стандартные информационные блоки. Добавлю кнопки и для них.
Напишу для тех, кто ещё как я пол ночи не искал решения проблемы.

/*Кнопка открывающая и закрывающая шорткод или код.*/
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
function appthemes_add_quicktags() {
if ( wp_script_is('quicktags' <img src="/.s/sm/23/wink.gif" border="0" align="absmiddle" alt="wink" /> ){
?>
<script type="text/javascript">
QTags.addButton( 'eg_promo', 'Promo', '<a href="http://ваш домен/страница на которую идёт переход при нажатии на картинку с призывом" target=_blank><img src="http://ваш домен/images/promo.png" border="0" title="Подробнее.." width=592 height=128></a>', '<a href="http://ваш домен/страница на которую идёт переход при нажатии на картинку с призывом" target=_blank><img src="http://ваш домен/images/promo.png" border="0" title="Подробнее.." width=592 height=128></a>', 'g', 'Promo', 201 );
</script>

<?php
}
}

Этот код прописываете в functions.php вашей темы и дополнительная кнопка в html редакторе готова. На место скрипта красного цвета, можно добавить и обычный текст и информационные блоки и шорткоды. Кнопка работает двумя нажатиями. Первое нажатие первый "выделеный красный цветом контент". Второе нажатие, второй контент. Думаю вы поняли о чём речь.
За статью автору спасибо. Видел такие блоки в плагине, не помню уже каком да и искать нет желания. Автор обошёл этот плагин стороной. Молодец.
Kosten
Kosten 04.10.2016 21:2728
0
Отлично что решили проблему, и безусловно, что поделились и описали все подробно.
avatar