1 Topic by PunBB

Topic: Оформление блока цитаты - blockquote

Оформить блок цитаты на punbb можно по разному, вот пару способов как это можно сдать в CSS
Для тега

<blockquote>текст</blockquote>

в css можно применить такой стиль (в файл стилей добавить след параметры CSS blockquote)

blockquote {
    display: block; 
    padding: 0 45px; /* Делаем отступы для кавычек */
    border: 10px solid #EFEFEF; /* Делаем рамку */
    border-width: 0 10px 0 10px; /* по бокам */
    margin: 10px 0; 
    color: #505050;
}
blockquote:before {
    content: "“"; /* Левая кавычка */
    font: 6em/66px Times, serif;  /* Указываем размер и высоту строки (уменьшенная, чтобы кавычка была приподнята) */
    color: #CFCFCF;
    float: left; /* Для обтекания текстом */
    margin-left: -45px; /* Углубляем кавычку в отступ блока */
    padding: 0 2px;
}
blockquote:after {
    content: "”"; /* Правая кавычка */
    font: 6em/36px Times, serif; /* Указываем размер и высоту строки (еще более уменьшенная, чтобы кавычка была сильнее приподнята) */
    color: #CFCFCF;
    float: right; /* Для обтекания текстом */
    margin-right: -45px; /* Углубляем кавычку в отступ блока */
}

На PunBB использовал такой

.entry-content blockquote{
    display: block; 
    border-width: 0 10px 0 0; /* по бокам */
    overflow:hidden;
    width:100%;
    font-style:italic;
    background:#D5E6F0;
    border-radius: 10px;
}
blockquote:before {
    content: "“"; /* Левая кавычка */
    font: 6em/50px Times, serif;  /* Указываем размер и высоту строки (уменьшенная, чтобы кавычка была приподнята) */
    color: #160F80;
    float: left; /* Для обтекания текстом */
    padding: 0 10px;
}

и

.codebox{
     background:#E6EEFA;
     border-color:#ddd;
     border-radius: 10px;
}

2 Reply by nihi1ist

  • nihi1ist
  • Добрый Санта
  • Offline
  • More info

Re: Оформление блока цитаты - blockquote

А где примеры?

nihi1ist's Website

3 Reply by kisa (edited by kisa 2018.02.09 05:51)

  • kisa
  • kisa
  • Extensions Developer
  • Offline
  • More info

Re: Оформление блока цитаты - blockquote

Я так сделал - чуть приукрашено, приятно и достаточно лаконично:

#.entry-content blockquote{overflow:hidden;width:100%}
.entry-content blockquote{
    margin: 7px 10px;
    display: block; 
    overflow:hidden;
    width:100%;
    font-style:italic;
    
}
blockquote:before {
   
    content: "“"; /* Левая кавычка */
    font: 5em/50px Arial, serif;  /* Указываем размер и высоту строки (уменьшенная, чтобы кавычка была приподнята) */
    color: #160F80;
    float: left; /* Для обтекания текстом */
    padding: 0 10px;
}

Вопрос: как бы его ещё вот такую штучку - торчащий уголок - добавить? Смотрел, где она есть (Quick Jump to Page,   Pun PM Notifier, другие форумы, где так именно цитата оформлена) - не понял   PunBB_INFO_ICQ/blush
https://punbb.softplaza.net/uploads/images/2018/02/6a3ede8898c1153b25c1d235991d0039.png
(это я макет нарисовал)

http://krokovod.org

kisa's Website