Доброе время суток.

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

Для примера я решил использовать CSS свойство border-radius и показать вам, как я (а в скором времени и вы) экономлю время.

Вот такие блоки я хочу увидеть в итоге:

html:

<div class="divOne"></div>
 <div class="divTwo"></div>
 <div class="divThree"></div>
 <div class="divFour"></div> 

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

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

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

Шапка сайта

В шапке сайта укажите название вашего ресурса. Если название абстрактное, например
«Стуслов и сотоварищи», то постарайтесь написать небольшую аннотацию к названию вашего ресурса, например:

«Стуслов и сотоварищи»

Меховое ателье

Это сразу даст вашему посетителю понятие о том, чем занимается г-н Стуслов

1) Создание меню. 

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

В панели администратора заходим в менеджер модулей ( Расширения => модули ), над списком модулей находим кнопку «Новый» ( Крестик ). На открывшейся странице находим пункт «Меню», жмем на него. Слева в верхней строчке пишем название модуля, оно же будет заголовком, выводящимся на странице. Варианты включить и выключить для отображения заголовка ( показать или скрыть его на странице сайта ), включить или отключить модуль. Выбыраем из списка позицию шаблона, в которой будет выведено меню (например «top» или «left»). Ниже: выбор группы пользователей, для которых показывать меню, дополнительные стили для меню.

Справа видим выпадающий список со всеми меню, выбираем по

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

Код CSS

#header {background: #333;}
 #header h1 {font-size: 36px;}
 #header p {font-size: 24px;}
 #header p a {color: #fff;}
 #header p a:hover {color: yellow;}

Код LESS

#header {background: #333;
   h1 {font-size: 36px;}
   p {font-size: 24px;
     a {color: #fff;
       &:hover {color: yellow;}
     }
   }
 }

Объясню теперь подробнее. Хотя по коду уже должно быть все понятно.

В коде LESS первый селектор #header имеет свойство цвета фона и затем фигурная кавычка не закрывается, это значит что все последующие селекторы имеют вложенность в данный селектор. Эта вложенность может быть многоуровневая. Хороший пример многоуровневой вложенности показывает 5 строка (кстати, строки в коде CSS и LESS соответствуют друг другу).

Где здесь удобство:

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

Часто спрашивают можно ли стандартные поля формы входа Joomla вывести во всплывающем окне, ответ — да, можно, но для этого потребуется сделать ряд доработок. Для модификации используем шаблон вывода — compact.php

Для вывода формы авторизации в lightbox применяем тот же принцип, что и в статье — Вывод модуля «Login» во всплывающем окне, т.е. для вывода используем mootools.

Недавно заказали верстку каталога недвижимости, ничего сложного, кроме одного момента — формирование превью изображений в категории, материале и модулях, т.к. в качестве каталога использовался FLEXIcontent, то описание сделаю именно для него, хотя для com_content схема действий будет аналогичная.

Для работы данного решения потребуется библиотека GD2, по этому рекомендую заранее узнать стоит она у хостера или нет.

Изначально у меня было три превью и по клику на первый итем нужно было выводить в модальном окне нормальное изображение, т.е. возможность обработки изображения, и приведения к требуемому виду, до загрузки на сайт невозможна, а т.к. фон неоднородный, то возможность наложить сверху другое изображение отсутствовала, следовательно средствами css нужный результат не получить (один способ есть, но решение сложное и не кроссбраузерное). В итоге после консультаций и раздумий (да-да, собрали целый консилиум из-за создания одной картинки ;) ) принято решение обрабатывать

CSS спрайты — это вывод отдельных элементов единого изображения на веб — странице. То есть одна большая картинка, либо несколько разных, но объединенных в один файл рядом друг с другом. Зачастую подобным образом группируют множество различных иконок. Разработчики называют подобный файл мастер сеткой. В качестве примера возьмем одну картинку, из которой нам нужно вывести в разных частях страницы различные ее элементы. Как вариант, порезать ее на куски и определять каждую часть отдельно, 1 элемент — 1 отдельный файл. Впрочем еще несколько лет назад именно так все и делали. Простейший вариант по своей сути. Но данный метод имеет один существенный недостаток, а именно — количество HTTP запросов, которые отсылает сервер браузеру. Одна картинка — это один запрос. Чем их больше, тем дольше будет загружаться страница. Посему CSS спрайты в первую очередь служат для сокращения количества этих самых запросов.Выше на картинке вполне четко показан принцип работы CSS спрайтов если представлять

На днях столкнулся с проблемой, при верстке шаблона для Joomla 3. Я не использовал Bootstrap, а jQuery хотел подгружать с CDN Яндекса. При начальной верстке все шло гладко, но потом стал замечать, что в секцию <head  начали залезать джумловские jQuery и Bootstrap. По подсказке коллег с JF я начал копать в сторону модулей и выявил этих лазутчиков. Они находятся в модулях и компонентов и прячутся за коротенькой строчкой:

JHtml::_('bootstrap.tooltip');

Я нашел эту строчку в модуле mod_breadcrumbs.

Сделал свой шаблон модуля, закомментировав эту строку. И вроде все хорошо, но после установки JoomShopping-а, меня опять встречали эти «незванные гости». Полазив по файлам нашел подобную строчку в файле components/com_jshopping/lib/factory.php на 167 строке и опять закомментировал.

JHtml::_('bootstrap.framework');

Правда в ситуации с модулем я переопределил шаблон, но как быть с JS пока не знаю. Возможно при обновлении (а у меня версия 4.1.0) файл перепишется. Так что если к вам лезут гости — ищем в модулях, компонентах строку: JHtml::_('bootstrap.

Что это и зачем они нужны? 

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