[Статья] Красивая цитата

03-02-2013, 06:08 PM

Ну что же, еще один вариант оформления цитат в стиле "Ретро-тетрадь

"

Содержимое шаблона bbcode_quote заменить на это:

PHP Code:


			
<section class="notepaper">
    <figure class="quote">
            <if condition="$show['username']">
                <div>
                    <phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase>
<if condition="$postid"><a href="showthread.php?$session[sessionurl]p=$postid#post$postid" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/viewpost.gif" border="0" alt="$vbphrase[view_post]" /></a></if>
                </div>
      <blockquote class="curly-quotes">$message</blockquote>
            <else />
                $message
            </if>
    </figure>
  </section>

В Дополнительные определения CSS

PHP Code:


			
.notepaper {
  position: relative;
  margin: 80px auto;
  padding: 2px 2px 4px 6px;
  width: 90%;
  line-height: 30px;
  color: #6a5f49;
  text-shadow: 0 1px 1px white;
  background-color: #f2f6c1;
  background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -moz-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 90%), -o-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  border: 1px solid #c3baaa;
  border-color: rgba(195, 186, 170, 0.9);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);
}
.notepaper:before, .notepaper:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
}
.notepaper:before {
  left: 28px;
  width: 2px;
  border: solid #efcfad;
  border-color: rgba(239, 207, 173, 0.9);
  border-width: 0 1px;
}
.notepaper:after {
  z-index: -1;
  left: 0;
  right: 0;
  background: rgba(242, 246, 193, 0.9);
  border: 1px solid rgba(170, 157, 134, 0.7);
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

.quote {
  font-family: Georgia, serif;
  font-size: 14px;
}

.curly-quotes:before, .curly-quotes:after {
  display: inline-block;
  vertical-align: top;
  height: 30px;
  line-height: 48px;
  font-size: 50px;
  opacity: .2;
}
.curly-quotes:before {
  content: '\201C';
  margin-right: 4px;
  margin-left: -8px;
}
.curly-quotes:after {
  content: '\201D';
  margin-left: 4px;
  margin-right: -8px;
}

.quote-by {
  display: block;
  padding-right: 10px;
  text-align: right;
  font-size: 13px;
  font-style: italic;
  color: #84775c;
}

.lt-ie8 .notepaper {
  padding: 15px 25px;
}

Еще оформление цитат:
Симпатичные цитаты
Круглые цитаты by BOP5
Круглые цитаты

03-02-2013, 06:34 PM

danrik, vBsupport.org - с двумя "P".

03-02-2013, 06:34 PM

Оффтоп

Quote:

Originally Posted by StenLi

danrik, Я "очевидел" и решил сообщить.

спасибо

03-02-2013, 06:42 PM

danrik, Я "очевидел" и решил сообщить.

07-13-2013, 03:39 PM

Возможно, в коде ошибка, так как необходимо сделать, вот такую цитату:

Для prosilver

Не меняем стандартный bbcode цитата (шаблон bbcode.html):

PHP Code:


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

PHP Code:


			
/* 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; - начертание

Для subsilver2

У стандартного subsilver2 bbcode цитата выглядит так (шаблон bbcode.html):

PHP Code:


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

В конец темы стиля:

PHP Code:


			
/* 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; - начертание

Подскажите, почему код не работает..., нужно удалить стандартный квоттитл и квотконтент, но если так делать, тег цитаты вообще не отображается. А, если оставлять стандартный квоттитл и квотконтент, то не работает новый код цитаты, ни в просильвер, ни субсильвер. В чем, ошибка?! Кто-либо в курсе..., подскажите...

07-13-2013, 03:41 PM

архив с изображениями для подписи...

07-13-2013, 04:05 PM

Quote:

Originally Posted by Dgene

Подскажите, почему код не работает..., нужно удалить стандартный квоттитл и квотконтент, но если так делать, тег цитаты вообще не отображается. А, если оставлять стандартный квоттитл и квотконтент, то не работает новый код цитаты, ни в просильвер, ни субсильвер. В чем, ошибка?! Кто-либо в курсе..., подскажите...

Что это за коды и что вы хотите сделать? К вобле это прикрутить?
Тогда к какой версии?

07-13-2013, 04:45 PM

Quote:

Originally Posted by danrik

Ну что же, еще один вариант оформления цитат в стиле "Ретро-тетрадь

Немного экзотики:
А можно сделать оформления цитат в стиле тематики форума, например тематика форума "Рыбалка" - цитата в рыбьей чешуе, тематика "финансы" - цитата на фоне монгольских тугриков или еще какой валюты?

07-13-2013, 05:25 PM

Quote:

Originally Posted by Kronshtadt

А можно сделать оформления цитат в стиле тематики форума, например тематика форума "Рыбалка" - цитата в рыбьей чешуе, тематика "финансы" - цитата на фоне монгольских тугриков или еще какой валюты?

Можно, нужен только необходимый фон

07-14-2013, 11:26 AM

@Sven, мне вот тоже не совсем понятно, что тем постом сказать хотели, если инструкцию хотели написать, то зачем? Она уже написана..
@Dgene, тем более у вас синтанксис кода в шаблоне совсем не вобловский..