Изображение
Такую цитату очень просто сделать обычным способом, кучей блочных элементов <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.
Комментарии: 28

Bukovka_ 30 мар 2013, 15:58 Сообщение

Классная цитата. :Bravo: Только может стоит дописать, что в теме стиля надо удалить стандартный квоттитл и квотконтент, иначе новая цитата не захочет отображаться. :oooo:

И еще вот так получается в суперцитате :( (потому что ник - это ссылка). Не подскажете, как прописать в этой цитате вид ссылки, чтобы она тоже была белого цвета?

Изображение
  • 0

CabinetAdmin 30 мар 2013, 18:29 Сообщение

Если стили добавлены в конец темы, то исполнятся будут в первую очередь будут именно они, по крайней мере должны.
Но если мало ли, почему-то форум не хочет выполнять именно эти стили, то для каждого класса можно дописать класс "родителя", для subsilver:

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

/* Quote on CSS3 */
.postbody .quotetitle {
   background: url("путь до файла/qhm.png") top left repeat-x transparent;
...
И для prosilver:

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

/* Quote on CSS3 */
.content blockquote {
   font-size: 0.95em;
...
Bukovka_ писал(а):Не подскажете, как прописать в этой цитате вид ссылки, чтобы она тоже была белого цвета?
Добавьте:

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

.quotetitle a {
	color: #fff;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Bukovka_ 31 мар 2013, 00:11 Сообщение

Спасибо большое. Теперь все идеально. :Rose:
  • 0

Bukovka_ 31 мар 2013, 13:18 Сообщение

Сделала для другого стиля в красном цвете. Может кому еще пригодится.

Изображение


Обводку с синей на красную меняем в этом куске (выделено зеленым цветом)

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

.quotecontent {
   margin: 0px 10px 10px 30px;
   padding: 20px 10px 10px 30px;
   border: 1px solid #0076B4; /* обводку меняем на красную, например  #cc0000  */
   background: url("путь до файла/spback.png") bottom left repeat-x #FFFFFF;
   position: relative;
   overflow: hidden;
   color: #797971; 
   font-size: 12px;
   font-style: italic;
   min-height: 35px;
}
  • 0
Вложения
a-beautiful-quote-red.rar
26.29 КБ 336 скачиваний

silver073000Василий 05 май 2013, 01:43 Сообщение

Попробовал поставить эту цитату и обнаружил такую вещь: если написать цитату без переноса строки в таком виде

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

Косяк.[quote]Та-ра-рам[/quote]
то верхняя часть её съезжает.
Изображение

И чем длиннее текст перед цитатой, тем дальше уезжает верх этой цитаты.

Стиль subsilver2-modded.
  • 0

CabinetAdmin 05 май 2013, 06:51 Сообщение

Проверил на чистом subsilver2-modded - работает.

Проверяйте установку... Если есть возможность дайте ссылку, посмотрим, может быть у вас в стиле код цитаты другой...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 07 май 2013, 02:39 Сообщение

Может, так потому, что у меня форум в другой системе, хотя все html-модификации и JavaScript/jQuery взяты именно с вашего сервиса и отлично работают. Не ругайте сильно :oops: Ссылка вот http://gff.5nx.org/portal.php
  • 0

CabinetAdmin 07 май 2013, 15:19 Сообщение

А ведь действительно, мне не пришло в голову проверить работоспособность цитаты с написанием без переноса строки...

Могу посоветовать делать перенос строки перед вставкой цитаты.
Могу посоветовать вместо:

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

display: inline-block;
использовать:

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

display: block;
Тогда цитата будет всегда корректно работать, но заголовок будет на всю её ширину. Есть ещё советы, но вам они не пригодятся.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 07 май 2013, 19:23 Сообщение

Премного благодарен :) Замена помогла :) Ну а то, что верх цитаты растянуло на всю ширину страницы, "вылечил", может, и не правильно, но не растягивает верхушку. Изображение qhm.png растянул на 250 точек, закруглив правую сторону, и поставил для него no-repeat. Ну а qhc.png просто сделал прозрачным.
  • 0

CabinetAdmin 07 май 2013, 19:34 Сообщение

Минусом может быть только слишком длинное имя, которое может не влезть в поле, но 250 пикселей наверно должно всё же хватить.

Но за решение спасибо:)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 07 май 2013, 19:47 Сообщение

CabinetAdmin писал(а):Минусом может быть только слишком длинное имя, которое может не влезть в поле, но 250 пикселей наверно должно всё же хватить.
Длинных имён у меня нет, вроде ограничилдл длину ника до 20 символов. Не помню точно.
И ещё раз выражаю благодарность, что, несмотря на то, что мой форум в другой системе, всё же подсказали решение, как исправить этот недочёт :)
  • 0

CabinetAdmin 07 май 2013, 19:51 Сообщение

В какой системе форум не имеет никакого значения, главное чтобы он был на phpBB... Чем сможем поможем, заходите, спрашивайте если что:)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

DgeneOksana 17 июл 2013, 13:36 Сообщение

[quote="CabinetAdmin"]Если стили добавлены в конец темы, то исполнятся будут в первую очередь будут именно они, по крайней мере должны. [/quote]

Не работает, к сожалению данная фишка

[url=http://forumimage.ru/show/8714339][img]http://forumimage.ru/thumbs/20130717/13 ... 957430.jpg[/img][/url]

Для наглядности прикрепляю файл темы, пожалуйста подскажите, в чем ошибка и как можно подправить тему, очень уж красивая цитата, но сожалению код не работает. В чем ошибка?
  • 0
Вложения
pro scc.zip
15.11 КБ 288 скачиваний

CabinetAdmin 17 июл 2013, 14:43 Сообщение

Dgene » 45 минут назад писал(а):В чем ошибка?
Ошибок нет, может быть во всём виноват кеш браузера?

зы. Перешёл на ваш форум, тот что в профиле, в одной из тем нашёл цитату, она работает, но немного не корректно отображается. Почему не разбирался, возможно из-за стиля или ваших предыдущих правок, можно поправить отредактировав blockquote div cite { изменить значение left: -1px; на left: 18px;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы