Верстка под битрикс и создание шаблона – особенности, проблемы, рекомендации
Опубликовано 17 Фев 2010
«Верстка для 1c-bitrix» – несколько преувеличенное высказывание, потому как любой html-макет можно адаптировать в шаблон для этой CMS. Но, не смотря на это, я попробую выделить несколько характерных особенностей, которые помогут при шаблонизации. А также будут рассмотрены некоторые типичные ошибки, приводящие к искажениям представления сайта в режимах «редактирование» и «разработка».
Чуть ли не половина проблем связана со всеми любимым старичком IE 6. Отказываться от него рано, он уверенно держит свои несколько % пользователей, к тому же его поддержка официально заявлена самим разработчиком. Хоть в 9й версии и обещают отказаться.
Общие принципы размещения стилей
В шаблоне битрикса по умолчанию под стили отводится 2 файла:
- в styles.css следует размещать правила, которые будут использоваться для оформления контента. Стили из этого файла подключает визуальный редактор. Желательно, чтобы правила styles.css не использовали имена классов\идентификаторы внешних по отношению к контенту блоков.
Например, пусть код html выглядит так
<div id="main"> <p>text</p> </div>
где в редактор передается содержимое div. Тогда абзац со стилем
p {color:#ff0000;}
при изменении будет показан красным цветом, в то время как с правилом
#main p {color:#ff0000;}
в редакторе текст отобразится цветом по умолчанию.
- в template_styles.css складываем все что связано с разметкой самого шаблона
На этапе верстки можно сразу наполнять оба файла, что ускорит работу в дальнейшем.
Названия стилей
Категорически не советую использовать имя класса .title – сложно понять, зачем разрабы назвали так заголовок диалогового окна визуального редактора.
В одной из тем форума писали что класс .mail вызвал ошибку «Не удалось обнаружить код вызова компонента». Воспроизвести ошибку не удалось, так что пользоваться можно без опаски. Оставил тут как пример непредсказуемости битрикса:)
Плавающие блоки в режиме разработки
По возможности для обтекаемых элементов следует задавать явную ширину. Если это не делать и в такой блок поместить компонент\включаемую область, то IE6 растянет его на 100%, сдвинув все остальные вниз.
Часто эксплорер смещает блоки друг под друга даже с фиксированными размерами. Такое происходит когда их сумма по горизонтали равна ширине родительского контейнера. Лечится несколькими способами:
#parent_block .bx-component-border {width:auto;}
Для всех компонентов из внешнего блока ставим автоматическую ширину пунктира выделения. Срабатывает не всегда.
#parent_block .bx-component-border
{padding-left:0px; padding-right:0px; border-left:none; border-right:none;}
Действует безотказно, но теряется пунктир вокруг компонентов слева и справа.
Overflow:hidden
Mozilla в элементах с этим свойством не показывает иконку компонента, если он находится вверху блока. Исправить можно сместив иконку вниз правилом
#parent_block .bx-component-panel {top:0;}
Фоновые изображения
Содержимое сайта в режиме разработки смещается относительно фона, если его установить для контейнера body. Следовательно бакграунд лучше ставить на первый вложенный блок.
Если IE6 не показывает фон какого-либо элемента, обычно помогает установка для него position:relative.
PS: у Вас может возникнуть вполне логичный вопрос – зачем нужны эти костыли для административных режимов да еще и в устаревшем браузере. Ответ прост – когда делаете для себя и точно знаете чем будете пользоваться, можно на многое закрыть глаза. При разработке сайтов на заказ, на мой взгляд, нужно делать максимально совместимые решения.
Loading ...
а вообще, в битриксе возможна настоящая дивная верстка, не смешанная с таблицами? и на сколько это правильно и валидно – смешивать таблицы с версткой?
Делать шаблоны для битрикса из верстки на дивах можно. Как впрочем и из табличной.
Что касается смешивания – валидность будет зависеть только от качества верстки. А семантичным считается использовать таблицы для представления данных, но не создании структуры.
Алексей, помогите пожалуйста. При переносе шаблона HTML в Битрикс, фоновое изображение перекрывает админ. панель
Код страницы
ShowPanel();?>
…….
CSS
#art-page-background-simple-gradient
{
position: absolute;
background-image: url(‘images/Page-BgSimpleGradient.jpg’);
background-repeat: repeat-x;
top:0;
width: 100%;
height: 900px;
}
Вот этот Page-BgSimpleGradient.jpg накрывает админку и все. Если по этим кусочкам кода непонятно, то могу весь привести его.
эх, HTML код съелся
Владимир Куликов
1. Если есть возможность отказаться от position:absolute, то можно его убрать и все будет хорошо
2. Если нельзя, то блок art-page-background-simple-gradient нужно поместить в контейнер со свойством position:relative. В Вашем случае это будет выглядить примерно так:
ShowPanel()
[div style="position:relative; height:0; line-height:0; font-size:0;"]
[div id="art-page-background-simple-gradient"] [/div]
[/div]
Возможно я ошибусь, т.к. не видно структуры документа.. Если не получится, пишите код на alexeyvaleev[sobaka]gmail.com
Спасибо! Получилось похоже.
Так же спасибо за полезные блоги. Занес давно уже в избранное.
Скажите, если, например, тэг h1 по-разному описать в template_styles.css и styles.css и этот h1 используется как шаблоне так и в workarea. То как он будет отбражаться на сайте? В шаблонной части как описан в template_styles, а в контенте как в styles?
Wolf11: и в шаблонной части и в контентной будет отображаться как написано в template_styles. Стили template_styles переопределяют (или дополняют) стили, которые находятся в файле styles.css. Смысл styles.css в том, что он подгружается и используется визуальным редактором, также для правил из него можно сделать текстовое описание
Просто назначениt этого style.css мне сначало было не совсем понятно и я его не использовала. Теперь после Вашей статьи до меня дошло и я вот не знаю, стоит ли теперь разделять стили или забить на это дело…
А ещё скажите, пожалуйста, как взаимодействуют стили из компонентов? Их тоже может переопределять template_style?
Повторюсь, делать styles.css имеет смысл если Вы пользуетесь визуальным редактором.
Да, template_styles переопределяет стили из шаблонов компонентов (те что в файлах style.css) потому что он подгружается последним, и при равной специфичности имеет приоритет (про специфичность стилей одна из статей на блоге)
Алексей, можете ли вы написать полную статью адаптирования html шаблона под битрикс? Например, взять любой корпоративный темплейтмонстровский шаблон и прикрутить его к системе, чтобы всё работало?
@Сергей: желание написать статью есть, знаний тоже вроде хватает, но, главная проблема – время. Публикации несомненно будут, вопрос только как скоро.
@Алексей, я мог бы помочь в написании, правда я только изучаю эту систему и прохожу сертификацию :)
Мне приходилось работать со многими цмс и адаптировать свои дизайны по их структуру и вот я добрался до битрикса… честно говоря сразу не разобрался)) Привык вручную код вносить, а здесь визуальный какой то редактор, вот и непонятно стало что к чему, начал разбираться :) Очень помогла статья «Образцы вызова стандартных компонентов», хорошо написана ;)
Алексей, огромное спасибо за Ваш блог…очень помогает. Присоединяюсь к просьбе Сергея, такой мануал очень сильно помог бы.
Как сделать чтобы цвет фона в визуальном редакторе был не белый, а другой? Никак не могу разобраться!
Dmitry, в styles.css надо прописать body { color:#код_цвета }
Здравствуйте, Алексей, подскажите, будьте добры, в хорошо(всмысле без битрикс все отображается как надо) сверстанной страничке, при создании шаблона на ее основе, съезжает левая колонка далеко за пределы экрана, но при включенном режиме правки она возвращается на место, которое ей было отведено…с чем такое поведение может быть связанно??
Галина, с большой вероятностью в каком-нибудь из шаблонов компонентов есть лишний закрывающий тег (div например). В режиме разработки компоненты обрамляются тегами в виде рамки с помощью битрикса и лишний тег игнорируется.
Алексей, здравствуйте. Хочу прояснить для себя один момент. Можно ли на Битрикс содать главную страницу с одним шаблоном(с более высоким заголовком так как это должна быть страница в виде рекламки на компанию с описанием о ней) а на всех остальных(так как они должны показывать товар интернет магазина ) использовать другой шаблон. Если это можно реализовать то каким образом. Макет странички главной могу вам прислать для большей видимости.
В указаном сайте мне необходимо сделать редизайн и болеее верно настроить левое меню для выбора товара.
Татьяна, здравствуйте! Смотрите, для решения вопроса с разными заголовками для главной и остальных страниц есть несколько методов:
0. Установить «Свойство» страницы или раздела и затем это свойство проверять в шаблоне.
1. В шаблоне сайта сделать проверку на главную страницу $APPLICATION->GetCurPage(true)==»/index.php» и навешивать отдельный класс на заголовок. Минус метода – если захочется добавить еще каких-нибудь отличий главной на уровне шаблона, то придется лепить подобные проверки еще, а это уже нехорошо.
2. Скопировать шаблон, поменять стили и подключить для главной из админки. Минус – нерационально для таких малых изменений. Плюс – шаблон можно изменить до неузнаваемости:)
Алексей спасибо. Я буду пробовать. Битрикс только изучаю и нужно сделать редизайн в конкретный проект.
Алексей, подскажите пожалуйста. Вставляю верстку в битрикс (сайт ipoonline.ru). Вроде все ок, админ-панель выводится как надо. Но все диалоги редактирования компонентов при разворачивании на весь экран (а так по умолчанию открывается редактирование включаемых областей) – отображаются в самом верху страницы (при этом скролл блокируется). В итоге получается, что расположенные внизу страницы включаемые области я не могу вообще отредактировать. Танцы с бубнами с правкой стиля top у элемента DIV, который содержит редактор включаемой области, с помощью встроенного в браузер инструментария – опустим – нужно починить как-то базовый функционал. Почему так может происходить? Сразу отмечу, DIV в котором лежит редактор включаемой области не содержит никаких лишних определений свойств из шаблона сайта.