3 варианта оформления участка текста в сообщении

hpargallka.blogspot.ru

Приветствую всех, кто читает мои шпаргалки. Сегодня затрону тему, как красиво выделить участок текста  в сообщении нашего блога.  Приведу  несколько вариантов такого оформления.  Если вы, что-то подходящее для себя выберете  к каждому прилагается код. Давайте разберёмся, как и куда его вставить. Сложного в этом ничего нет.

Заранее нужно сделать резервное копирование шаблона .Далее  идём  в ШАБЛОН- ИЗМЕНИТЬ -HTML  и  с помощью клавиш  Ctrl +F  находим
такую строчку  ]]></b:skin> и прямо над ней нужно вставить код варианта, который вы выбрали.
Далее не забываем сохранять шаблон. 

Вот такой вариант

Это код для него

.bloknot {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 40px;
background : #bce2eb url(http://3.bp.blogspot.com/-7BPOTkYGTxg/TlpSQjCGdMI/AAAAAAAABn4/u-L9h0RB4Pg/s800/kod.jpg) repeat-y top left;
border-top : 1px solid #3D282B;
border-right : 1px solid #3D282B;
border-bottom : 1px solid #3D282B;
border-left : 1px solid #3D282B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Вот такой вариант

Код для него

.bloknot {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #bce2eb url(http://3.bp.blogspot.com/-LH4mhDFmUnI/TlooB7_Oc8I/AAAAAAAABnA/UgYlIENjMLs/s1600/Bloknot.gif) repeat-y top left;
border-top : 1px solid #555555;
border-right : 1px solid #555555;
border-bottom : 1px solid #555555;
border-left : 1px solid #555555;

}

И вот такой

Код

.bloknot {    
margin : 15px 35px 15px 15px;    
padding : 20px 10px 10px 35px;    
background : #F7C65C;    
border-top : 1px solid #B5520B;    
border-right : 1px solid #B5520B;    
border-bottom : 1px solid #B5520B;    
border-left : 1px solid #B5520B;    
border-radius: 5px;    
-moz-border-radius: 5px;    
-webkit-border-radius: 5px;
}

Когда  пишем сообщение и  захочется выделить определённый участок текста , нам остаётся только заключить этот участок (перейти в редактор HTML) вот в эти  теги-

<div class="blocnot">здесь желаемый текст</div>.

Если вы редко предполагаете использовать у себя такое оформление, то лучше устанавливать первый код не в шаблоне, а прямо в редакторе сообщения. Только при этом нужно перейти в формат и код CSS заключить в теги <style>

Вот так

<style>
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 40px;
background : #bce2eb url(http://3.bp.blogspot.com/-7BPOTkYGTxg/TlpSQjCGdMI/AAAAAAAABn4/u-L9h0RB4Pg/s800/kod.jpg) repeat-y top left;
border-top : 1px solid #3D282B;
border-right : 1px solid #3D282B;
border-bottom : 1px solid #3D282B;
border-left : 1px solid #3D282B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}</style>

В каждом варианте вы можете менять цвет на свой. Поменяйте просто значение background: ,  которые выделены красным цветом на своё.

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

И в завершении  хочу пожелать вам удачи . Не бойтесь экспериментировать. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :