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

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

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

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

Класс .quote,

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

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

quote unistyle - DLE — цитата с кавычками сверху и снизу, две картинки background в один div
Класс .quote в DLE до правок
quote unistyle2 - DLE — цитата с кавычками сверху и снизу, две картинки background в один div
Класс .quote в DLE после правок

Свои стили

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

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

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

dle quote primitive variant - DLE — цитата с кавычками сверху и снизу, две картинки background в один div
Фиксированная цитата и картинка в качестве фона

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

dle quote dve kartinki background v odin div - 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, которое позволяет сдвигать фоновое изображение и скрывать за пределами блока.

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

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

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

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

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

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

Читайте также

Похожие записи

DLE — быстрый переезд на хостинг не используя инсталятор
Установка движка DLE на хостинг происходит через специальный файл — инсталятор, в котором необходимо заполнить все поля (имя базы данных,...
DLE — монетизируем загруженные в новостях файлы через отдельный домен
Как много у вас загруженных файлов (приложений к постам) не считая картинок? У меня много и придумал способ их монетизировать!...
DLE — мой первый модуль, как написать свой модуль Datalife Engine
Как ни пытался уйти с DLE из-за того, что он платный, а на рынке существует куча бесплатных аналогов, не получается...
DLE на HTTPS — основные проблемы и их решение
Столкнулся с рядом проблем, когда наконец-то решился перебраться на https. Не появлялись некоторые картинки, видео, а в адресной строке писалось,...
DLE — Модуль форума SimpleBB 1.1
Полноценный форум с единой регистрацией и авторизацией, единым акаунтом и ссылками на профиль от dle \»user/username/\» на движке SimpleBB 1.1...

Комментарии

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

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