Как сделать красивое выделение цитаты

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

Поехали, скажу сразу что много ума здесь не нужно, чтобы это сделать, так что перейдем сразу к делу, просто делайте за мной и все будет ОК.

Вот что у нас должно получится с данного урока:

Вот здесь ваша будет цитата, и такое красивое выделение !!!

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

И ваш текст будет выделен, то-есть взят в рамочку. У вас сейчас на вашем сайте есть стандартное выделение, так вот, для того чтоб вам стандартное выделение свое отредактировать, вам необходимо сейчас создать запись и что-то написать, затем выделить её и нажать на кнопку которую я показал выше.

Так вы сможете посмотреть свою стандартную цитату и отредактировать её. Если вы его сделали, значит идем дальше, нам нужно определить какой класс у вас выводит эту цитату, как это узнать ?

Нажимаем на выделение цитаты правой кнопкой мыши, и жмем на «Посмотреть код элемента» в низу браузера появляется такое окно:

Нажмите на картинку и вы увидите, что я нажал на цитату,  появилось окно и справа у меня класс blockquote, который находится у меня в стилях, вы смотрите какой у вас, по скольку у всех по разному.

Узнали какой класс у вас отвечает за украшение ваших цитат, теперь смело можем идти в Внешние Редактор/Редактор, находим файл style.css и переходим к редактированию.

Открыли и нужно нажать сочетание клавиш Ctrl+F и появится у вас в верху строка поиска, в него вводите тот класс который вы только что нашли, в моем случае это blockquote, я его и буду искать:

Там где у вас содержимое нужно в писать этот код, то-есть заменить на:

1
2
3
4
5
6
7
8
9
10
11

{
    position: relative;
	padding: 15px 22px 12px 25px;
	margin: 16px 0 19px;
        box-shadow: 0.0em 0.2em 5px rgba(122,122,122,0.5);
	background: #f3f3f3;
	border: 1px solid #dfdfdf;
	border-left: 2px solid #3965a8;
	font: italic normal 14px Arial, sans-serif;
	color: #405778; }
}

И у вас получится такой же вывод цитат, как и у меня. Вы можете поковыряться в данном коде, кто не очень силен, лучше не рискуйте, а кто хоть немножко разбирается то можно поменять тени цвета и так дальше.

Думаю что этот урок был вам очень полезным, ставьте лайки, пишите комментарии если что-то не понятное.

С уважением Евгений Смецкий