Интересно? ЖМИ!!! 

Что ищем?
Все для Веб Мастера


Красивый вывод цитаты wordpress с помощью CSS

Данный материал предоставлен сайтом webomast.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

Красивый вывод цитаты wordpress с помощью CSS

Понятие цитаты в wordpress

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

Красивый вывод цитаты wordpress с помощью CSS

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

Красивый вывод цитаты wordpress с помощью CSS

 

  • Сам путь до файла style.css
  • Запрос в поиске. Поиск открывается нажатием клавиш CNTRL+F, а дальше вставляйте запрос.
  • Найденные строчки кода, они и нужны.

Меняем оформление.

Надо понять что именно вы хотите видеть. Я советую, ничего не придумывать никаких картинок и тому подобного. Максимум что можно сделать

  • Сменить фон.
  • Размер шрифта и его оформление.
  • Рамку (сплошную, прерывистую, точками), можно с одной стороны либо с двух.

Никаких картинок и тому подобного, иначе будет трудно их адаптировать, не нужны вам лишние проблемы. Предлагаю вам стандартный набор.

Разберем данный код по строчкам.

  1. Cам стиль для блока цитат с открывающейся скобкой.
  2. Цвет фона.
  3. Обводка, я сделал только слева, если есть желание, то можете сделать со всех сторон, либо же с двух.
  4. Тень блока.
  5. Отступы чтобы весь блок не прилипал к тексту статьи.
  6. Размер шрифта и его принадлежность.
  7. Стиль шрифта, я сделал курсив.
  8. Цвет шрифта.
  9. Тень от текста.
  10. Закрывающая скобка стиля.

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

На этом все, Используйте на здоровье.

 

Скачать любой софт - с помощью загрузчика на высокой скорости...
Предлагаем Вам скачать и установить программу для поиска и скачивания медиафайлов, игр и необходимого софта. Программа позволит Вам загружать любые фильмы, музыку, программы и многое другое без каких-либо ограничений. Вдобавок данный загрузчик поддерживает огромное количество открытых торрент-трекеров. Также доступен онлайн просмотр фильмов, прослушивание музыки с помощью встроенного медиапроигрывателя. 
В А Ж Н О!!! При установке загрузчика устанавливается дополнительное ПО, если в нем нет необходимости, то снимите галочки в процессе установки загрузчика.

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

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

1 × 2 =

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

| |

Подписаться на рассылку

Подпишитесь на обновления и новые публикации.


Авторерайт статей

Нужен уникальный контент? Есть выход…

Программа для автоматического рерайта текстов. ЖМИ

Популярное на сайте