Такую цитату очень просто сделать обычным способом, кучей блочных элементов
А можно сделать тоже самое, но только с помощью CSS3.
Для начала скачивайте архив с изображениями, распаковывайте и закачивайте файлы на форум:
Для prosilver
Мы не меняем стандартный bbcode цитата (шаблон
Добавляем лишь новый css, в самый конец темы стиля добавляете:
Изменить цвет текста или размер можно в блоке:
Не забудьте прописать пути для изображений в css.
Для subsilver2
У стандартного subsilver2 bbcode цитата выглядит так (шаблон
В конец темы стиля добавляете:
Изменить цвет текста или размер можно в блоке:
Не забудьте прописать пути для изображений в css.
<div>
с присвоенными им классами и прописанным CSS.А можно сделать тоже самое, но только с помощью CSS3.
Для начала скачивайте архив с изображениями, распаковывайте и закачивайте файлы на форум:
Для prosilver
Мы не меняем стандартный bbcode цитата (шаблон
bbcode.html
):
Код: Выделить всё
<!-- BEGIN quote_username_open --><blockquote><div><cite>{USERNAME} {L_WROTE}:</cite><!-- END quote_username_open -->
<!-- BEGIN quote_open --><blockquote class="uncited"><div><!-- END quote_open -->
<!-- BEGIN quote_close --></div></blockquote><!-- END quote_close -->
Код: Выделить всё
/* Quote on CSS3 */
blockquote {
font-size: 0.95em;
margin: 0em 1px 0 5px;
overflow: hidden;
color: #797971;
font-family: georgia;
font-style: italic;
min-height: 35px;
padding: 20px;
background: none;
border: 0;
}
blockquote div {
margin-top: -5px;
border: 1px solid #0076B4;
background: url("путь до файла/spback.png") bottom left repeat-x #FFFFFF;
padding: 20px 20px 5px 30px;
position: relative;
}
blockquote div:before {
content: '';
position: absolute;
background: url("путь до файла/openq.png") top left no-repeat transparent;
width: 16px;
height: 16px;
top: 23px;
left: 5px;
}
blockquote div:after {
content: '';
position: absolute;
background: url("путь до файла/closeq.png") top left no-repeat transparent;
width: 16px;
height: 16px;
right: 5px;
bottom: 5px;
}
blockquote div cite {
font-style: normal;
font-weight: bold;
display: block;
font-size: 0.9em;
color: #fff;
background: url("путь до файла/qhm.png") top left repeat-x transparent;
height: 32px;
line-height: 24px;
position: absolute;
top: -14px;
text-shadow: #000000 1px 1px;
left: -1px;
}
blockquote div cite:before {
content: '';
position: absolute;
background: url("путь до файла/qho.png") no-repeat 0px 0px transparent;
width: 31px;
height: 39px;
left: -31px;
top: 0px;
}
blockquote div cite:after {
content: '';
background: url("путь до файла/qhc.png") no-repeat 0px 0px transparent;
position: absolute;
right: -10px;
width: 10px;
height: 32px;
}
blockquote.uncited div {
padding: 10px 20px 5px 30px;
}
blockquote.uncited div:before {
top: 15px;
}
blockquote {
.font-size: 0.95em;
- размерcolor: #797971;
- цветfont-family: georgia;
- имя шрифтаfont-style: italic;
- начертаниеНе забудьте прописать пути для изображений в css.
Для subsilver2
У стандартного subsilver2 bbcode цитата выглядит так (шаблон
bbcode.html
):
Код: Выделить всё
<!-- BEGIN quote_username_open -->
<div class="quotetitle">{USERNAME} {L_WROTE}:</div><div class="quotecontent">
<!-- END quote_username_open -->
<!-- BEGIN quote_open -->
<div class="quotetitle"><b>{L_QUOTE}:</b></div><div class="quotecontent">
<!-- END quote_open -->
<!-- BEGIN quote_close -->
</div>
<!-- END quote_close -->
Код: Выделить всё
/* Quote on CSS3 */
.quotetitle {
background: url("путь до файла/qhm.png") top left repeat-x transparent;
height: 32px;
padding: 0px 20px 0px 20px;
position: relative;
margin: 10px 10px 0px 30px;
display: inline-block;
border: 0;
top: 20px;
left: 20px;
z-index: 9;
line-height: 24px;
color: #fff;
text-shadow: #000000 1px 1px;
font-size: 0.9em;
font-weight: bold;
font-style: normal;
}
.quotetitle:before {
content: '';
position: absolute;
background: url("путь до файла/qho.png") no-repeat 0px 0px transparent;
width: 31px;
height: 39px;
left: -31px;
top: 0;
}
.quotetitle:after {
content: '';
background: url("путь до файла/qhc.png") no-repeat 0px 0px transparent;
position: absolute;
right: -10px;
width: 10px;
height: 32px;
}
.quotecontent {
margin: 0px 10px 10px 30px;
padding: 20px 10px 10px 30px;
border: 1px solid #0076B4;
background: url("путь до файла/spback.png") bottom left repeat-x #FFFFFF;
position: relative;
overflow: hidden;
color: #797971;
font-size: 12px;
font-style: italic;
min-height: 35px;
}
.quotecontent:before {
content: '';
position: absolute;
background: url("путь до файла/closeq.png") top left no-repeat transparent;
width: 16px;
height: 16px;
top: 20px;
left: 5px;
}
.quotecontent:after {
content: '';
position: absolute;
background: url("путь до файла/openq.png") top left no-repeat transparent;
width: 16px;
height: 16px;
right: 5px;
bottom: 5px;
}
.quotecontent {
.color: #797971;
- цветfont-size: 12px;
- размерfont-style: italic;
- начертаниеНе забудьте прописать пути для изображений в css.
Комментарии: 28
[b]CabinetAdmin[/b], благодарю..., я убрала из кода некоторые элементы blockquote и заработало, изменения работают. За совет про blockquote div cite { благодарю, так действительно лучше.
- Вложения
-
- pro CSS2.zip
- 14.89 КБ 331 скачивание
- Wanderer3000
- Сообщения: 3
- Зарегистрирован: 31 май 2013, 22:25
- Пол: Муж
Почему такая байда получается??? :((
Что не так?
http://s6.hostingkartinok.com/uploads/i ... 88d12a.jpg
Что не так?
http://s6.hostingkartinok.com/uploads/i ... 88d12a.jpg
- Wanderer3000
- Сообщения: 3
- Зарегистрирован: 31 май 2013, 22:25
- Пол: Муж
Извиняюсь, разобрался! Сам тупанул! :)) Удалите сообщение.
- Галина
- Сообщения: 23
- Зарегистрирован: 28 фев 2013, 09:50
- Пол: Жен
А эта цитата работает в БЫСТРОЙ цитате? У меня она возможна только в общей цитате. Но, сейчас у меня что-то напутано в ббкодах текста, поэтому, возможно, это может быть причиной неотображения.
- Галина
- Сообщения: 23
- Зарегистрирован: 28 фев 2013, 09:50
- Пол: Жен
Значит в быстрой цитате она не работает? А жаль... Ею чаще пользуются.CabinetAdmin писал(а):Это обычная цитата, разница только в наборе стилей.
Добрый день. Подскажите, пожалуйста как подтянуть основной текст к цитате. После самой цитаты, слишком большой интервал.
http://storage7.static.itmages.ru/i/14/ ... d02cef.png
Вначале нашла код:
Подтянула, а вот после цитаты остается слишком много пустого места.
Извините, недоступен код IMG поэтому ссылкой картинку пришлось сделать.
http://storage7.static.itmages.ru/i/14/ ... d02cef.png
Вначале нашла код:
Код: Выделить всё
margin: 0em 1px 0 5px;
Извините, недоступен код IMG поэтому ссылкой картинку пришлось сделать.
Это из-за разницы в структуре в разных версиях phpbb.
Вам нужно в добавляемых стилях в некоторых местах после
и до самого конца. У последних так:
и
Т.е. символ
Вам нужно в добавляемых стилях в некоторых местах после
blockquote
добавить >
, начиная со второго, так:
Код: Выделить всё
blockquote > div {
Код: Выделить всё
blockquote.uncited > div {
Код: Выделить всё
blockquote.uncited > div:before {
>
даёт понять браузеру, что эти стили должны применяться только к элементу div
который идёт сразу после blockquote
. То что отмечено стрелкой, это тоже элемент div
, но он расположен внутри <cite>
, после этой этой правки стили к этому блоку применяться больше не будут.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
После обновления старого PHPBB форума
с версии 2 до версии 3.3.10 в меню форума появился link The team , при открытии которого выдает 404 ошибку... -
darkmode,расширение которое переключает светлый,темный режим форума.
Расширение работает и для гостей и имеет переключатель в navbar .
Недостатки:... -
Все привет, с Новым 2023 годом, здоровья и успехов во всем.
Ребят, такой вопрос, нужно было сделать форум, не стал делать чистую установку, просто... -
Добрый вечер.
Появилась необходимость запретить показ рекламы от гугл адсенс на некоторых страницах форума. Там есть такая функция как исключить... -
Расширение позволяющее добавить на форум свой стиль, скрипт или блок с произвольным содержимым. В расширении можно задать шапку форума, ico иконку...