Блог-нот: Верстка на HTML/CSS

Блог-нот: Верстка на HTML/CSS

Адаптивное гамбургер меню для битрикс

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

Просмотров: 1545 Комментариев: 1 Читать...

Сниппеты типографики bootstrap, для Битрикс

Если вы подключили bootstrap к своему сайту, или сверстали весь шаблон, подключив bootstrap из ядра битрикс. Имеет смысл использовать эти 320 килобайт css стилей по полной. Во первых это упростить и стандартизирует создание новых разделов, оформления текста и элементов HTML. Во вторых: не придется раздувать файлы стилей основного шаблона.

Просмотров: 2566 Комментариев: 3 Читать...

INPUT type="file" Предпросмотр превью картинки до загрузки

Рассмотрим на примере компонента "Форма добавления-редактирования элементов инфоблока", как сделать ее более удобной для пользователя. Способ самодостаточный и будет работать с любой формой у которой есть input[type="file"]

Просмотров: 2162 Комментариев: 0 Читать...

Мобильные версии страниц и поисковые системы

Согласно требования поисковых систем: Яндекс и Google, в случае если у вашего сайта имеется мобильная версия, нужно уведомить поисковые системы о наличии мобильных страниц. В битриксе-сайте это сделать достаточно легко, через API.

Просмотров: 1920 Комментариев: 1 Читать...

Методология разработки сайтов на Битрикс. На правах идеи.

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

Просмотров: 2302 Комментариев: 3 Читать...

Список новостей с автопрокруткой через overflow:scroll

Простенький javascript позволит сделать автопрокрутку в шаблоне списка новостей. Достаточно актуально для новостных сайтов или при достаточно количестве новостей. Для начала просто выводим компонент список новостей, упаковываем его в div с overflow:scroll и добавляем javascript

Просмотров: 2509 Комментариев: 0 Читать...

Подключение jquery из ядра битрикс и объединение своих скриптов в один файл

Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие галереи и прочее- то таких внешних скриптов может набежать по 10/20 на сайт. Имеет смысл объеденить их в один, для большей скорости загрузки сайта и в принципе для оптимизации. Это, конечно, можно проделать вручную но можно воспользоваться функционалом битрикс.

Просмотров: 10527 Комментариев: 8 Читать...

Простые калькуляторы в карточке товара каталога на Битрикс

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

Просмотров: 7369 Комментариев: 11 Читать...

Малая корзина Битрикс, упрощенный шаблон

Шаблон малой корзины битрикс, который можно вывести в боковом разделе шаблона или в шапке интернет-магазина. Код окультурен и урезан для простой верстки. Стилевое оформление пустое, Вы сможете самостоятельно привести слили к нужному виду или в соответствие с дизайн-макетом сайта.

Просмотров: 6506 Комментариев: 1 Читать...

Старые шаблоны битрикс для простой верстки

Новые версии типового интернет-магазина, который идет в комплекте с Битрикс (от 12 версии и выше), достаточно технологичные в плане использования скриптов, js-красивостей, css3 анимации и прочих свистелок/перделок. Однако, в самих шаблонах каталога разобраться с ходу достаточно трудно и как-то их кастомизировать под потребности своего дизайна бывает тяжеловато и долго. В этой записке выложу старые шаблоны не только каталога, но и остальных очень уж усложненных верстальщиками Битрикс.

Просмотров: 9145 Комментариев: 16 Читать...

Помечаем новинки лейблом в каталоге битрикс

Достаточно часто, при разработке каталога товаров или интернет магазина на системе управления Битрикс, встает задача как-то пометить новинки или спецпредложения. Как правило, это делается с помощью небольших лейблов которые вешаются на конкретный товар в списке всех товаров. Сделать это достаточно просто, и, возможно, не расскажу ничего нового. Однако, быть может, кому-то сгодится.

Просмотров: 9859 Комментариев: 28 Читать...

Элементы HTML блочные и строчные

HTML элемент – это то, что создаст и выведет в область просмотра браузера при анализе и обработке HTML документа и таблицы стилей CSS, которая отвечает за оформление HTML документа. Элементы делятся на блочные (block elements), и строчные элементы (inline elements). Блочные элементы HTML предназначены для построение структуры HTML документа, строчные элементы HTML для оформления текста в документе.

Просмотров: 8339 Комментариев: 0 Читать...

Popup полоска на сайте.

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

Просмотров: 6954 Комментариев: 2 Читать...

Выпадающее меню с анимацией для Битрикс

Ни когда особо не заморачивался с меню в битрикс, как правило просто модифицировал встроенные шаблоны под дизайн. Но вчера решил заморочиться и сделать себе выпадающее меню с легким эффектом анимации (собственно живой образец можете наблюдать на этом сайте). Решил поделиться, малоли кому понадобится.

Просмотров: 13243 Комментариев: 32 Читать...

Табы из свойств инфоблока в Битрикс

Думаю все знают что такое табы или вкладки. Расскажу как на их основе вывести свойства инфоблока Битрикс в детальную новость. С практической точки зрения в них можно вывести например: адреса, ссылки на источники материалов, похожие материалы...да в общем все душе, что угодно

Просмотров: 15611 Комментариев: 15 Читать...

Спойлер в списке новостей Битрикс

Иногда нужно сделать спойлеры в копонентах Битрикс, в основном конечно, имеет смысл при очень больших обьемах контента. Скорее всего в каталогах, но для простоты опишу как это делается в компоненте новостей Битрикс при выводе анонса.

Просмотров: 7450 Комментариев: 0 Читать...

Тени уголком через css

Расскажу как сделать тень уголком не используя изображений, с одной стороны изображения это более кроссбраузерный способ, однако у css-3 несомненный плюс- срабатывает даже если у пользователя картинки отключены (да, такие люди еще есть), и за этой технологие будущее. Еще года полтора и все забудут о IE-7. Надеюсь.

Просмотров: 6415 Комментариев: 0 Читать...