Главная » 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 и e-Commerce... Как я и обещал в прошлый раз, сегодня опишу процесс добавления товаров в интернет-магазин на базе плагина WP e-Commerce. Ручное добавление я буду исп...
Создаем интернет-магазин на WordPress и e-Commerce... Пошаговая инструкция по созданию интернет-магазина. Давно хотел открыть свой интернет-магазин, но положа руку на сердце признаюсь – было лениво этим ...
Показать информацию только администраторам WordPre... На одном из блогов на Wordpress у меня возникла необходимость показать определенную информацию только администраторам блога. Реализовал я это так: ...
Поиск “тормозов” в WordPress с помощью... Думаю, многие пользователи WordPress сталкивались с проблемой низкой скорости загрузки своих сайтов. Обычно, после некоторой оптимизации и настройки к...
This entry was posted in Wordpress and tagged , , , . Bookmark the permalink.

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

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

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

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

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