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

Ромчик
0

Доброго времени суток. Мы продолжаем рассматривать различные фишки WordPress. И в данной статье мы поговорим о цитатах. Цитата должна выглядеть красиво, ведь она является незабываемой частью Вашей статьи. Цитаты должны выделяться из общего текста. Поэтому оформлению цитат следует уделить особое внимание. В этой статье мы приведем девять примеров оформления цитат, которые Вы можете применить на своем ресурсе под управлением CMS WordPress. Сразу хочу отметить, что приведенные примеры заточены под WordPress, если Вы хотите их применить для других CMS, то Вам придется немного изменит код. Ну, что ж, приступим.

Для того, чтобы в WordPress вставить цитату необходимо при редактировании статьи в стандартном редакторе WordPress перейти в режим «Текст» и нажать кнопку «b-quote»

Появиться тег <blockquote> затем мы вводим цитату и опять жмем «b-quote» для того, чтобы вставить тег закрытия цитаты </blockquote>

Отлично, как вставлять цитаты мы рассмотрели. Теперь давайте остановимся на изменении вида цитаты.

1. Классический вид цитат

Если мы хотим, чтобы наша цитата выглядела следующим образом:

Нам необходимо немного отредактировать файл style.css Вашей темы. Добавьте в него следующий код:


blockquote {

font-family: Georgia, serif;

font-size: 18px;

font-style: italic;

width: 450px;

margin: 0.25em 0;

padding: 0.25em 40px;

line-height: 1.45;

position: relative;

color: #383838;

background:#ececec;

}

&nbsp;

blockquote:before {

display: block;

content: "\201C";

font-size: 80px;

position: absolute;

left: -10px;

top: -10px;

color: #7a7a7a;

}

&nbsp;

blockquote cite {

color: #999999;

font-size: 14px;

display: block;

margin-top: 5px;

}

&nbsp;

blockquote cite:before {

content: "\2014 \2009";

}

2. Классический вид цитаты с использованием фоновой картинки

Если же Вы хотите, чтобы Ваши цитаты выглядели следующим образом

Где внизу есть фоновая картинка. Добавим в файл style.css нашей темы следующий код:


blockquote {

font: 16px italic Georgia, serif;

width:450px;

padding-left: 70px;

padding-top: 18px;

padding-bottom: 18px;

padding-right: 10px;

background-color: #dadada;

border-top: 1px solid #ccc;

border-bottom: 3px solid #ccc;

margin: 5px;

background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);

background-position: middle left;

background-repeat: no-repeat;

text-indent: 23px;

}

&nbsp;

blockquote cite {

color: #a1a1a1;

font-size: 14px;

display: block;

margin-top: 5px;

}

&nbsp;

blockquote cite:before {

content: "\2014 \2009";

}

Где http://example.com/wp-content/themes/your-theme/images/gray-georgia.png — это путь к фоновой картинке.

3. Простой вид цитаты

Если Вы хотите, чтобы цитата выглядела следующим образом

То добавим в файл стилей нашей темы следующий код


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;

}

&nbsp;

blockquote cite {

color: #999999;

font-size: 14px;

display: block;

margin-top: 5px;

}

&nbsp;

blockquote cite:before {

content: "\2014 \2009";

}

4. Синий фон, белые буквы и желтая полоса слева

Если Вы хотите, что бы Ваши цитаты выглядели так:

То в файл со стилями темы добавляем следующий код:


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;

}

&nbsp;

blockquote cite {

color: #efefef;

font-size: 14px;

display: block;

margin-top: 5px;

}

&nbsp;

blockquote cite:before {

content: "\2014 \2009";

}

5. Использование шрифтов от Google в цитате

Если цитаты должны иметь следующий вид:

То добавьте с style.php следующий код:


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;

}

blockquote cite {

color: #a1a1a1;

font-size: 14px;

display: block;

margin-top: 5px;

}

&nbsp;

blockquote cite:before {

content: "\2014 \2009";

}

6. Закругленные углы

Цитата выглядит так:

Данной цитате соответствует следующий код:


blockquote {

width: 450px;

background-color: #f9f9f9;

border: 1px solid #ccc;

border-radius: 6px;

box-shadow: 1px 1px 1px #ccc;

font-style: italic;

}

blockquote cite:before {

content: "\2014 \2009";

}

7. Градиентный фон в цитате

Если Вы хотите, чтобы цитаты выглядели так:

Вставьте следующий код:


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;

}

blockquote cite:before {

content: "\2014 \2009";

}

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

Цитата выглядит:

Код:


blockquote {

width: 450px;

background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');

border: 1px solid #ccc;

box-shadow: 1px 1px 1px #ccc;

font-style: italic;

}

blockquote cite:before {

content: "\2014 \2009";

}

где http://example.com/wp-content/themes/your-theme/images/lined_paper.png — путь к фону

9. Использование нескольких изображений в качестве фона

Цитата выглядит так:

Ей соответствует следующий код:


blockquote {

width: 450px;

background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');

border: 1px solid #ccc;

box-shadow: 1px 1px 1px #ccc;

font-style: italic;

}

blockquote:before{

position:absolute;

margin-top:-20px;

margin-left:-20px;

content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');

}

blockquote cite:before {

content: "\2014 \2009";

}

Как видите ничего сложного нет. На самом деле можно было и не приводить данные примеры. Вы сами можете делать свои цитаты уникальными, изменяя стили для blockquote и blockquote cite.

А на этом все.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2017 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика