Как красиво оформить участок статьи в WordPress

Всем привет! Каждый блоггер, оформляя свои статьи, ждет, что их будут прочитывать до конца. При этом необходимо учитывать очень много факторов: от размера и цвета шрифта до оформления картинок и других медийных элементов.
В этой статье затрону тему оформления участков статьи, которые несут особую смысловую нагрузку. Это могут быть, например, термины, практические советы, предложение для читателей и т.д.
Как оформить цитату в Вордпресс:
Для этих целей Вордпресс имеет кнопку цитата. Для того, чтобы воспользоваться ей выделите нужный участок статьи и нажмите на вот эту кнопку:
Участок, который был выделен, заключается в контейнер цитаты <blockquote>…</blockquote> и оформляется в соответствие со стилями, заданными в теме. Например, в моей теме стили цитаты вот такие:
.blockquote {
background-color: #EDEDED;
border-left: 6px solid #687888;
margin: 20px;
padding: 10px 14px 2px;
font-style: italic;
}
Если вы знаете CSS, то сможете с легкостью изменить и настроить оформление цитаты под свой вкус. Для тех кто не знает, могу предложить интересные варианты:
.stl1 {
background-position: 20px 50%;
background-repeat: no-repeat;
border: 1px solid #b3876c;
-moz-box-shadow: 1px 1px 1px 1px #999;
-webkit-box-shadow: #999 1px 1px 1px 1px;
box-shadow: 1px 1px 1px 1px #999;
text-align: justify;
background-color: #FFD4A0;
background-image: url(https://samsebewebmaster.ru/wp-content/uploads/vip.jpg);
padding: 20px 20px 20px 80px !important;
}
Вот так будет выглядеть ваша цитата
Второй вариант эффектного оформления блока цитаты:
.stl2 {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(https://samsebewebmaster.ru/wp-content/uploads/2014/11/цитата-2.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
Вот так будет выглядеть ваша цитата
Эти стили необходимо добавить в файл CSS, а участок, который надо выделить, заключаем в теги:
для первого варианта:
<blockquote class="stl1">Тут пишем текст цитаты</blockquote>
для второго варианта:
<blockquote class="stl2">Тут пишем текст цитаты</blockquote>
Или же просто меняем стиль стандартной цитаты на понравившийся.
А что же вы результат-то не показали?..
На днях перепишу статью и все добавлю! Спасибо за замечание!
У меня все равно «Цитату» с серым фоном показывает?