Работа со стилями в битрикс

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

Для начала немного окунемся в теорию. По задумке разработчиков битрикс, файлов со стилями должно быть много… как бы это нелепо ни звучало. Итак, стилевая составляющая типового шаблона сайта предполагает наличие:
1. файла template_styles.css — в терминологии битрикс «стили шаблона»
2. styles.css — «стили сайта»
3. style.css — стили шаблона компонента
4. дополнительные файлы стилей

template_styles.css

Файл располагается в корневой директории шаблона и включает правила, которые не отвечают за отображение результатов работы компонентов, контента сайта и содержимого включаемых областей. Обычно сюда относят базовую разметку сверстанного макета — размеры и положение колонок, общий фон сайта, обрамляющие блоки включаемых областей и т.д. Этот файл в теле страницы подключается последним, поэтому, при равной специфичности, правила из template_styles.css будут переопределять другие.

styles.css

Файл располагается в корневом каталоге шаблона. В него входят стили, использование которых планируется в визуальном редакторе. К любому классу из styles.css можно сделать текстовое описание, оно будет отображаться в выпадающем списке (Стиль).

Зачем это надо читайте в курсе на dev.1c-bitrix.ru:)

Описания хранятся в файле .styles.php в виде

<?
$arStyles = Array(
    "class-name" => "Описание для стиля .class-name",
    "class-name2" => "Описание для стиля .class-name2",
);
return $arStyles;
?>

style.css

Это файл стилей скопированного шаблона компонента. Именно его содержимое можно редактировать из режима разработки.

Файл находится в папке шаблона компонента и содержит правила для форматирования результатов его работы.

Дополнительные файлы стилей

Служат для произвольных нужд, например, я практически всегда делаю layout.css со стилями каркаса сайта.

Подключаются такие файлы в секции файла header.php шаблона таким вызовом функции

<?$APPLICATION->SetAdditionalCSS("/bitrix/templates/".SITE_TEMPLATE_ID."/filename.css");?>

Пример создания файлов стилей для битрикс

Сначала выделяем в общем коде смысловые блоки (при грамотной верстке это делается сразу).

body { margin:0; padding:0; font-family:Arial, tahoma; }

/* стили "каркаса" сайта */
#main { width:979px; margin:0 auto; text-align:left; }
#header { height:548px; position:relative; }
#footer { height:54px; }

.col-1 { width:239px; }
.col-2 { width:707px; }

/* стили контейнеров для включаемых областей */
#header .logobox { position:absolute; width:200px; left:10px; top:10px; }

/* стили контейнеров */
.col-1, .col-2, .col-3 { float:left; }
.wrapper { overflow:hidden; width:100%; }
.clear { clear:both; }

/* стили элементов оформления контента */
/* картинки */
img { vertical-align:top; }
a img { border:0;}
/* списки */
.list { list-style:none; margin:0; padding:0; }
/* текст */
h1 { font-size:1000em; }
.bluetext { color:#00f; }
.uppertext { text-transform:uppercase;  }

/* блок внутри контента */
.box {border:1px solid #d1d1d1;}
.box-indent {padding:0 24px 20px 25px;}
.box h3 {color:#4a4a4a;}

/* форма поиска */
#searchform { margin:0; padding:0; }
#searchform .input { width:100px; border:1px solid #ccc; padding:2px; }

Делим на 3 части — стили шаблона, стили сайта и стили шаблона компонента (в нашем случае bitrix:search.form)

/bitrix/templates/template-name/template_styles.css

body { margin:0; padding:0; font-family:Arial, tahoma; }

/* стили "каркаса" сайта */
#main { width:979px; margin:0 auto; text-align:left; }
#header { height:548px; position:relative; }
#footer { height:54px; }

.col-1 { width:239px; }
.col-2 { width:707px; }

/* стили контейнеров для включаемых областей */
#header .logobox { position:absolute; width:200px; left:10px; top:10px; }

/* стили контейнеров */
.col-1, .col-2, .col-3 { float:left; }
.wrapper { overflow:hidden; width:100%; }
.clear { clear:both; }

/bitrix/templates/template-name/styles.css

/* стили элементов оформления контента */
/* картинки */
img { vertical-align:top; }
a img { border:0;}
/* списки */
.list { list-style:none; margin:0; padding:0; }
/* текст */
h1 { font-size:1000em; }
.bluetext { color:#00f; }
.uppertext { text-transform:uppercase;  }

/* блок внутри контента */
.box {border:1px solid #d1d1d1;}
.box-indent {padding:0 24px 20px 25px;}
.box h3 {color:#4a4a4a;}

/bitrix/templates/template-name/components/bitrix/search.form/search-template-name/style.css

/* форма поиска */
#searchform { margin:0; padding:0; }
#searchform .input { width:100px; border:1px solid #ccc; padding:2px; }

На сегодня все. Весь процесс сложнее описать чем понять, практикуйтесь и пополняйте ряды квалифицированных шаблоностроителей:)