Создать цитату такого вида можно двумя способами:
[hide]Стилизация цитат на phpBB Guru[/hide]
Здесь будет рассмотрен вариант только на CSS3.
Стили на основе prosilver
Открываем тему вашего стиля, находим:
Меняем на:
Чуть ниже находим:
В приведённом блоке нам не нужна часть, отвечающая за цвет всего блока цитаты в другой цитате. Меняем на:
Находим:
и целиком удаляем.
Далее находим:
Меняем на:
Т.е. добавляем div после класса
И сразу же после замены ставим:
Ищем:
Меняем на:
Чуть ниже находим и удаляем:
Для стилей на основе subsilver2
В теме вашего стиля находим:
Меняем на:
В самый конец темы ставим:
Всё. Ничего сложного. Не забудьте указать путь до изображения в нашем CSS.
Наше облако:
- Первый - создать нарисованные картинки со всеми закруглениями, телом цитаты и конечно же облака. Далее отредактировав шаблон
bbcode.html
, добавить необходимое количество блоков и к каждому из них, с помощью css, присвоить необходимые нам изображения. - Второй - создать только одно изображение облака. И ничего не изменяя в шаблонах изменить внешний вид с помощью CSS3.
[hide]Стилизация цитат на phpBB Guru[/hide]
Здесь будет рассмотрен вариант только на CSS3.
Стили на основе prosilver
Открываем тему вашего стиля, находим:
Код: Выделить всё
/* Quote block */
blockquote {
background: #ebebeb none 6px 8px no-repeat;
border: 1px solid #dbdbdb;
font-size: 0.95em;
margin: 0.5em 1px 0 25px;
overflow: hidden;
padding: 5px;
}
Код: Выделить всё
/* Quote block */
blockquote {
background: transparent none 0px 0px no-repeat;
border: 0px solid #dbdbdb;
font-size: 0.95em;
margin: 0.5em 1px 0 25px;
overflow: hidden;
padding: 35px 5px 10px 40px;
}
Код: Выделить всё
blockquote blockquote {
/* Nested quotes */
background-color: #bababa;
font-size: 1em;
margin: 0.5em 1px 0 15px;
}
Код: Выделить всё
blockquote blockquote {
/* Nested quotes */
font-size: 1em;
margin: 0.5em 1px 0 15px;
}
Код: Выделить всё
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #e4e4e4;
}
Далее находим:
Код: Выделить всё
blockquote.uncited {
padding-top: 25px;
}
Код: Выделить всё
blockquote.uncited div {
padding-top: 25px;
}
.uncited
. И сразу же после замены ставим:
Код: Выделить всё
blockquote div {
background: url("{T_THEME_PATH}/images/quote.gif") no-repeat 6px 8px #EBEADD;
padding: 5px;
border: 1px solid #DBDBCE;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Код: Выделить всё
/* Quote block */
blockquote {
background-color: #EBEADD;
background-image: url("{T_THEME_PATH}/images/quote.gif");
border-color:#DBDBCE;
}
Код: Выделить всё
/* Quote block */
blockquote {
background-image: url("путь до изображения/quoteo.png");
}
Код: Выделить всё
blockquote blockquote {
/* Nested quotes */
background-color:#EFEED9;
}
blockquote blockquote blockquote {
/* Nested quotes */
background-color: #EBEADD;
}
Для стилей на основе subsilver2
В теме вашего стиля находим:
Код: Выделить всё
.postbody {
font-size: 1.3em;
line-height: 1.4em;
font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
}
Код: Выделить всё
.postbody {
font-size: 1.3em;
line-height: 1.4em;
font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
z-index: 1;
position: relative;
}
Код: Выделить всё
.quotetitle {
margin: 30px 5px 0 40px;
background-color: #EBEADD;
position: relative;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.quotecontent {
margin: 0 5px 10px 40px;
background-color: #EBEADD;
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}
.quotetitle:before {
content: '';
position: absolute;
left: -40px;
top: -35px;
background-image: url("путь до изображения/quoteo.png");
width: 255px;
height: 116px;
z-index: -1;
}
Всё. Ничего сложного. Не забудьте указать путь до изображения в нашем CSS.
Наше облако:
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.
Похожие темы
-
После обновления старого PHPBB форума
с версии 2 до версии 3.3.10 в меню форума появился link The team , при открытии которого выдает 404 ошибку... -
darkmode,расширение которое переключает светлый,темный режим форума.
Расширение работает и для гостей и имеет переключатель в navbar .
Недостатки:... -
Все привет, с Новым 2023 годом, здоровья и успехов во всем.
Ребят, такой вопрос, нужно было сделать форум, не стал делать чистую установку, просто... -
Добрый вечер.
Появилась необходимость запретить показ рекламы от гугл адсенс на некоторых страницах форума. Там есть такая функция как исключить... -
Расширение позволяющее добавить на форум свой стиль, скрипт или блок с произвольным содержимым. В расширении можно задать шапку форума, ico иконку...