Закрыто Правка шаблонов Joomla (Александр Куртеев)

Правка шаблонов Joomla - Александр Куртеев
​

Чтобы понимать, правильной ли дорогой Вы идёте создавая свой сайт, а так же, какими тропами можно быстрее придти к результату - для этого Вам просто необходим навигатор.
Такой навигатор покажет Вам все подводные камни шаблонов для Joomla, и позволит обойти большинство неприятностей, которые обычно встречаются у каждого второго новичка очутившегося в этом "тёмном лесу".
Специально для таких новичков я вместе с Маршалец Дмитрием, специалистом из нашей команды, выпустили новый видеокурс "Правка шаблонов для Joomla". Данный курс в полном объёме охватывает все возможные проблемы связанные с правкой шаблонов, которые встречаются у половины владельцев сайта на CMS Joomla. Пройдя вместе с нами по всем урокам видеокурса, Вы сможете, самый обыкновенный (бесплатный или коммерческий) шаблон, превратить в индивидуальный шаблон именно под Ваш стиль.

Спойлер: Модуль 1

Модуль 1. Курс "HTML и CSS для новичков"
Знания HTML и CSS для любого web-разработчика - это как ноты для музыканта, или алфавит для писателя. Это то, без чего музыкант не сыграет красивую музыку, а писатель не напишет… да ничего он не напишет без алфавита.

Вы в таком же положении. Без знаний HTML и CSS - Вы не создадите самостоятельно хороший сайт. Просто сайт, кривой и убогий - да. Классный и интересный - нет.

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

Данный курс по HTML и CSS подготовлен с расчётом именно на новичков. Поэтому сложностей с прохождением этого мини-курса у Вас не возникнет.

Изучив этот курс, вы с лёгкостью сможете читать и понимать HTML и CSS код любой web-страницы.

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

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

Курс по HTML

• Небходимое ПО для курса
• Структура HTML
• Создание шапки
• Заголовки
• Абзацы
• Списки
• Изображения
• Ссылки
• Таблицы
• Формы
• Практика

Курс по CSS

• Структура CSS
• Селекторы
• Псевдоклассы
• Псевдоэлементы
• Свойства обработки текста и
• единицы измерения
• Свойства списков
• Свойства обработки
• цвета и шрифта
• Свойства фона
• Свойства границ
• Позиционирование
• Свойства блочных элементов

Спойлер: Модуль 2

Модуль 2. Правка шаблона CMS Joomla
Данный модуль посвящён правке общедоступных шаблонов непосредственно самой CMS Joomla. В этот раздел курса вошло 8 уроков, из которых Вы узнаете, как за несколько кликов мышкой, можно преобразить внешний вид сайта до неузнаваемости.

Итак, давайте поподробнее рассмотрим каждый урок:

Урок 1
Установка FireBug
В этом уроке мы устанавливаем расширение для Mozilla Firefox, которое позволит Вам на подобии рентгена, просматривать всё внутреннее содержание любого сайта.

Урок 2
Основы работы с Firebug
Из данного урока Вы узнаете, как за 1 клик мышкой можно:

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

Всё это, мы с Вами рассмотрим во втором уроке “Основы работы с Firebug

Урок 3
Правка стилей стандартного шаблона Joomla
Если Вы создали свой сайт на основе стандартного шаблона, и внешний вид сайта Вас не устраивает, то Вы легко можете "допилить" этот шаблон под собственные нужды.


В этом уроке мы с Вами рассмотрим что можно изменить в стандартном шаблоне.

А именно:

• изменение ширины шаблона
• правка фона, цвет, фоновое изображение
• цвет и размер шрифтов: меню и материалов
• изменение полей ввода и цвета кнопок
• позиционирование меню в шаблоне

Безусловно, это не все изменения, которые можно произвести с шаблоном, но это основа, освоив которую, Вы сможете править любой элемент Вашего шаблона.

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

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

Но бывают исключения, ведь всё настроить через панель невозможно. Например:

• изменить размеры поля поиска
• поменять цвет или фон кнопки
• подкорректировать положение меню или любого другого элемента
• увеличить размер цены

Из этого урока Вы узнаете как править подобные исключения

Урок 5
Добавление новых позиций в шаблон
Данная возможность обычно применяется для стандартных шаблонов Joomla, потому что они как правило содержат немного (от 7 до 10) позиций для размещения модулей. В то время, как в коммерческих шаблонах можно насчитать около 40, а то и 50 позиций.

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

• модуль статистики
• модуль авторизации
• корзину магазина
• дополнительное меню
• и т.д.

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

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

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

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


Тема данного урока, посвящена как раз тому, как:

• определять размеры любого элемента на сайте
• определять и изменять отступы этих самых элементов

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

Урок 8
Устранение конфликта Jquery
Эта проблема знакома почти всем новичкам. В общих чертах она выглядит следующим образом.

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

А проблема кроется вот в чём. Для работы плагинов содержащих Java-скрипты необходимо подгружать определённые библиотеки Jquery. Но! Для того, чтобы такие плагины работали, необходимо, чтобы библиотеки Jquery подгружались только один раз.

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

Данная проблема исправляется только путём поиска и отключения дублирующих библиотек Jquery. Вот именно об этих хирургических манипуляциях с конфликтующими библиотеками мы и поведём разговор в данном уроке.

Спойлер: Модуль 3

Модуль 3.
Правка шаблона
Интернет-магазина
Урок 1
Структура шаблонов Joomshopping
В этом уроке мы с Вами рассмотрим всю структуру файлов, из которых состоит шаблон Joomshopping. В отличии от шаблона самой CMS Joomla, где мы с вами работали с файлом index.php и правили в основном CSS стили, с шаблоном интернет-магазина дела обстоят иначе.

Весь внешний вид интернет-магазина, состоит из модулей, таких как:

• список товара
• карточка товара
• производители
• продавцы
• личный кабинет клиента
• корзина
• процесс покупки
• список желаний
• и т.д.

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

Урок 2
Как заменить надписи
В этом уроке, мы рассмотрим как правильно добавлять и изменять системные надписи в шаблон магазина.

Урок 3
Список товаров (2 части)
В этом уроке я Вам покажу, как изменить внешний вид списка товаров и непосредственно цену товара, сделав её более акцентированной. В ходе урока, мы с Вами добавим в список товаров, информацию о доставке, оплате и возможных скидках. Кроме этого я расскажу и покажу как изменить внешний вид блока товара: убрать закругленные края, убрать границу, добавить тень.

Урок 4
Карточка товара (3 части)
Добавление вкладок.
В этом уроке, Вы узнаете, как можно сделать карточку товара более компактной, красивой и удобной. Это достигается путём добавления в карточку товара вкладок, в которых можно размещать описание характеристик или любую другую информацию.

Это позволит избежать прокрутки страницы вниз, тем самым вся карточка товара будет постоянно находиться перед глазами посетителя и всё его внимание будет сконцентрировано на товаре.


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


Конкурентные преимущества
Рассмотрим добавление статичных элементов в карточку товара, не имеющих фиксированной привязки к самому товару, а скорее к магазину в целом. Например, “гарантия, доставка, возврат”.

Урок 5
Правка модулей магазина
В этом уроке мы с вами на практике рассмотрим изменение внешнего вида модулей магазина. Изменим внешний вид модулей фильтра и модулей выводящие товары по определенному признаку.

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

Продающий сайт: