Для выделения цветом в рамке с картинкой цитат и кода, вставленных с помощью 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 ;}
Для скругления краев в код нужно добавить где 10px - это величина скоса
Каждому сайту требуется свое цветовое оформление, поэтому разберем код на части
Цитата
border:2px solid #8C8984
Цитата
background:#E5E0EE;
Цитата
url('/bat/codeee.png') no-repeat top right !important;
Выделенное синим - это картинка-подсказка и позиционирование справа
padding и margin выставляем в зависимости от потребностей к общему виду элементов
