Изображение
Цитата в стиле старой бумаги со старинным компасом.

Для реализации данной цитаты мы будем использовать CSS3, поэтому в старых браузерах правильного отображения, задуманного мною, не будет.

Можно пойти обычным путём и, как я писал в соседней теме, нарисовать кучу изображений в фотошопе, потом отредактировав шаблон bbcode.html, добавить необходимое количество блоков и к каждому из них, с помощью css, присвоить необходимые нам изображения. Мы не ищем лёгких путей:) Мы пойдём по пути реализации красивого отображения с помощью CSS3.

Для начала скачиваем архив с двумя изображениями:
quote.rar
26.74 КБ 345 скачиваний
Распаковываем и закачиваем на форум.


Стили на основе 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: none no-repeat 0 0 transparent;
	border: 0px solid #dbdbdb;
	font-size: 0.95em;
	margin: 0.5em 1px 0 25px;
	overflow: hidden;
	padding: 55px 5px 10px 45px;
	position: relative;
}
Если вы хотите изменить размер шрифта, то, чтобы не возвращаться, измените значение у свойства: font-size: 0.95em;

Чуть ниже находим:

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

blockquote blockquote {
	/* Nested quotes */
	background-color: #bababa;
	font-size: 1em;
	margin: 0.5em 1px 0 15px;	
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #e4e4e4;
}
Меняем на:

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

blockquote blockquote {
	/* Nested quotes */
	font-size: 1em;
	margin: 0.5em 1px 0 15px;	
}
Находим:

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

blockquote cite {
	/* Username/source of quoter */
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	display: block;
	font-size: 0.9em;
}
К найденному, с новой строки, после font-size: 0.9em; добавляем:

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

	padding: 0px 25px 10px;
font-size: 0.9em; - отвечает за размер шрифта автора цитаты.


Далее находим:

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

blockquote.uncited {
	padding-top: 25px;
}
Меняем на:

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

blockquote.uncited div {
	padding-top: 35px;
}
После замены, после } с новой строки добавляем:

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

blockquote:before {
	content: '';
	left: 0;
	top: 0;
	background: url("путь до изображения/quote-compass.png") no-repeat 0 0 transparent;
	position: absolute;
	width: 75px;
	height: 100px;
	z-index: 1;
}

blockquote div {
	padding: 5px;
	border: 1px solid #703D07;
	position: relative;

	background-color: transparent;
	background-image: -webkit-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -moz-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -o-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -ms-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);

	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);

	z-index: 0;
}

blockquote div:before {
	content: '';
	left: 0;
	top: 0;
	background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}

blockquote div:after {
	content: '';
	left: 30px;
	top: 8px;
	background: url("{T_THEME_PATH}/images/quote.gif") no-repeat 0 0 transparent;
	position: absolute;
	width: 15px;
	height: 12px;	
}

blockquote.uncited div:after {
	content: 'Цитата:';
	padding-left: 20px;
	line-height: 15px;
	font-weight: bold;
	font-size: 0.9em;
	font-style: normal;	
}
Теперь при использовании цитаты без автора, как и в стилях subsilver2, будет выводиться - Цитата:. Отвечает за это свойство content: в blockquote.uncited div:after {.


Далее находим и удаляем:

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

/* Quote block */
blockquote {
	background-color: #EBEADD;
	background-image: url("{T_THEME_PATH}/images/quote.gif");
	border-color:#DBDBCE;
}

blockquote blockquote {
	/* Nested quotes */
	background-color:#EFEED9;
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #EBEADD;
}
Последний удалённый фрагмент, это изначальный цвет цитаты, цвет обводки и кавычки. Мы их поместили в другое место, поэтому они нам больше не нужны в этом месте. Два последних блока, это цветовое оформление цитаты в другой цитате, они нам тоже больше не понадобится.



Для стилей на основе subsilver2
В самый конец темы вашего стиля ставим:

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

.quotetitle {
	margin: 55px 5px 0 45px;
	padding: 4px 4px 4px 40px;
	position: relative;
	position: relative;
	border-color: #703D07;

	background-color: transparent;
	background-image: -webkit-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -moz-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -o-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -ms-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);

	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.quotetitle:before {
	position: absolute;
	left: -45px;
	top: -60px;
	background: url("путь до изображения/quote-compass.png") no-repeat 0 0 transparent;
	content: '';
	width: 75px;
	height: 100px;
	z-index: 1;
}

.quotetitle:after {
	position: absolute;
	left: 0px;
	top: 0px;
	background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
	content: '';
	width: 100%;
	height: 27px;
	z-index: 1;
}

.quotecontent {
	margin: 0 5px 10px 45px;
	position: relative;
	overflow: hidden;
	border-color: #703D07;
	color: #2D1206;

	background-color: transparent;
	background-image: -webkit-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -moz-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -o-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -ms--radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);

	-webkit-box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);

	z-index: 0;
}

