Техническая поддержка форумов vBulletin
  форум vBSupport.ru > vBulletin > vBulletin 3.8.x > Внешний вид 3.8

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

  • »
VBsupport перешел с домена .ORG на родной .RU Ура! Пожалуйста, обновите свои закладки - VBsupport.ru
 
Page 1 of 2 1 2
 
 
 
danrik
Специалист
 
danrik's Avatar
Talking Красивая цитата
7
Ну что же, еще один вариант оформления цитат в стиле "Ретро-тетрадь"

Содержимое шаблона 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
Круглые цитаты
Last edited by danrik : 03-02-2013 at 07:27 PM.
Bot
Yandex Bot Yandex Bot is online now
 
Join Date: 05.05.2005
Реклама на форуме А что у нас тут интересного? =)
 
 
StenLi
На доске почёта
Пожизненный блэк
 
banned nax
Default
2
danrik, vBsupport.org - с двумя "P".
 
 
danrik
Специалист
 
danrik's Avatar
Default
0
Оффтоп

Quote:
Originally Posted by StenLi View Post
danrik, Я "очевидел" и решил сообщить.
спасибо
Last edited by danrik : 03-02-2013 at 05:44 PM.
 
 
StenLi
На доске почёта
Пожизненный блэк
 
banned nax
Default
0
danrik, Я "очевидел" и решил сообщить.
 
 
Dgene
Простоузер
Default
0
Возможно, в коде ошибка, так как необходимо сделать, вот такую цитату:



Для 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; - начертание

Подскажите, почему код не работает..., нужно удалить стандартный квоттитл и квотконтент, но если так делать, тег цитаты вообще не отображается. А, если оставлять стандартный квоттитл и квотконтент, то не работает новый код цитаты, ни в просильвер, ни субсильвер. В чем, ошибка?! Кто-либо в курсе..., подскажите...
 
 
Dgene
Простоузер
Default
0
архив с изображениями для подписи...
Attached Files
File Type: rar a-beautiful-quote.rar (14.0 KB, 4 views)
 
 
Sven
Front-End Developer
 
Sven's Avatar
Default
0
Quote:
Originally Posted by Dgene View Post
Подскажите, почему код не работает..., нужно удалить стандартный квоттитл и квотконтент, но если так делать, тег цитаты вообще не отображается. А, если оставлять стандартный квоттитл и квотконтент, то не работает новый код цитаты, ни в просильвер, ни субсильвер. В чем, ошибка?! Кто-либо в курсе..., подскажите...
Что это за коды и что вы хотите сделать? К вобле это прикрутить?
Тогда к какой версии?
 
 
Kronshtadt
Заказчик-извращенец
Default
0
Quote:
Originally Posted by danrik View Post
Ну что же, еще один вариант оформления цитат в стиле "Ретро-тетрадь
Немного экзотики:
А можно сделать оформления цитат в стиле тематики форума, например тематика форума "Рыбалка" - цитата в рыбьей чешуе, тематика "финансы" - цитата на фоне монгольских тугриков или еще какой валюты?
 
 
Sven
Front-End Developer
 
Sven's Avatar
Default
1
Quote:
Originally Posted by Kronshtadt View Post
А можно сделать оформления цитат в стиле тематики форума, например тематика форума "Рыбалка" - цитата в рыбьей чешуе, тематика "финансы" - цитата на фоне монгольских тугриков или еще какой валюты?
Можно, нужен только необходимый фон
 
 
danrik
Специалист
 
danrik's Avatar
Default
0
@Sven, мне вот тоже не совсем понятно, что тем постом сказать хотели, если инструкцию хотели написать, то зачем? Она уже написана..
@Dgene, тем более у вас синтанксис кода в шаблоне совсем не вобловский..
 
Page 1 of 2 1 2

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off



All times are GMT +4. The time now is 12:34 AM.

Contact Us - vBSupport.ru - Privacy Policy - Top

Powered by vBulletin® Version 3.5.0
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Loading...