Добавляем цитатам визуальной индивидуальности

Многие владельцы форумов, только создавая свой проект, часто задумываются над вопросами дизайна. Хочется выделиться, хочется сделать что-то особенное, грандиозное и обязательно очень красивое. Данное стремление, без сомнения, похвально, ведь человек может проявить себя, попробовать в новой деятельности (дизайнера, верстальщика), а самое главное — ресурс будет запоминающимся, со своим духом, выраженным через визуальное оформление.

Однако список правок в стили форума, как правило, всегда одинаков: поменять цвет фона блоков, текста, возможно поставить шапку от своего же сайта, поменять некоторые иконки или кнопки, и хотя и здесь можно развернуться, я бы хотел обратить внимание читателей на элемент, о котором чаще всего забывают — на блок цитат.

Цитата — обязательный элемент любого форумного общения, без них было бы сложно связывать сообщения, реплики, было бы сложно отвечать на длинные высказывания, когда есть желание прокомментировать лишь некоторые его части.

Исходя из того, что цитаты используются повсеместно, при изменении дизайна надо помнить следующее:

• Текст должен хорошо восприниматься глазом, цвета фона и текста — сочитаться
• Цитаты могут быть вложенными, поэтому желательно, что бы в зависимости от уровня вложенности визуализация как-то менялась
• Внешний вид должен передавать смысл того, что заключённый в блок текст есть ни что иное как цитата

Каждый волен сам для себя решить, какой же дизайн максимально подходит под эти пункты, я лишь покажу пример реализации общей идеи на основе видоизменения стандартной цитаты стиля Prosilver.
Для себя я свёл три вышеозначенных пунтка к вот такому незамысловатому внешнему виду:

Цвет фона и текста я оставил теми же, закруглил углы и повесил сзади облачко, что символизирует словосочетание «Облако цитаты».

Теперь же давайте перейдём к самому интересному (и, для кого-то, сложному) — непосредственно к вёрстке.
Поскольку CSS3 вошёл в наши дома лишь частично, то для создания закругления придётся приложить несколько больше усилий, чем подразумевала бы эта спецификация: используем стандартный способ вёрстки подобных блоков в 3 вложенных друг в друга div-тега.

Из приведнного выше рисунка можно понять, какую роль будет нести каждый из этих блоков: первый (внешний) будет содержать изображение левой части (в данном случае — левого верхнего угла), второй (вложенный в первый) — изображение правой части, а третий — внутренний — тайл-изображение для безразмерной средней части. Ничего сложного. Подобную технику мы используем для верхней закруглённой части и для нижней, а вот средняя — часть, в которой будет содержаться сам контент, оформим чистым CSS.
Но всё же будем идти в ногу со временем и абстагируемся от очень старых браузеров, которые не понимают png-файлы с прозрачностью — для закруглений используем именно их.

Исходя из описанной модели вёрстки можно заключить, что в итоге нам потребуется 7 изображений. Названия я взял следующие:

quote_tl.png  (tl обозначает top left — левый верхний), quote_tr.png , quote_t.png  , quote_bl.png  , quote_br.png  , qoute_b.png — для создания блока и quoteo.png для облачка.

Напишем соответствующие классы:

.quote_tl {background:url("{T_THEME_PATH}/images/quote_tl.png") no-repeat scroll 0 0 transparent;height:15px}
.quote_tr {background:url("{T_THEME_PATH}/images/quote_tr.png") no-repeat scroll 100% 0 transparent;height:15px}
.quote_t  {background:url("{T_THEME_PATH}/images/quote_t.png") repeat-x scroll 0 0 transparent;height:15px;margin:0 15px}

.quote_bl {background:url("{T_THEME_PATH}/images/quote_bl.png") no-repeat scroll 0 0 transparent;height:15px}
.quote_br {background:url("{T_THEME_PATH}/images/quote_br.png") no-repeat scroll 100% 0 transparent;height:15px}
.quote_b  {background:url("{T_THEME_PATH}/images/quote_b.png") repeat-x scroll 0 0 transparent;height:15px;margin:0 15px}

.quote_surround {
	background:url("{T_THEME_PATH}/images/quote.gif") no-repeat scroll 3px 3px #EBEADD;
	border-left:1px solid #DBDBCE;
	border-right:1px solid #DBDBCE;
	margin:0;
	padding:5px;
}

Первый этап пройден, теперь давайте посмотрим на bbcode.html, в котором хранится код для BB-кодов, в частности и для цитат. Нас сейчас интересует блок

<!-- 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 -->

