Стилизация цитат

[Kostelano]

Занимался ли кто-нибудь вопросом стилизации цитат (видоизменением)? Согласитесь, стандартная рамка цитат не очень симпатична.

[фото пропало]

К примеру, на том же движке vBulletin видел несколько разных вариантов цитируемых сообщений.

[MIT]

Да, занимался, да не очень.

[Nekstati]

А по-моему, цитаты вполне симпатичны. Ищите в CSS по blockquote и blockquote cite. Можно, например, скруглить углы и сделать рамку темнее:

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

blockquote {
   border-color: #99AACC;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
}

Кстати, вообще насчёт сравнения с vBulletin и прочими — на мой взгляд, ничего и рядом не висело с банальным Просильвером. Да, он нам приелся и оскомину набил, но остаётся шедевром.

[Kostelano]

Ничего и рядом не висело с банальным просильвером...

Полностью согласен, но вот момент с цитатами мне показался слишком простым.

Можно, например, скруглить углы и сделать рамку темнее.

Ну вот, уже значительно симпатичнее выглядят цитаты Спасибо!

e04034ec5570.jpg

Будут еще варианты - делитесь

[MIT]

Kostelano, я не очень на гадалку похож, что бы сидеть и придумывать чего ты там хотел. Прозвучал конкретный вопрос, я на него вполне конкретно ответил

Однажды пришлось сделать такое:

Untitled.png

для себя подобным заниматься лениво, да и надобность сомнительная.

[Kostelano]

MIT
Дай реализацию.

[MIT]

Ну держи...

[владимир1983]

Ну держи...

MIT
Здравствуйте. Выглядит конечно супер. MIT Расскажите пожалуйста подробней как реализовать такую стилизацию цитаты, куда это заливать, что править)?

Добавлено спустя 1 минуту 59 секунд:
Стиль на основе subsilver2.

[MIT]

Ну если в общем, то:
1) Скопировать картинки
2) Внести правки в файл stylesheet.css, дополнив или добавив существующие блоки кода предложенными; указать верные пути к файлам изображений
3) В файле bbcode.html заменить блоки кода

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

<!-- BEGIN quote_open -->
<div class="quotetitle"><b>{L_QUOTE}:</b></div><div class="quotecontent">
<!-- END quote_open -->

и

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

<!-- BEGIN quote_close -->
</div>
<!-- END quote_close -->

на предложенный мной код

[Пчелкин]

А поточней инструкцию для жирафов под просильвер? Не наставаю. но всеж...шибко заинтересовало..
Да и красиво !!!

[владимир1983]