.quotecontent:before {
	position: absolute;
	right: 0px;
	bottom: 0px;
	background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
	content: '';
	width: 100%;
	height: 100%;
	z-index: -1;
}
Чтобы изменить размер шрифта автора темы. Находим:

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

/* BBCode
 ------------ */
.quotetitle, .attachtitle {
	margin: 10px 5px 0 5px;
	padding: 4px;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	border-color: #A9B8C2;
	color: #333333;
	background-color: #A9B8C2;
	font-size: 0.85em;
	font-weight: bold;
}
font-size: 0.85em; - ставим нужное значение.

Чтобы изменить размер шрифта самой цитаты. Находим:

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

.quotecontent, .attachcontent {
	margin: 0 5px 10px 5px;
	padding: 5px;
	border-color: #A9B8C2;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
	background-color: #FAFAFA;
	color: #4B5C77;
}
font-size: 1em; - ставим нужное значение.


Стили находящиеся в самом низу файла со стилями используются в первую очередь, поэтому можно их не удалять.
Если изменения не видно, можно удалить cookies конференции, некоторые браузеры очень сильно к ним "цепляются".
Комментарии: 37

southklad 26 апр 2013, 00:52 Сообщение

попробовал поставить для вот этого стиля http://demo.phpbb3styles.net/CA+Vintage , но там нет многих строчек :(
  • 0
Изображение

CabinetAdmin 26 апр 2013, 16:34 Сообщение

igorbond писал(а):но там нет многих строчек
хм... В этом стиле код у цитаты не как у чистого prosilver. Для стиля CA Vintage, просто в самый конец темы стиля:

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

/* Quote block */
.ca-bbcode {
	background: none no-repeat 0 0 transparent;
	border: 0;
	font-size: 0.95em;
	margin: 0.5em 1px 0 25px;
	overflow: hidden;
	padding: 55px 5px 10px 45px;
	position: relative;
}

.ca-bbcode:before {
	content: '';
	left: 0;
	top: 0;
	background: url("путь до изображения/quote-compass.png") no-repeat 0 0 transparent;
	position: absolute;
	width: 75px;
	height: 100px;
	z-index: 1;
}

.ca-quote {
	padding: 5px;
	border: 1px solid #703D07;
	position: relative;

	background-color: transparent;
	background-image: -webkit-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -moz-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -o-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -ms-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);

	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);

	z-index: 0;
}

.ca-quote:before {
	content: '';
	left: 0;
	top: 0;
	background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}

blockquote {
	background: url("{T_THEME_PATH}/images/bb_quote.gif") no-repeat 100% 0 transparent;
}

blockquote cite {
	/* Username/source of quoter */
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	display: block;
	font-size: 0.9em;
	padding: 0px 10px 10px;
}

blockquote.uncited div {
	padding-top: 30px;
}

