как настроить стиль цитаты в WordPressЗдравствуйте, дорогие читатели – Sozdaiblog.ru!

Сегодня я покажу,как настроить стиль цитаты в WordPress.

Я абсолютно уверен, что многие из Вас неоднократно использовали цитаты в постах и записях своих Веб-ресурсов для акцентирования внимания на определённом участке текста.

Если это так, то Вам должен быть знаком её стандартный и не презентабельный вид:

Пришло время это исправить и изменить внешний вид цитат на свой вкус.

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

Итак, внимание!

Стили оформления цитат.

Перед тем, как приступить к знакомству со стилями цитат, давайте разберёмся, с помощью чего они выводятся.

Стандартно цитаты в WordPress реализуются посредством оборачивания необходимого участка текста переменной <blockquote>:

<blockquote>ТЕКСТ ЦИТАТЫ</blockquote>

А в файле style.css Вашей активной темы оформления задаются параметры внешнего вида цитаты. Мой стандартный стиль выглядит вот так:

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

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

Конечно, нет такого совета в медицине, чтобы не принимать студентов, взяв за основу только цвет их рубашки, но это было тонкое влияние на их восприятие, которое дает больше доверия моему брату.

В итоге его приняли.

Не совсем весело, правда?

Ничего, на днях я это исправлю.

Думаю, что и Вы последуете моему примеру.

Ладно, не буду томить, встречайте!

1. Самый простой стиль Blockquote.

В этом примере вместо стандартных кавычек добавлена вертикальная полоса и изменён стиль шрифта:

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

2. Белый, синий и оранжевый Blockquote.

Цитаты могут быть красочными настолько, насколько Вы захотите:

цитаты в WordPress

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

3. Использование шрифтов Google Web для Цитаты в CSS.

В этом примере цитаты я использовал шрифт Droid Serif из библиотеки Google Веб-шрифты:

blockquote {
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
}

4. Круглый Blockquote.

В этом примере у нас есть цитата с закругленными углами, где я использовал тени для границ:

цитаты в WordPress

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
padding:0px 10px 10px 15px;
margin:0 20px 20px;
}

5. Использование градиента в качестве фона.

Здесь, для фона окна цитаты я использовал кроссбраузерную градиентную заливку CSS3:

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
padding:0px 10px 10px 15px;
margin:0 20px 20px;
}

6. Цитата с фоновым узором.

Как Вы видите, в этом окне вместо фонового цвета используется произвольная картинка. В моём случае тетрадный лист:

цитаты в WordPress

blockquote {
width: 450px;
background-image:url('/wp-content/uploads/ВАШЕ �_ЗОБРАЖЕН�_Е');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
padding:0px 10px 10px 15px;
margin:0 20px 20px;
}

7. Использование нескольких фоновых изображений в Blockquote.

Вы можете использовать несколько изображений в фоновом режиме. Для этого у нас есть «псевдо» элемент «blockquote:before», который позволяет это сделать:

цитаты в WordPress

blockquote {
width: 450px;
background-image:url('/wp-content/uploads/ВАШЕ �_ЗОБРАЖЕН�_Е');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
padding:0px 10px 10px 15px;
margin:0 20px 20px;
}
blockquote:before{
position:absolute;
margin-top:-18px;
margin-left:0px;
content:url('/wp-content/uploads/ВАШЕ �_ЗОБРАЖЕН�_Е');
}

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

У меня он выглядит так:

.entry blockquote

Теперь Вы знаете, как настроить стиль цитаты в WordPress.

Надеюсь, что данная статья была Вам полезна. Если у Вас возникли вопросы, не стесняйтесь, задавайте их в комментариях.

На этом всё. Удачи!

С уважением, Денис Черников!