Страница 2 из 2

Красивая цитата для вашего форума.

Добавлено: 16 мар 2013, 13:20
CabinetAdmin
Изображение
Такую цитату очень просто сделать обычным способом, кучей блочных элементов <div> с присвоенными им классами и прописанным CSS.
А можно сделать тоже самое, но только с помощью CSS3.

Для начала скачивайте архив с изображениями, распаковывайте и закачивайте файлы на форум:
a-beautiful-quote.rar
13.95 КБ 446 скачиваний

Для 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 -->
Добавляем лишь новый css, в самый конец темы стиля добавляете:

Код: Выделить всё

/* 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.

Re: Красивая цитата для вашего форума.

Добавлено: 17 июл 2013, 14:57
Dgene
[b]CabinetAdmin[/b], благодарю..., я убрала из кода некоторые элементы blockquote и заработало, изменения работают. За совет про blockquote div cite { благодарю, так действительно лучше.

Re: Красивая цитата для вашего форума.

Добавлено: 30 авг 2013, 20:45
Wanderer3000
Почему такая байда получается??? :((
Что не так?
http://s6.hostingkartinok.com/uploads/i ... 88d12a.jpg

Re: Красивая цитата для вашего форума.

Добавлено: 30 авг 2013, 21:31
Wanderer3000
Извиняюсь, разобрался! Сам тупанул! :)) Удалите сообщение.

Re: Красивая цитата для вашего форума.

Добавлено: 24 дек 2013, 16:11
Галина
А эта цитата работает в БЫСТРОЙ цитате? У меня она возможна только в общей цитате. Но, сейчас у меня что-то напутано в ббкодах текста, поэтому, возможно, это может быть причиной неотображения.

Re: Красивая цитата для вашего форума.

Добавлено: 24 дек 2013, 16:30
CabinetAdmin
Это обычная цитата, разница только в наборе стилей.

Re: Красивая цитата для вашего форума.

Добавлено: 24 дек 2013, 19:43
Галина
CabinetAdmin писал(а):Это обычная цитата, разница только в наборе стилей.
Значит в быстрой цитате она не работает? А жаль... Ею чаще пользуются.

Re: Красивая цитата для вашего форума.

Добавлено: 25 дек 2013, 15:08
CabinetAdmin
Почему не работает? Какая разница быстрая цитата или нет, набор стилей у них один и тот же.

Re: Красивая цитата для вашего форума.

Добавлено: 21 мар 2014, 15:39
Dgene
Добрый день. Подскажите, пожалуйста как подтянуть основной текст к цитате. После самой цитаты, слишком большой интервал.
http://storage7.static.itmages.ru/i/14/ ... d02cef.png
Вначале нашла код:

Код: Выделить всё

margin: 0em 1px 0 5px;
Подтянула, а вот после цитаты остается слишком много пустого места.
Извините, недоступен код IMG поэтому ссылкой картинку пришлось сделать.

Re: Красивая цитата для вашего форума.

Добавлено: 21 мар 2014, 16:13
CabinetAdmin
Найдите там же, чуть ниже, - padding: 20px; и поменяйте на padding: 20px 20px 0px 20px;. Третья цифра (та которая 0), это отступ снизу.

Re: Красивая цитата для вашего форума.

Добавлено: 21 мар 2014, 16:57
Dgene
Искренне благодарю, всё получилось

Красивая цитата для вашего форума.

Добавлено: 24 окт 2018, 15:21
Иринка
Коряво все получилось((( и главное с телефона норм, а с компа вот такой ужас(
Красивая цитата для вашего форума. - цитирование.jpg
Красивая цитата для вашего форума. - цитирование.jpg (15.5 КБ) 1263 просмотра

Красивая цитата для вашего форума.

Добавлено: 24 окт 2018, 16:43
CabinetAdmin
Это из-за разницы в структуре в разных версиях phpbb.
Вам нужно в добавляемых стилях в некоторых местах после blockquote добавить >, начиная со второго, так:

Код: Выделить всё

blockquote > div {
и до самого конца. У последних так:

Код: Выделить всё

blockquote.uncited > div {
и

Код: Выделить всё

blockquote.uncited > div:before {
Т.е. символ > даёт понять браузеру, что эти стили должны применяться только к элементу div который идёт сразу после blockquote. То что отмечено стрелкой, это тоже элемент div, но он расположен внутри <cite>, после этой этой правки стили к этому блоку применяться больше не будут.

Красивая цитата для вашего форума.

Добавлено: 26 окт 2018, 08:17
Иринка
CabinetAdmin писал(а): Вам нужно в добавляемых стилях в некоторых местах после blockquote добавить >, начиная со второго, так:
Спасибо Вам большое за помощь, все встало на места, но вот еще какая проблемка вылезла)
Красивая цитата для вашего форума. - Безымянный.jpg

Красивая цитата для вашего форума.

Добавлено: 26 окт 2018, 16:07
CabinetAdmin
Хм... Вроде такого кода не было... В blockquote > div cite { найти z-index: 100; и задать 1, вместо 100.