Новый вид цитат для uCoz, вид цитаты, цитаты для uCoz, цитата uCoz, цитата uCoz 6 цветовых решений

Вид цитаты для uCoz

Привет!

Давайте разберем сегодня давно наболевшую тему. Как изменить стандартный вид цитаты в системе uCoz?

Уверен что стандартный вид блока цитаты для uCoz своим нелепым видом не оставляет хороших впечатлений у вас и посетителей вашего сайта. Так почему же нам не избавиться скорее от этого стандарта и не применить свое оформление? Предлагаю разобрать исходный код стандартного блока цитаты и на основе разобранного кода сделать новый вид цитат для uCoz.

HTML стандартной формы
вид цитаты uCoz
Code
<div class="bbQuoteBlock">
<div class="bbQuoteName" style="padding-left:5px;font-size:7pt"><b>Quote</b> (<span class="qName"><!--qn-->cech<!--/qn--></span>)</div>
<div class="quoteMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzq-->Большой опыт работы, проекта MVCreative, в создании верстки гарантирует грамотный, профессиональный подход к делу!<!--/uzq--></div>
</div>

Разберем классы для ее управления:

  • bbQuoteBlock - оболочка блока цитаты
  • bbQuoteName - блок имени цитируемого
  • qName - имя цитируемого
  • quoteMessage - текст цитаты

А теперь применим стили и изменим отображение вида цитаты uCoz, скопируете понравившийся css код и установите либо в стандартные стили uCoz ПУ / Дизайн / Управление дизайном (CSS), либо в свой отдельный css файл.

Голубой
вид цитаты uCoz
Code
.bbQuoteName {
  background:#6cadcd;
  color:#fff;
  line-height:28px;
  padding-left:15px;
  text-transform:uppercase;
}
.quoteMessage {
  border:1px solid #e5e1d9 !important;
  border-top:0 none !important;
  padding:15px 15px 15px 15px;
  background:#f2eee6 url(http://mvcreative.ru/example/5/blue_arrow.png) no-repeat 90% top;
  font-style:italic;
}
Зеленый
вид цитаты uCoz
Code
.bbQuoteName {
  background:#AABC38;
  color:#fff;
  line-height:28px;
  padding-left:15px;
  text-transform:uppercase;
}
.quoteMessage {
  border:1px solid #e5e1d9 !important;
  border-top:0 none !important;
  padding:15px 15px 15px 15px;
  background:#f2eee6 url(http://mvcreative.ru/example/5/green_arrow.png) no-repeat 90% top;
  font-style:italic;
}
Серый
вид цитаты uCoz
Code
.bbQuoteName {
  background:#c7c8c8;
  color:#fff;
  line-height:28px;
  padding-left:15px;
  text-transform:uppercase;
}
.quoteMessage {
  border:1px solid #e5e1d9 !important;
  border-top:0 none !important;
  padding:15px 15px 15px 15px;
  background:#f2eee6 url(http://mvcreative.ru/example/5/gray_arrow.png) no-repeat 90% top;
  font-style:italic;
}
Розовый
вид цитаты uCoz
Code
.bbQuoteName {
  background:#ff6cb2;
  color:#fff;
  line-height:28px;
  padding-left:15px;
  text-transform:uppercase;
}
.quoteMessage {
  border:1px solid #e5e1d9 !important;
  border-top:0 none !important;
  padding:15px 15px 15px 15px;
  background:#f2eee6 url(http://mvcreative.ru/example/5/pink_arrow.png) no-repeat 90% top;
  font-style:italic;
}
Оранжевый
вид цитаты uCoz
Code
.bbQuoteName {
  background:#ff6e44;
  color:#fff;
  line-height:28px;
  padding-left:15px;
  text-transform:uppercase;
}
.quoteMessage {
  border:1px solid #e5e1d9 !important;
  border-top:0 none !important;
  padding:15px 15px 15px 15px;
  background:#f2eee6 url(http://mvcreative.ru/example/5/orange_arrow.png) no-repeat 90% top;
  font-style:italic;
}
Черный
вид цитаты uCoz
Code
.bbQuoteName {
  background:#646464;
  color:#fff;
  line-height:28px;
  padding-left:15px;
  text-transform:uppercase;
}
.quoteMessage {
  border:1px solid #e5e1d9 !important;
  border-top:0 none !important;
  padding:15px 15px 15px 15px;
  background:#f2eee6 url(http://mvcreative.ru/example/5/black_arrow.png) no-repeat 90% top;
  font-style:italic;
}

И последний штрих, изменим стандартную надпись Quote на свою Цитата установим JS код.

Code
<script type="text/javascript">  
jQuery(document).ready(function () {
  $(".bbQuoteName b").text("Цитата");
});
</script>

Вот и все...

Понравилась статья? Перейди по рекламной ссылке ниже.
Раздел: Вид цитаты ∫ Просмотров: 7405 ∫ 02.12.20124.9
Теги: цитаты
» Оцени и добавь:
оцени статью
4.9
12 Комментариев Поделись своим мнением
#12 Написал dzumso, 29.12.2015 03:09
Цитатнуть
Спасибо большое за скрипт! Всё работает отлично!
#11 Написал Чиклино, 03.07.2013 13:33
Цитатнуть
А как увеличить размер шрифта цитаты?
#10 Написал NuraS, 30.01.2013 00:17
Цитатнуть
Вот сегодня и я воспользовался видом цитат, братец)) выражаю благодарность!!
#9 Написал OLEG, 24.12.2012 18:11
Цитатнуть
Спасибо....!!!
#8 Написал Oregon, 15.12.2012 08:35
Цитатнуть
Ух ты, сам адреналин к нам пожаловал
#7 Написал AdReNaLiN0486, 15.12.2012 02:29
Цитатнуть
Молодец+
#6 Написал TRANE73, 04.12.2012 00:22
Цитатнуть
Отлично) Только в плане оптимизации кода лучше так:

Code
<script type="text/javascript">    
jQuery(function() {    
    $(".bbQuoteName b").text("Цитата")
});
</script>
Ну а так я привык, что Mootools никто не юзает, поэтому пишу $
#5 Написал MAKAROV, 03.12.2012 12:02
Цитатнуть
Спасибо:)
#4 Написал cech, 02.12.2012 22:02
Цитатнуть
Ну можно еще кавычек добавить...
Вы зашли на сайт как незарегистрированный пользователь. Чтобы получить полный доступ к сайту, дополнительные возможности, пройдите пятиминутную регистрацию, либо войдите на сайт под свои логином.
Что говорят заказчики?
Наша команда сотрудничает с MVC достаточно продолжительное время. Мы очень довольны результатами работы. Рекомендуем!
Брович Денис, Россия
Заказывал шаблон, всё на высшем уровне, все что я просил было выполненно, даже больше, перевыполнено. Всё получилось просто супер, сочетания цветов и красота просто поражают.
Велисов Юрий, Украина
Приятно работать! Отзывчивость, исполнительность, заинтересованность в результате и качестве работы! Спасибо!
Смолен Аленксандо, Украина