DLE - цитата с кавычками сверху и снизу, две картинки background в один div

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

1. Простое оформление без картинок

DLE - цитата с кавычками сверху и снизу, две картинки background в один div


Начнем с самого простого, отступ слева и бордюр так же по левой стороне. Такую цитату можно сделать не имея вообще никаких навыков в CSS. Для этого открываем файл стилей и начинаем править: {THEME}/css/engine.css

1.1 Находим класс .quote, например, через поиск и стираем везде, где он принимает общий для разных блоков стиль (т.е. перечислен через запятую), например, как на картинке ниже.

В первом примере исходный вариант, а ниже так, как нужно сделать. Это необходимо для того, чтобы стили не дублировались и не конфликтовали с будущей обновленной цитатой:

DLE - цитата с кавычками сверху и снизу, две картинки background в один div


DLE - цитата с кавычками сверху и снизу, две картинки background в один div


1.2 Добавляем стиль и цитата готова.

.quote{
border-left: 1px solid #CCC;
padding: 0px 20px 0px 20px;
margin: 15px 0 0 30px;
font-style: italic;
font-size: 17px;
}


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

DLE - цитата с кавычками сверху и снизу, две картинки background в один div


3. Кавычки снизу и сверху

DLE - цитата с кавычками сверху и снизу, две картинки background в один div


Нюансом такой верстки, является различная высота блока, которая сильно осложняет задачу. Мы не знаем, какой он будет высоты и поэтому не можем подготовить такую картинку, которая бы подходила во всех случаях, а так же мы не можем задать повторение картинки. Решение есть: background + background-position

.quote{
background:
url(../images/quote2.png) -50px top no-repeat,
url(../images/quote2.png) 553px bottom no-repeat;
padding: 13px 55px 18px 65px;
margin: 15px 0 0 0px;
font-style: italic;
font-size: 15px;
}


разбираем background: применяется одна и так же картинка, где числами сокращенно обозначено свойство background-position, которое позволяет сдвигать фоновое изображение и скрывать за пределами блока.

DLE - цитата с кавычками сверху и снизу, две картинки background в один div


первое число в первой картинке (-50px) - позиция по правому краю, второе (top) - по вертикали. Из-за различной высоты блока, просто выровнял его по верхней части, а картинку сместил влево на 50 пикселей.

Именно поэтому шевроны стоят наоборот - не получится спрятать одну из сторон так, чтобы открывающая часть (двойной шеврон) стояла правильно (знаком меньше влево), а закрывающая, соответственно, наоборот - вправо. Смещая картинку в противоположную сторону мы решаем эту проблему

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

Вот и все, никаких манипуляций с движком! PSD + PNG вариант двух картинок можно скачать ниже:

Скачать quotes_pack.rar Размер: 31,83 Kb Скачиваний: 74


Кому интересно, php код находится по адресу: engine/classes/parse.class.php


Понравилась статья "DLE - цитата с кавычками сверху и снизу, две картинки background в один div" из раздела HTML/CSS, Решения для DLE? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 2543   Дата: 03-мая-2015, 17:42

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика