«Верстка для 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: у Вас может возникнуть вполне логичный вопрос – зачем нужны эти костыли для административных режимов да еще и в устаревшем браузере. Ответ прост – когда делаете для себя и точно знаете чем будете пользоваться, можно на многое закрыть глаза. При разработке сайтов на заказ, на мой взгляд, нужно делать максимально совместимые решения.
Больше статей и материалов по web-разработке в tg-канале - подписывайтесь!
Подписаться в telegram
а вообще, в битриксе возможна настоящая дивная верстка, не смешанная с таблицами? и на сколько это правильно и валидно — смешивать таблицы с версткой?
Делать шаблоны для битрикса из верстки на дивах можно. Как впрочем и из табличной.
Что касается смешивания — валидность будет зависеть только от качества верстки. А семантичным считается использовать таблицы для представления данных, но не создании структуры.
эх, 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 в котором лежит редактор включаемой области не содержит никаких лишних определений свойств из шаблона сайта.
Алексей, подскажите пожалуйста, что-то я заморочился с примером в начале статьи, когда текст «будет показан красным цветом» или «цветом по умолчанию». Смоделировал ситуацию, сначала записал в пустой styles.css код p {color:#ff0000;} и в редакторе все отобразилось красным. Потом styles.css изменил на #main p {color:#ff0000;} и в редакторе текст все равно остался красным, а не как у вас написано «цветом по умолчанию». Или я что-то не так понял? Поясните пожалуйста для начинающего. :)
Такое возможно, если код <тэг id="main"> является частью страницы, а не шаблона.
Установила битрикс, все достаточно клево, практически сразу после установки получаем готовый рабочий интернет магазин.
подскажите пожалуйста, вытащил из битрикса html страницу со всеми ее стилями чтобы на компьютере доверстать, устанавливаю на ссылку фоновую картинку а она не применяет а просто цвет применяется, классы точно не пересекаются. стиль подключил свой собственный. пробовал уже убирать остальные стили оставался только мой подключенный, все равно не показывает фон. если прсто в хтмл установить картинку она отображается вот фон нет. подскажите пожалуйста в чем может быть пролема
serzhei, сейчас во всех браузерах есть средство просмотра примененных стилей. Проще всего это сделать в FF firebug.
Вставил body { color:#код_цвета } но цвет фона не поменялся :-(
Приветствую, Алексей!
В шаблоне есть вывод банера на главной странице через GetCurPage(false)==SITE_DIR):?>. Как сделать чтобы банер выводился на всех страницах включая главную, но в тоже время на каждой странице изображение должно быть разное. На крайний случай, пусть изображение будет одно, но нужно чтобы оно присутствовало на всех страницах. Добавив «!» после (false) банер стал отображаться на всех страницах кроме главной. Зашел в тупик в общем…
Просьба помочь!
суть,
http://clip2net.com/s/6ChUf2 браузер «фаерфокс » версия 26.0 FF cайт рассыпается
http://clip2net.com/s/6CiiZg «энтернет эксплоуер» версия 11.11.0.9600 cайт рассыпается
разрешение экрана 1366×768
в хроме, опере, яндексе -все окк)))
тех поддержка не смогла помочь. с тех поддержкой расстались, проблема осталась. Кого из специалистов посоветуете, устаранить беду. (за оплату конечно)
спасибо