Приветствую Вас, Гость! Регистрация RSS

Пятница, 29.03.2024
  
Главная » Файлы » Скрипты+Программы » Скрипты для Ucoz






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



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

Шаг 1 - Разбираем HTML:

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

HTML
Code

<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, а не прописаны в стандартный файл стилей. Но слава богу у нас имеются классы для стилей, которые мы будем изменять.

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

Белый вид цитаты:


CSS-Code:
Code

/* Белый вид цитаты  
------------------------------------------*/  
.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;  
}  
/*------------------------------------------*/


Тёмный вид цитаты:



CSS-Code:
Code

/* Чёрный вид цитаты  
------------------------------------------*/  
.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;  
}  
/*------------------------------------------*/


Оранжевый вид цитаты:



CSS-Code:

Code

/* Оранжевый вид цитаты  
------------------------------------------*/  
.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;  
}  
/*------------------------------------------*/


Синий вид цитаты:



CSS-Code:

Code

/* Синий вид цитаты  
------------------------------------------*/  
.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;  
}  
/*------------------------------------------*/


Зелёный вид цитаты:



CSS-Code:

Code

/* Зелёный вид цитаты  
------------------------------------------*/  
.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;  
}  
/*------------------------------------------*/


Красный вид цитаты:



CSS-Code:

Code

/* Красный вид цитаты  
------------------------------------------*/  
.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;  
}  
/*------------------------------------------*/


На этом всё...

Автор\Источник: http://www.center-dm.ru
Категория: Скрипты для Ucoz | Добавил: bizon | Теги: шесть, Решений, ucoz, вида, Скрипты для ucoz, цветовых, для, цитат
Просмотров: 1421 | Загрузок: 0 | Рейтинг: 1.0/8 | |

Новости по теме:

Поделись ссылкой

  • - ссылка
  • - BBCode
  • - HTML

  • Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Гость