# Создание собственного шаблона

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

### **Что мы сделаем?**

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

{% hint style="danger" %}

### Внимание!

У движка есть тема "**default**", которая является системной, поставляется вместе с дистрибутивом и находится в папке `/themes/default`. В этой теме находятся все необходимые для работы файлы по умолчанию: шаблоны, стили, картинки, скрипты и т.д. Также, каждый отдельный модуль может иметь свою папку с шаблонами `/module_name/templates`, или другими файлами общего доступа `/assets/modules/module_name`.

**Нельзя редактировать, или удалять файлы в этих папках, нельзя ничего туда добавлять**, иначе Вы потеряете совместимость с последующими обновлениями, или же в работе движка могут возникнуть ошибки, вплоть до полной потери работоспособности.
{% endhint %}

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

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", для Главной страницы используется именно тот файл, который мы только что скопировали в нашу тему. И все изменения в этом файле сразу будут видны на Главной странице нашего сайта.

{% hint style="info" %}
Инструкция будет дополнена.
{% endhint %}