В 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
Комментарии