blockquote.uncited div:after {
	content: 'Цитата:';
	padding-left: 10px;
	line-height: 15px;
	font-weight: bold;
	font-size: 0.9em;
	font-style: normal;  
	position: absolute;
	left: 30px;
	top: 8px;
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 14 май 2013, 00:47 Сообщение

CabinetAdmin писал(а):
igorbond писал(а):но там нет многих строчек
хм... В этом стиле код у цитаты не как у чистого prosilver. Для стиля CA Vintage, просто в самый конец темы стиля:

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

/* Quote block */
.ca-bbcode {
	background: none no-repeat 0 0 transparent;
	border: 0;
	font-size: 0.95em;
	margin: 0.5em 1px 0 25px;
	overflow: hidden;
	padding: 55px 5px 10px 45px;
	position: relative;
}

.ca-bbcode:before {
	content: '';
	left: 0;
	top: 0;
	background: url("путь до изображения/quote-compass.png") no-repeat 0 0 transparent;
	position: absolute;
	width: 75px;
	height: 100px;
	z-index: 1;
}

.ca-quote {
	padding: 5px;
	border: 1px solid #703D07;
	position: relative;

	background-color: transparent;
	background-image: -webkit-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -moz-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -o-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
	background-image: -ms-radial-gradient(center, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);

	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0px 10px #D0710D, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.1);

	z-index: 0;
}

.ca-quote:before {
	content: '';
	left: 0;
	top: 0;
	background: url("путь до изображения/quote-background.png") repeat 0 0 transparent;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}

blockquote {
	background: url("{T_THEME_PATH}/images/bb_quote.gif") no-repeat 100% 0 transparent;
}

blockquote cite {
	/* Username/source of quoter */
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	display: block;
	font-size: 0.9em;
	padding: 0px 10px 10px;
}

blockquote.uncited div {
	padding-top: 30px;
}

blockquote.uncited div:after {
	content: 'Цитата:';
	padding-left: 10px;
	line-height: 15px;
	font-weight: bold;
	font-size: 0.9em;
	font-style: normal;  
	position: absolute;
	left: 30px;
	top: 8px;
}
Установил, но теперь компас прилип еще и к вложениям в сообщении
  • 0
Изображение

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

igorbond писал(а):Установил, но теперь компас прилип еще и к вложениям в сообщении
Ещё и bbcode [cоde], наверно, судя по шаблону bbcode.html...

Самое простое решение вижу в замене кода в шаблоне bbcode.html с:

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

<!-- BEGIN quote_username_open --><div class="ca-bbcode"><div class="ca-bbcode2 ca-quote"><blockquote><div><cite>{USERNAME} {L_WROTE}:</cite><!-- END quote_username_open -->
<!-- BEGIN quote_open --><div class="ca-bbcode"><div class="ca-bbcode2 ca-quote"><blockquote class="uncited"><div><!-- END quote_open -->
<!-- BEGIN quote_close --></div></blockquote></div></div><!-- END quote_close -->
на родной от prosilver:

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

<!-- 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 -->
И использования стилей из первого сообщения.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

HottaBbIch 16 май 2013, 14:48 Сообщение

Всем добрый день!
Я только начинаю осваиваться в этом движке и написании форума, и вот понравился мне вид цитаты с компасом, но как его применить в стиле vphpbb3 я не очень пойму. Изменения делать надо в теме в css, я так понял...но где конкретно и что менять не очень понимаю...не можете ли вы мне подсказать где в моем случае надо изменения вносить? Заранее спасибо
  • 0

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

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

HottaBbIch 16 май 2013, 16:41 Сообщение

CabinetAdmin писал(а):
HottaBbIch писал(а):в стиле vphpbb3
Стиль vphpbb3, это клон subsilver2, сделайте изменения для этого клона как описано в первом сообщении.
сделал как Вы сказали, но получилось частично...в чем моя ошибка? Скрин прилагается
Изображение
  • 0

southklad 16 май 2013, 16:46 Сообщение

пропишите адрес к компасу свой
  • 0
Изображение

HottaBbIch 16 май 2013, 17:05 Сообщение

Спасибо большое за помощь, все получилось, только вот еще подскажите пожалуйста как мне поменять в цитатах цвет фона?
  • 0

CabinetAdmin 16 май 2013, 17:11 Сообщение

Менять надо сразу в двух местах, в:

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

.quotetitle {
   margin: 55px 5px 0 45px;
   padding: 4px 4px 4px 40px;
   position: relative;
   position: relative;
   border-color: #703D07;

   background-color: transparent;
   background-image: -webkit-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
   background-image: -moz-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
   background-image: -o-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
   background-image: -ms-radial-gradient(bottom, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);

   -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 8px 10px rgba(208, 113, 13, 0.25), 0 -1px 2px rgba(0, 0, 0, 0.1);
}
И в:

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

.quotecontent {
   margin: 0 5px 10px 45px;
   position: relative;
   overflow: hidden;
   border-color: #703D07;
   color: #2D1206;

   background-color: transparent;
   background-image: -webkit-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
   background-image: -moz-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
   background-image: -o-radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);
   background-image: -ms--radial-gradient(top, cover, rgba(248, 235, 184, 0.7) 40%, rgba(226, 184, 97, 1) 90%);

   -webkit-box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0px -8px 10px rgba(208, 113, 13, 0.25), 0 5px 5px rgba(0, 0, 0, 0.05);

   z-index: 0;
}
За цвет отвечают - background-image: и box-shadow:
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

HottaBbIch 16 май 2013, 17:15 Сообщение

Еще раз большое спасибо! Очень качественная помощь! Все доходчиво объясняете! Успехов и дальнейшего процветания!
  • 0

southklad 19 дек 2014, 21:50 Сообщение

Скажите пожалуйста, вот создал рамку, а как к ней прикрепить изображение к правому или левому верхним углам?

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

.ramka{
	border-radius: 10px;
	box-shadow: 0 0 0 3px #ff4f00;
	text-indent: 30px;
	padding: 10px 10px 10px 10px;
	margin: 20px auto;
	
}
  • 0
Изображение

CabinetAdmin 19 дек 2014, 22:08 Сообщение

Например background: url("image.png") no-repeat -10px -10px.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

southklad 19 дек 2014, 22:17 Сообщение

Она получилась внутри рамки, а нужно чтобы снаружи у углу
  • 0
Изображение

CabinetAdmin 20 дек 2014, 07:30 Сообщение

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