Dipler.ru

Мы поделимся с тобой своим бесценным опытом

У нас ты найдешь только нужный и полезный контент

Информационный блог, посвящённый различным темам

Как изменить оформление цитат в DLE?

Как изменить оформление цитат в DLE?

В последнее время я заметил, что многие люди ищут различные способы кастомизировать цитаты на своем сайте DLE. Я и сам задавался вопросом, как бы это сделать правильно, не прибегая к сложным методам. Знаю, что в стандартном шаблоне Default, в файле engine.css, есть стили для цитат, которые можно использовать или отредактировать под себя. Но существует один подводный камень, который не дает многим людям добиться желаемого результата.

Так в чем же заключается проблема? Если посмотреть на код, то можно увидеть, что за вывод цитат отвечает два элемента div, с классами title_quote и quote. Первый выводит фразу «Цитата» и никнейм пользователя, сообщение которого было процитировано, а второй показывает текст цитируемого сообщения. На первый взгляд все просто, но когда Вы дойдете до написания стилей цитат, то поймете, что хорошо было бы объединить эти элементы в родительский блок, дабы задать им общие стили (фон, обрамление со скругленными краями, размер текста и тому подобное). Можно конечно все это реализовать отдельно для каждого элемента, но я считаю, что это немного неправильно.

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

Изменения будут применены к цитатам в комментариях.

1. Открываем файл engine/classes/parse.class.php

2. Ищем код:

while( preg_match( "#\[quote\](.+?)\[/quote\]#is", $source ) ) { $source = preg_replace( "#\[quote\](.+?)\[/quote\]#is", "<!--QuoteBegin--><div class=\"quote\"><!--QuoteEBegin-->\\1<!--QuoteEnd--></div><!--QuoteEEnd-->", $source ); }  while( preg_match( "#\[quote=([^\]|\[|<]+)\](.+?)\[/quote\]#is", $source ) ) { $source = preg_replace( "#\[quote=([^\]|\[|<]+)\](.+?)\[/quote\]#is", "<!--QuoteBegin \\1 --><div class=\"title_quote\">{$lang['i_quote']} \\1</div><div class=\"quote\"><!--QuoteEBegin-->\\2<!--QuoteEnd--></div><!--QuoteEEnd-->", $source ); }

и заменяем его на:

while( preg_match( "#\[quote\](.+?)\[/quote\]#is", $source ) ) { $source = preg_replace( "#\[quote\](.+?)\[/quote\]#is", "<!--QuoteBegin--><blockquote class=\"quote-block\"><div class=\"quote\"><!--QuoteEBegin-->\\1<!--QuoteEnd--></div></blockquote><!--QuoteEEnd-->", $source ); }  while( preg_match( "#\[quote=([^\]|\[|<]+)\](.+?)\[/quote\]#is", $source ) ) { $source = preg_replace( "#\[quote=([^\]|\[|<]+)\](.+?)\[/quote\]#is", "<!--QuoteBegin \\1 --><blockquote class=\"quote-block\"><div class=\"title_quote\">{$lang['i_quote']} \\1</div><div class=\"quote\"><!--QuoteEBegin-->\\2<!--QuoteEnd--></div></blockquote><!--QuoteEEnd-->", $source ); }

В чем отличия? В данном коде объединены два элемента div, имеющие классы title_quote и quote, в один родительский элемент <blockquote> с классом quote-block. Тег <blockquote> был выбран не случайно. Браузер знает, что этот тег отвечает за вывод цитат, следовательно мы получаем правильную верстку.

3. Теперь для класса qoute-block можно прописывать свои стили, и цитаты у нас приобретут аккуратный вид. В качестве примера дам Вам стили цитат с этого сайта.

/* Стили для родительского элемента */

.quote-block {    
    background-color: #ebebeb;    
    border: 1px solid rgba(183, 185, 186, 0.45);    
    border-radius: 5px;    
    padding: 10px 15px;    
    margin-top: 10px;    
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* Стили для верхней части цитаты */

.title_quote {    
    display: flex;   
    align-items: center;   
    padding-bottom: 5px;    
    color: #383c3e;    
    border-bottom: 1px solid #e6e6e6;
}

.title_quote p {    
    margin-bottom: 0;    
    padding-right: 5px;
}

/* Делаем вывод иконки цитаты с помощью Web шрифта Font Awesome */

.title_quote p:before {    
    content: '\f10e';    
    font-family: 'Font Awesome 5 Free';    
    font-weight: 900;    
    padding-right: 10px;    
    font-size: 10pt;    
    opacity: 0.8;
}

/* Стили для нижней части цитат */

.quote {    
    font-style: italic;    
    color: #6c757d;    
    font-size: 11pt;    
    padding-top: 5px;
}

Демонстрация выше написанных стилей:

[!] После проделанной работы необходимо выполнить операцию перестраивания комментариев. Для этого переходим в админ панель, затем переходим в Список всех разделов, во вкладке Утилиты переходим в настройку Перестроение публикаций, листаем страницу немного вниз и ищем пункт Перестроение комментариев.

На этом все. Спасибо за внимание. Буду рад увидеть Ваши вариации стилей в комментариях.

SaNeR

Автор: SaNeR

Автор: SaNeR

Опубликовано: 28.08.2018

874

0
0
+55

Информация:

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