ГлавнаяДизайн блога › Как настроить стиль цитаты в WordPress?


Как настроить стиль цитаты в WordPress?


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

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

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

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


цитаты в WordPress


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

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

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

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

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

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

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



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

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

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

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

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



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

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

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

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

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

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


цитаты в WordPress

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 Веб-шрифты:


цитаты в WordPress

blockquote {
@import url(http://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:


цитаты в WordPress

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('ВАШЕ ИЗОБРАЖЕНИЕ');
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('ВАШЕ ИЗОБРАЖЕНИЕ');
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('ВАШЕ ИЗОБРАЖЕНИЕ');
}


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

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

.entry blockquote



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

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

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

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




18 комментариевА что думаете Вы?

  1. тимур

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

    [Ответить]

    Денис Черников ответил:

    Спасибо, Тимур! Рад стараться! Да я думал про whois, но пока руки мои не дошли.

    [Ответить]

  2. Степан

    Добрый день Денис.Стандартный конечно смотрится не очень,будем подбирать,что понравится.Спасибо.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Степан! Вы всегда можете придумать что-то своё. Я лишь показал, как это работает!

    [Ответить]

  3. Tатьяна Паломи

    Вау, какая красота! А то это нудное и однотипное оформление цитат уже глаз режет. Хочется чего нибудь новенького и красивого.

    [Ответить]

    Денис Черников ответил:

    Выбирайте, Татьяна! Можете даже сами что-то придумать. Поиграйте с цветами.

    [Ответить]

  4. тимур

    если у вас дойдут руки ... точнее время ))) то я буду первым кто будет использовать сей скрипт ! ну и pr и тому подобные ! кстати у вас на данной странице тошнота слов гугл и яша их не любят.

    [Ответить]

    Денис Черников ответил:

    Хорошо, Тимур! Посмотрим.

    [Ответить]

  5. тимур

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

    [Ответить]

    Денис Черников ответил:

    Ничего, бывает!

    [Ответить]

  6. Лолита

    Здорово, спасибо! Получается даже отдельный акцент на цитате — она выделена и привлекает внимание

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Лолита! Вроде мелочь «цитата», а по-другому уже интереснее смотрится!

    [Ответить]

  7. Яна

    А в клеточку можете дополнить, очень интересно!

    [Ответить]

    Денис Черников ответил:

    Чем дополнить?

    [Ответить]

  8. Михаил

    Денис, а вот такого эффекта, как у тебя в постах, как реализовать? http: //clip2net.com/s/6PNw7E Спасибо!

    [Ответить]

    Денис Черников ответил:

    Это плагин, у меня пост о нём был, поищите! Называется пост по-моему «как вывести красиво код в статье».

    [Ответить]

  9. Михаил

    Спасибо Денис! Скачал установил, но из русского языка там только кнопка Сохранить изменения. Может есть какой файл русификации, типа ru_RU.MO ?

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Я ничего с ним не делал, но у меня всё на русском!

    [Ответить]

Оставить комментарий!

Вверх