Sozdaiblog.ru
Назад

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

Опубликовано: 09.06.2013
Время на чтение: 12 мин
18
9

как настроить стиль цитаты в 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.

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

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

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

Поделиться
Похожие записи
Комментарии:
  • тимур
    Опубликовано: 09.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 09.07.2013 Ответить на сообщение

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

  • Степан
    Опубликовано: 09.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 09.07.2013 Ответить на сообщение

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

  • Tатьяна Паломи
    Опубликовано: 09.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 09.07.2013 Ответить на сообщение

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

  • тимур
    Опубликовано: 09.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 10.07.2013 Ответить на сообщение

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

  • тимур
    Опубликовано: 09.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 10.07.2013 Ответить на сообщение

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

  • Лолита
    Опубликовано: 11.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 11.07.2013 Ответить на сообщение

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

  • Яна
    Опубликовано: 07.02.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 07.02.2014 Ответить на сообщение

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

  • Михаил
    Опубликовано: 16.02.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.02.2014 Ответить на сообщение

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

  • Михаил
    Опубликовано: 16.02.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.02.2014 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.