<blockquote style="background:transparent none;border:none">
	<div class="quote_tl"><div class="quote_tr"><div class="quote_t"></div></div></div>
		<div class="postmod-surround-qu1"><div>
			<cite>{USERNAME} {L_WROTE}:</cite>
			Здесь будет текст
		</div></div>
	<div class="quote_bl"><div class="quote_br"><div class="quote_b"></div></div></div>
</blockquote>

.qouteo {background:transparent url("{T_THEME_PATH}/images/quoteo.png") no-repeat;padding-left:10px;padding-top:20px}

<!-- BEGIN quote_username_open --><div class="qouteo"><blockquote style="background:transparent none;border:none"><div class="quote_tl"><div class="quote_tr"><div class="quote_t"></div></div></div><div class="quote_surround"><div><cite>{USERNAME} {L_WROTE}:</cite><!-- END quote_username_open -->
<!-- BEGIN quote_open --><div class="qouteo"><blockquote style="background:transparent none;border:none"><div class="quote_tl"><div class="quote_tr"><div class="quote_t"></div></div></div><div class="quote_surround"><div style="padding-top: 15px"><!-- END quote_username_open --><!-- END quote_open -->
<!-- BEGIN quote_close --></div></div><div class="quote_bl"><div class="quote_br"><div class="quote_b"></div></div></div></blockquote></div><!-- END quote_close -->

.quote_tl {background:url("{T_THEME_PATH}/images/quote_tl.png") no-repeat scroll 0 0 transparent;height:15px}
.quote_tr {background:url("{T_THEME_PATH}/images/quote_tr.png") no-repeat scroll 100% 0 transparent;height:15px}
.quote_t  {background:url("{T_THEME_PATH}/images/quote_t.png") repeat-x scroll 0 0 transparent;height:15px;margin:0 15px}
.quote_bl {background:url("{T_THEME_PATH}/images/quote_bl.png") no-repeat scroll 0 0 transparent;height:15px}
.quote_br {background:url("{T_THEME_PATH}/images/quote_br.png") no-repeat scroll 100% 0 transparent;height:15px}
.quote_b  {background:url("{T_THEME_PATH}/images/quote_b.png") repeat-x scroll 0 0 transparent;height:15px;margin:0 15px}
.quote_surround {background:url("{T_THEME_PATH}/images/quote.gif") no-repeat scroll 3px 3px #EBEADD;border-left:1px solid #DBDBCE;border-right:1px solid DBDBCE;margin:0;padding:5px}
.qouteo {background:transparent url("{T_THEME_PATH}/images/quoteo.png") no-repeat;padding-left:10px;padding-top:20px}

.quote_tl {background:url("./images/quote_tl.png") no-repeat scroll 0 0 transparent;height:15px}
.quote_tr {background:url("./images/quote_tr.png") no-repeat scroll 100% 0 transparent;height:15px}
.quote_t  {background:url("./images/quote_t.png") repeat-x scroll 0 0 transparent;height:15px;margin:0 15px}
.quote_bl {background:url("./images/quote_bl.png") no-repeat scroll 0 0 transparent;height:15px}
.quote_br {background:url("./images/quote_br.png") no-repeat scroll 100% 0 transparent;height:15px}
.quote_b  {background:url("./images/quote_b.png") repeat-x scroll 0 0 transparent;height:15px;margin:0 15px}
.quote_surround {background:url("./images/quote.gif") no-repeat scroll 3px 3px #EBEADD;border-left:1px solid #DBDBCE;border-right:1px solid #DBDBCE;margin:0;padding:5px}
.qouteo {background:transparent url("./images/quoteo.png") no-repeat;padding-left:10px;padding-top:20px}
blockquote {font-size: 0.95em;margin: 0.5em 1px 0 25px;overflow: hidden;padding: 5px}
blockquote cite {font-style: normal;font-weight: bold;margin-left: 20px;display: block;font-size: 0.9em}

<!-- BEGIN quote_username_open --><div class="qouteo"><blockquote style="background:transparent none;border:none"><div class="quote_tl"><div class="quote_tr"><div class="quote_t"></div></div></div><div class="quote_surround"><div><cite>{USERNAME} {L_WROTE}:</cite><!-- END quote_username_open -->
<!-- BEGIN quote_open --><div class="qouteo"><blockquote style="background:transparent none;border:none"><div class="quote_tl"><div class="quote_tr"><div class="quote_t"></div></div></div><div class="quote_surround"><div><cite><b>{L_QUOTE}:</b></cite><!-- END quote_username_open --><!-- END quote_open -->
<!-- BEGIN quote_close --></div></div><div class="quote_bl"><div class="quote_br"><div class="quote_b"></div></div></div></blockquote></div><!-- END quote_close -->