Уважаемый MIT!
Если можно то и для сабсильвера поточней, для точ таких же жирафов(

[MIT]

ПроСильвер 3.0.7 pl1
Проверил, работает.

bbcode.html
Find

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

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

Replace with

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

<!-- BEGIN quote_username_open --><div class="qouteo png_bg"><blockquote style="background: none no-repeat scroll 10px 10px transparent; border: 0pt none rgb(219, 219, 219);"><div class="posttopleft-qu1 png_bg"><div class="posttopright-qu1 png_bg"><div class="postmod-top-qu1 png_bg"></div></div></div><div class="postmod-surround-qu1"><div><cite>{USERNAME} {L_WROTE}:</cite><!-- END quote_username_open -->
<!-- BEGIN quote_open --><div class="qouteo png_bg"><blockquote style="background: none no-repeat scroll 10px 10px transparent; border: 0pt none rgb(219, 219, 219);"><div class="posttopleft-qu1 png_bg"><div class="posttopright-qu1 png_bg"><div class="postmod-top-qu1 png_bg"></div></div></div><div class="postmod-surround-qu1"><div style="padding-top: 15px"><!-- END quote_open -->
<!-- BEGIN quote_close --></div></div><div class="postbottomleft-qu1 png_bg"><div class="postbottomright-qu1 png_bg"><div class="postmod-bottom-qu1 png_bg"></div></div></div></blockquote></div><!-- END quote_close -->

В colours.css добавить

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

.qouteo {background-attachment:scroll;background-color:transparent;background-image:url("{T_THEME_PATH}/images/quoteo.png");background-position:0 0;background-repeat:no-repeat;padding-left:10px;padding-top:20px}
.posttopleft-qu1 {background:url("{T_THEME_PATH}/images/postmod-tl-qu1.png") no-repeat scroll 0 0 transparent;height:15px}
.posttopright-qu1 {background:url("{T_THEME_PATH}/images/postmod-tr-qu1.png") no-repeat scroll 100% 0 transparent;height:15px}
.postmod-top-qu1 {background:url("{T_THEME_PATH}/images/postmod-tm-qu1.png") repeat-x scroll 0 0 transparent;height:15px;margin:0 15px}
.postmod-surround-qu1  {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}
.postbottomleft-qu1  {background:url("{T_THEME_PATH}/images/postmod-bl-qu1.png") no-repeat scroll 0 100% transparent;height:15px}
.postbottomright-qu1  {background:url("{T_THEME_PATH}/images/postmod-br-qu1.png") no-repeat scroll 100% 100% transparent;height:15px}
.postmod-bottom-qu1  {background:url("{T_THEME_PATH}/images/postmod-bm-qu1.png") repeat-x scroll 0 100% transparent;height:15px;margin:0 15px}

Картинки скопировать в папку styles/prosilver/theme/images/

СабСильвер2 3.0.7 pl1
Проверил, работает.
bbcode.html
Find

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

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

Replace with

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

<!-- BEGIN quote_username_open --><div class="qouteo png_bg"><blockquote style="background: none no-repeat scroll 10px 10px transparent; border: 0pt none rgb(219, 219, 219);"><div class="posttopleft-qu1 png_bg"><div class="posttopright-qu1 png_bg"><div class="postmod-top-qu1 png_bg"></div></div></div><div class="postmod-surround-qu1"><div><cite>{USERNAME} {L_WROTE}:</cite><!-- END quote_username_open -->
<!-- BEGIN quote_open --><div class="qouteo png_bg"><blockquote style="background: none no-repeat scroll 10px 10px transparent; border: 0pt none rgb(219, 219, 219);"><div class="posttopleft-qu1 png_bg"><div class="posttopright-qu1 png_bg"><div class="postmod-top-qu1 png_bg"></div></div></div><div class="postmod-surround-qu1"><div><cite><b>{L_QUOTE}:</b></cite><!-- END quote_open -->
<!-- BEGIN quote_close --></div></div><div class="postbottomleft-qu1 png_bg"><div class="postbottomright-qu1 png_bg"><div class="postmod-bottom-qu1 png_bg"></div></div></div></blockquote></div><!-- END quote_close -->

В stylesheet.css добавить

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

.qouteo {background-attachment:scroll;background-color:transparent;background-image:url("./images/quoteo.png");background-position:0 0;background-repeat:no-repeat;padding-left:10px;padding-top:20px}
.posttopleft-qu1 {background:url("./images/postmod-tl-qu1.png") no-repeat scroll 0 0 transparent;height:15px}
.posttopright-qu1 {background:url("./images/postmod-tr-qu1.png") no-repeat scroll 100% 0 transparent;height:15px}
.postmod-top-qu1 {background:url("./images/postmod-tm-qu1.png") repeat-x scroll 0 0 transparent;height:15px;margin:0 15px}
.postmod-surround-qu1  {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}
.postbottomleft-qu1  {background:url("./images/postmod-bl-qu1.png") no-repeat scroll 0 100% transparent;height:15px}
.postbottomright-qu1  {background:url("./images/postmod-br-qu1.png") no-repeat scroll 100% 100% transparent;height:15px}
.postmod-bottom-qu1  {background:url("./images/postmod-bm-qu1.png") repeat-x scroll 0 100% transparent;height:15px;margin:0 15px}
blockquote {background: #EBEADD url("./images/quote.gif") 6px 8px no-repeat;border: 1px solid #dbdbdb;font-size: 0.95em;margin: 0.5em 1px 0 25px;overflow: hidden;padding: 5px}
blockquote blockquote {background-color:#EFEED9}
blockquote blockquote blockquote {background-color: #EBEADD}
blockquote cite {font-style: normal;font-weight: bold;margin-left: 20px;display: block;font-size: 0.9em}

Картинки скопировать в папку styles/subsilver2/theme/images/

Пчелкин, чужая душа — потёмки. А моя — так ещё и лабиринт, где можно навсегда заблудиться.

[Gisher]

маленький недочёт, если цитата без автора
[фото пропало]

[владимир1983]

Делал по инструкции для СабСильвера, не работает(. У кого нить работает?

[Nekstati]

Цитаты с именем автора и без имени автора выводятся одним и тем же тэгом и в одинаковом оформлении. http://www.phpbbguru.net/community/faq. ... bcode#f2r0