Верстка шаблонов для Bitrix

Bitrix logo

Эта заметка предназначена для начинающих работать с CMS Bitrix, или тех кому, по работе или для себя, нужно сверстать скин для этой CMS.

Что нам понадобится? Всего ничего -
* стоящий битрикс
* руки

Стоящий битрикс можно заменить установленной 30-дневной полнофункциональной демо-версией. Она достаточно легко ставится, а скачать ее можно тут - тут

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

Если таких нет - можно попытаться поискать в инете, однако я думаю стоящего там не найти. Я связываю это с тем фактом что верстка шаблонов для битрикс в рунете дело востребованное и, соответственно, никто не торопится бесплатно выкладывать в сеть то, что можно продать.

В битриксе шаблон представляет собой набор файлов вида:

components
images
include_areas
lang
page_templates
.styles.php
description.php
footer.php
header.php
screen.gif
styles.css
template_styles.css
Последние 2 файла - это основные стили шаблона. Также почти у каждого компонента (папка components) присутствуют свои css-файлы. Файлы footer.php и header.php - дают вместе шаблон страницы. Используя их, можно менять структуру html-я, добавлять свои css-классы и т.д. В админку битрикса встроен файловый менеджер с возможностью редактирования любых текстовых файлов. Но я предпочитаю править их вручную, ибо админка жутко тормозит (понавешали всего, что смогли придумать).
Итак мы выбрали шаблон. Подключаем его в [панель управления] - [сайты] - редактирование сайтов.
Две основные вещи, с которыми нам придется работать при размещении разных "компонентов" в нужных частях страницы, это главный шаблон сайта, и шаблоны компонентов (меню, списка новостей, ...). папка components имеет вид:
bitrix
   |_компонент.1
      |_название.шаблона.компонента.1
      |_название.шаблона.компонента.2
      |_название.шаблона.компонента.3
   |_компонент.2
      |_название.шаблона.компонента.1
      |_название.шаблона.компонента.2
      |_название.шаблона.компонента.3
   ...

Итак, допустим нужно разместить анонс новостей в левой колонке. Я для этого делал такую вещь - в шаблоне сайта копировал код поключения списка новостей из центральной части в левую. Потом заходил в [Редактировать сайт], нажимал на [Копировать шаблон] у появившегося блока - таким образом создается отдельный шаблон для списка новостей и его можно смело править. Далее изменял настройки инфоблока на нужные, ну и подгонял внешний вид под дизайн.

Таким же образом можно сделать любого вида меню - горизонтальные, вертикальные, выпадающие и нет - в разных областях страницы.

Если что-то нужно пояснить, спрашивайте здесь. Или на форуме поддержки битрикса - он у них на удивление активный. Если точнее, форум смотрится со стороны как школа :).

Комментарии

А вы оказываете услуги по натяжке шаблонов? Если, да, свяжитесь пожалуйста по почте. Заранее, благодарю.

А на каком движке данный сайт? :)

На друпале