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

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

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

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

Класс .quote,

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

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

Свои стили

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

Картинка с фиксированной шириной

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

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

Нюансом такой верстки, является различная высота блока, которая сильно осложняет задачу. Мы не знаем, какой он будет высоты и поэтому не можем подготовить такую картинку, которая бы подходила во всех случаях, а так же мы не можем задать повторение картинки. Решение есть: 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, которое позволяет сдвигать фоновое изображение и скрывать за пределами блока.

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

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

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

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

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