Регистрация    Войти
Авторизация

Шесть цветовых решений вида цитат для uCoz

Шесть цветовых решений вида цитат для uCoz

Шесть цветовых решений вида цитат для uCoz. В этом готовом решении мы будем заменять стандартный вид цитат uCoz.

Взгляните ниже на стандартный вид цитаты от uCoz:


как вы понимаете, сразу в глаза бросаются основные моменты, которые на сегодняшний день смело можно расценивать как ошибкой:
Шесть цветовых решений вида цитат для uCoz

- рамка
- основной фон цитаты
- обычный шрифт, а не наклонный
- надпись Quote


И так начнем установку:

Мы все с вами знаем, для того чтобы вывести цитату на своём сайте в системе uCoz, мы будем использовать код Quote, поэтому для того чтобы увидеть html код, мы просмотрим исходный код страницы где находиться ваша цитата и увидим следующее:

<div class="bbQuoteBlock"> 
  <div style="padding-left: 5px; font-size: 7pt;" class="bbQuoteName"><b>Quote</b></div>
  <div style="border: 1px inset; max-height: 200px; overflow: auto;" class="quoteMessage">
Текст цитаты
  </div>
  </div>

из кода мы видим, что весь основной html код состоит из трёх частей:

1 - основной контейнер div (с классом bbQuoteBlock)
2 - контейнер div с надписью Quote (с классом bbQuoteName)
3 - контейнер с текстом цитаты (с классом quoteMessage)

многие кто знают html-css достаточно хорошо, сразу увидят очень грубую ошибку в коде, а именно, css стили прописаны в самих тегах div, а не прописаны в стандартный файл стилей. Но слава богу у нас имеются классы для стилей, которые мы будем изменять.

Установим CSS:

Перед тем как вы будете устанавливать данные css стили, я хочу сказать пару слов о том, что мы будем использовать в css стилях параметр !important;, а также ячейку div с текстом Quote мы скроем на ваше страницы, благодаря атрибуту display:none;

А теперь выбираем нужную цветовую гамму и устанавливаем к себе на сайт:

Белый вид цитаты:
Шесть цветовых решений вида цитат для uCoz

В ксс
/* Белый вид цитаты
------------------------------------------*/
.bbQuoteBlock {
margin: 15px 0px 15px 0px!important;
}

.bbQuoteName {
display:none;
}

.quoteMessage1{
overflow: hidden!important;
text-align:justify!important;
font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;
color:#555;text-shadow:1px 1px 1px #fff!important;
font-style: italic!important;
background: #EAEAEA url(http://www.center-dm.ru/ucoz/Quote/v1/quote_white.png) no-repeat 10px 10px!important;
padding: 5px 10px 5px 50px!important;
border: 1px solid #D0D0D0!important;
}
/*------------------------------------------*/


Тёмный вид цитаты:
Шесть цветовых решений вида цитат для uCoz

В ксс
/* Чёрный вид цитаты 
------------------------------------------*/
.bbQuoteBlock {  
  margin: 15px 0px 15px 0px!important;  
}

.bbQuoteName {  
  display:none;  
}

.quoteMessage {
  overflow: hidden!important;
  text-align:justify!important;
  font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;
  color:#c9c9c9;text-shadow:1px 1px 1px #000!important;  
  font-style: italic!important;
  background: #454a50 url(http://www.center-dm.ru/ucoz/Quote/v1/quote_black.png) no-repeat 10px 10px!important;  
  padding: 5px 10px 5px 50px!important;  
  border: 1px solid #333!important;  
}
/*------------------------------------------*/


Оранжевый вид цитаты:
Шесть цветовых решений вида цитат для uCoz

В ксс
/* Оранжевый вид цитаты 
------------------------------------------*/
.bbQuoteBlock {  
  margin: 15px 0px 15px 0px!important;  
}

.bbQuoteName {  
  display:none;  
}

.quoteMessage {
  overflow: hidden!important;
  text-align:justify!important;
  font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;
  color:#867200;text-shadow:1px 1px 1px #fff!important;  
  font-style: italic!important;
  background: #FDEBAE url(http://www.center-dm.ru/ucoz/Quote/v1/quote_orange.png) no-repeat 10px 10px!important;  
  padding: 5px 10px 5px 50px!important;  
  border: 1px solid #E6C555!important;  
}
/*------------------------------------------*/


Синий вид цитаты:
Шесть цветовых решений вида цитат для uCoz

В ксс
/* Синий вид цитаты 
------------------------------------------*/
.bbQuoteBlock {  
  margin: 15px 0px 15px 0px!important;  
}

.bbQuoteName {  
  display:none;  
}

.quoteMessage {
  overflow: hidden!important;
  text-align:justify!important;
  font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;
  color:#155084;text-shadow:1px 1px 1px #fff!important;  
  font-style: italic!important;
  background: #C2DDF9 url(http://www.center-dm.ru/ucoz/Quote/v1/quote_blue.png) no-repeat 10px 10px!important;  
  padding: 5px 10px 5px 50px!important;  
  border: 1px solid #80BBEF!important;  
}
/*------------------------------------------*/


Зелёный вид цитаты:
Шесть цветовых решений вида цитат для uCoz

В ксс
/* Зелёный вид цитаты 
------------------------------------------*/
.bbQuoteBlock {  
  margin: 15px 0px 15px 0px!important;  
}

.bbQuoteName {  
  display:none;  
}

.quoteMessage {
  overflow: hidden!important;
  text-align:justify!important;
  font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;
  color:#15841a;text-shadow:1px 1px 1px #fff!important;  
  font-style: italic!important;
  background: #D1F7B6 url(http://www.center-dm.ru/ucoz/Quote/v1/quote_green.png) no-repeat 10px 10px!important;  
  padding: 5px 10px 5px 50px!important;  
  border: 1px solid #8BCA61!important;  
}
/*------------------------------------------*/


Красный вид цитаты:
Шесть цветовых решений вида цитат для uCoz

В ксс
/* Красный вид цитаты 
------------------------------------------*/
.bbQuoteBlock {  
  margin: 15px 0px 15px 0px!important;  
}

.bbQuoteName {  
  display:none;  
}

.quoteMessage6 {
  overflow: hidden!important;
  text-align:justify!important;
  font:115%/1.5 Verdana,Arial,Helvetica,sans-serif!important;
  color:#CE3A12;text-shadow:1px 1px 1px #fff!important;  
  font-style: italic!important;
  background: #FFCCCC url(http://www.center-dm.ru/ucoz/Quote/v1/quote_red.png) no-repeat 10px 10px!important;  
  padding: 5px 10px 5px 50px!important;  
  border: 1px solid #FF9999!important;  
}
/*------------------------------------------*/

На этом всё =) Новые скрипты для ucoz

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  5-02-2012, 12:49   Просмотров: 3736   
цветовых, решении, стандартный, будем, uCoz, этом, решений, Шесть, готовом, цитат, uCoz,
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Пользователь offline art-biz 11 февраля 2012 21:20
Не пашет! Походу вам надо бы картинки перезалить...

          1
Пользователь offline r43 20 февраля 2012 19:35
наконец то нашел то что искал!

          2
Пользователь offline kemtron 3 апреля 2012 20:33
Что-то не работает

          3

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.