бесплатные списки прокси
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Оформляем цитаты и код
Оформляем цитаты и код
worldname Дата: Четверг, 2011-11-03, 01:59 | Сообщение # 1
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
Для выделения цветом в рамке с картинкой цитат и кода, вставленных с помощью b-b кодов, нам необходимо внести правки в таблицу стилей. В предыдущей теме мы научились <a href="/forum/30-233-1">заменять стандартные надписи</a> quote и code на свои. Теперь научимся полностью оформлять
Примеры полностью стилизованных объектов

Цитата
Пример цитаты с картинкой


Код
Пример кода с картинкой


Переходим к таблице стилей. Панель управления - Редактор страниц - Управление дизайном модуля - список шаблонов - CSS

В CSS нам нужны следующие строчки:

Код
.codeMessage     
.quoteMessage


Прописываем следующее

Цитата
.codeMessage {border:2px solid #8C8984 !important; margin: 7px 10px 7px 0; padding:20px !important; background:#DBE1EB url('/bat/codeee.png') no-repeat top right !important;}
.quoteMessage {border:2px solid #8C8984 !important; margin: 7px 10px 7px 0; padding:20px !important; background:#E5E0EE url('/bat/citata.png') no-repeat top right !important; }

Это стилизация с картинкой и без закруглений. Если картинка не нужна, прописываем следующее
Цитата
.codeMessage {border:1px solid #8C8984 !important; margin: 7px 10px 7px 0; padding:20px !important; background:#DBE1EB ;}
.quoteMessage {border:1px solid #8C8984 !important; margin: 7px 10px 7px 0; padding:20px !important; background:#E5E0EE ;}

Для скругления краев в код нужно добавить
Код
border-radius:10px;
где 10px - это величина скоса

Каждому сайту требуется свое цветовое оформление, поэтому разберем код на части

Цитата
border:2px solid #8C8984
бордер - это толщина рамки-обводки цитаты или кода. Чем выделенная синим цифра больше - тем толще и грубее рамка. solid - это цвет обводки. Если нужно заменяем на свои
Цитата
background:#E5E0EE;
это цвет фона
Цитата
url('/bat/codeee.png') no-repeat top right !important;

Выделенное синим - это картинка-подсказка и позиционирование справа

padding и margin выставляем в зависимости от потребностей к общему виду элементов
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Оформляем цитаты и код
  • Страница 1 из 1
  • 1
Поиск: