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

Исходная задача

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

• Создать свою тему с названием "lesson"
• Поменять Главную страницу сайта. Вместо имеющегося по умолчанию текста, на ней крупными буквами должно выводиться "Добро пожаловать!"
• Заменить логотип сайта. Вместо JohnCMS использовать свою .PNG картинку.
• Изменить цвет боковой панели навигации: вместо белого использовать какой-нибудь темный оттенок, подходящий по дизайну. Соответственно поменять цвет иконок.

Условия

Для удобства работы, рекомендуется иметь неа своем компьютере локальный сервер (например Open Server), где должен быть установлен и настроен JohnCMS. В крайнем случае некторые действия можно проводить непосредственно на хостинге, однако так делать крайне не рекомендуется.

Пошаговая инструкция

1. Делаем В папке /themes создаем папку lesson
2. Заходим в админку движка и далее в системные настройки. Там в списке имеющихся тем мы увидим нашу lesson. Выбираем ее и жмем "Сохранить".
   Теперь для нашего сайта применена тема "lesson" и все, что мы будем в ней делать, сразу же будет видно.
3. На заметку Откуда? Чтоб поменять Главную страницу сайта, мы должны отредактировать ее шаблон, который находится в модуле /modules/homepage.
   В папке с модулем есть папка /templates а в ней лежит файл index.phtml - это и есть Главная страница, этот файл нам и нужен.
   Из предупреждения выше мы знаем, что менять шаблон в самом модуле нельзя, поэтому мы должны в начале скопировать файл шаблона в свою тему, а уж потом его менять. Не переместить, а именно скопировать, оригинал файла должен остаться на своем месте
4. На заметку Куда? /themes/lesson - это папка с нашей темой, которую мы создали выше. Мы должны скопировать сюда файл index.phtml из модуля homepage. Для шаблонов в папке с нашей темой должна быть подпапка templates.
   Чтоб не возникало конфликтов (например файл index.phtml может быть у многих модулей), в папке templates создается подпапка с названием пространства имен для шаблонов модуля (обычно совпадает с именем папки модуля) и уже в нее копируется нужный нам файл.
5. Делаем В папке с нашей темой /themes/lesson создаем подпапку templates а в ней подпапку с именем модуля ( в нашем случае это homepage) откуда мы копируем шаблон. В итоге должно получиться /themes/lesson/templates/homepage/ сюда и копируем наш index.phtml
   Теперь, пока у нас в админке включена наша тема "lesson", для Главной страницы используется именно тот файл, который мы только что скопировали в нашу тему. И все, что мы в этом файле поменяем, немедленно отразится на Главной странице нашего сайта.

Пока все. Дальнейшие инструкции будем писать все вместе.