Главная » Wordpress » Оформление цитат (blockquote) в WordPress при помощью CSS

Оформление цитат (blockquote) в WordPress при помощью CSS

Часто возникает необходимость выделить в блоге определенную часть текста. Для этих целей часто используются цитаты – <blockquote>. В данном посте я покажу вам несколько вариантов их оформления.

Вариант 1

цитата Wordpress CSS blockquote  wordpress

Код для добавления  в style.css вашей темы:

blockquote {
    margin: 1em 3em;
    color: #999;
    border-left: 2px solid #999;
    padding-left: 1em; }

Вариант 2

цитата Wordpress CSS blockquote  wordpress

Код для добавления в style.css вашей темы:

blockquote {
    margin: 1em 3em;
    padding: .5em;
    background-color: #f6ebc1; }
blockquote p {
    margin: 0; }

Вариант 3

цитата Wordpress CSS blockquote  wordpress

Код для добавления в style.css вашей темы:

blockquote {
    margin: 1em 3em;
    padding: .5em 1em;
    border-left: 5px solid #fce27c;
    background-color: #f6ebc1; }
blockquote p {
    margin: 0; }

Вариант 4

цитата Wordpress CSS blockquote  wordpress

Код для добавления в style.css вашей темы:

blockquote {
    margin: 1em 2em;
    border-left: 1px dashed #999;
    padding-left: 1em; }
blockquote p:first-letter {
    float: left;
    margin: .2em .3em .1em 0;
    font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
    font-size: 220%;
    font-weight: bold; }
blockquote p:first-line {
    font-variant: small-caps; }

Вариант 5

цитата Wordpress CSS blockquote  wordpress

Код для добавления в style.css вашей темы:

blockquote {
    color: #66a;
    font-weight: bold;
    font-style: italic;
    margin: 1em 3em; }
blockquote p:before {
    content: '"'; }
blockquote p:after {
    content: '"'; }

Похожие записи
Эффективная антиспам защита для WordPress... Ура! Я полностью избавился от спама в своем блоге на Wordpress. Сразу скажу, что я против использования капчи в комментариях. Если посетитель решил ...
Изменение URL результатов поиска в WordPress... На блоге Дмитрия Донченко подсмотрел интересную функцию для замены URL результатов поиска по блогу на WordPress. Для наглядности приведу примеры URL ...
Не работают рубрики в WordPress 3.4... После обновления движка Wordpress до версии 3.4, у меня возникла проблема с открытием категорий новостей.  Пришлось поочередно отключать все пл...
Добавление альбома Picasa в WordPress с помощью пл... Нашёл замечательный плагин, для добавления альбома Google Picasa на блог под управлением Wordpress. Этот плагин - PWA+PHP (Basic Version - я использую...
This entry was posted in Wordpress and tagged , , , . Bookmark the permalink.

1 комментарий: Оформление цитат (blockquote) в WordPress при помощью CSS

  1. Агент 00x говорит:

    Спасибо за подробный мануал! Но я не люблю готовые варианты, всегда делаю что-нибудь свое. Разобрался-то сразу, чего там найти нужный кусок css, так из-за кэша ничего не выходило, вот полез гуглить. Надеюсь мой коммент кому-нибудь поможет)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *