У MaxSite CMS існує тільки одна вимога до шаблону: обов'язкова наявність файлу index.php. Все інше віддається на відкуп вебмастера. Але, традиційно склалося так, що шаблони MaxSite CMS використовують частину функціоналу з default-шаблону. Перш за все це стосується використання т.зв. type-файлів (файли форматів даних). Тобто в своєму шаблоні немає необхідності використовувати ці файли - система автоматично їх підключить з default.
Головна відмінність default-шаблону від інших розробок, це те, що левову частку програмування, налаштування функціоналу та базового оформлення, default-шаблон бере на себе. Тобто вебмайстру пропонується вже готовий і повнофункціональний каркас для своїх розробок.
Каркас для нових шаблонів
Default-шаблон може бути каркасом для будь-якого нового шаблону.
Насамперед зробимо новий каталог для свого шаблону. Нехай це буде «mytemplate». Скопіюємо в нього вміст «default». Всі подальші роботи будемо робити в «mytemplate».
Початкові дані шаблону
Відкриємо info.php і вкажемо дані шаблону. Файл є інформаційним, тому немає різниці, що саме ви в ньому вказуєте.
Переходимо в адмін-панель в Основні настройки на вкладку Шаблон сайту. Активуємо свій шаблон.
Тепер, при переході на сайт, буде видно наш новий шаблон.
компоненти шаблону
Модульна сітка сайту передбачає, що її основні блоки матимуть різне функціональне наповнення. Наприклад блок ШАПКА може складатися з логотипу сайту, його назви, різних іконок, а нижче горизонтального меню.
На іншому сайті ШАПКА може містити ці ж елементи, тільки в іншій послідовності. На третьому - тільки меню і назва сайту.
Ось всіх цих випадках модульна сітка єдина, змінюються тільки наповнюють компоненти конкретного блоку. Причому неважко помітити, що, скажімо, меню не змінюється від сайту до сайту по функціоналу, змінюється лише його оформлення.
Таким чином, компоненти шаблону - це готові функціональні блоки, які використовуються від шаблону до шаблону з мінімальними змінами.
Компоненти знаходяться в каталозі шаблону components. У комплекті MaxSite CMS ви знайдете такі компоненти:
Вважається, що компоненти призначені тільки для двох блоків: шапки і підвалу сайту. Вибір компонентів здійснюється в Настройці шаблону в довільному порядку. У шапці і підвалі передбачено розміщення до п'яти компонентів в кожному.
Повністю вивчати компоненти ми будемо трохи пізніше, поки тільки зрозуміємо, що блоки ШАПКА і ПІДВАЛ налаштовуються за допомогою компонентів.
CSS-стилі шаблону
Зверніть увагу, що ми ще не написали жодного рядка коду або css-стилів, але наш шаблон відображається коректно. Це відбувається тому що наш шаблон запозичує з default два стильових файлу:
Файл style-all-mini.css є css-фреймворк, в якому вже закладені всі основні стилі, які як правило використовуються від шаблону до шаблону з мінімальними змінами. Цей файл не потрібно змінювати або копіювати в свій шаблон. Він підключається автоматично і відразу готовий до використання. Наприклад всі css-хелпери знаходяться саме в цьому файлі. Тут же знаходяться стилі від плагінів MaxSite CMS, а також висновок type-файлів.
Файл var_style.css. навпаки містить стилі, які як правило вимагають змін. Наприклад тут знаходиться опис структури, кольору посилань і т.п.
Існує ще третій файл add_style.css. який призначений для шаблонів, які повністю використовують стилі default-шаблону. Наприклад, якщо потрібно змінити буквально кілька елементів, без переробки структури, то є сенс використовувати саме add_style.css.
Який css-файл буде основним?
Схема підключення css-стилів дуже проста:
- style-all-mini.css завжди підключається з default-шаблону. Його не потрібно копіювати.
- Якщо передбачається зміна структури модульної сітки, то використовуємо файл var_style.css. який необхідно скопіювати з default-шаблону. Файл add_style.css можна не використовувати (видалити).
- Якщо структура шаблону не змінюється, а будуть тільки якісь дрібні правки, то використовується add_style.css свого шаблону. Файл var_style.css буде автоматично використаний з default-шаблону.
Крім того, доступний і більш складний варіант - одночасне використання в своєму шаблоні var_style.css і add_style.css.
Зверніть увагу, що технологія default-шаблону така, що верстальщику немає потреби десь вказувати підключення файлів: якщо необхідно використовувати файл, то він просто розміщується в шаблоні - підключення та формування коректного коду повністю лягає на плечі MaxSite CMS.
профілі оформлення
Профілі представляють собою звичайні css-файли, які розташовуються в каталозі css / profiles свого шаблону. У css-файлі визначаються якісь невеликі стилі для зміни або уточнення дизайну. Наприклад профіль font-verdana.css робить шрифт Verdana основним на сайті. А профіль paragraph-justify.css задає основний текст вирівняним за форматом.
Існують і більш складні профілі theme-. css. які серйозно міняють дизайн шаблону.
Профілі вибірково підключаються в Настройці шаблону. Особливо вони зручні у випадках шаблонів, коли необхідно «погратися» якимись елементами або клієнт ще не визначився з вибором кінцевого варіанту.
Файли для роботи з шаблоном
Якщо шаблон буде по функціональності повторювати default, то всі зміни будуть відбуватися тільки в var_style.css (або add_style.css).
Технологія default-шаблону дуже гнучка. Існує можливість змінити практично кожен елемент, причому як через заміну, так і через розширення default-можливостей. Все це ми розглянемо на майбутніх уроках.
HTML-структура шаблону
Зауважте, що до сьогоднішнього дня, я ні разу не згадував про структуру HTML-документа. Якщо ви намагалися вивчати HTML, то напевно знаєте, що будь-який HTML складається з секцій HEAD і BODY. У більшості CMS секція HEAD формується вебмастером вручну. У MaxSite CMS в default-шаблоні (отже і у нас) секція формується автоматично. Це гарантує повністю коректний html-код, де реалізується досить складний програмний код по підключенню стилів, скриптів, файлів, опцій і т.п. Раніше вебмастерам часто доводилося оновлювати файли HEAD з default-шаблону. Тепер можна про це не дбати.
Тому вся HTML-структура шаблону знаходиться в файлі main.php. Це програмний PHP-код з HTML-вставками. PHP-код нас (поки) не цікавить, а ось розібратися з HTML-тегами не складе труднощів. З невеликими спрощеннями, я привожу повний HTML-код:
Дана структура дуже сильно нагадує все ті приклади, що ми розглядали на попередніх уроках. Зазначені css-класи є зумовленими для MaxSite CMS (точніше для default-шаблону), що гарантує повну сумісність між різними компонентами, профілями та іншими css-стилями.
Міняти main.php не потрібно!
Це важливо! Багато веб-майстри роблять помилку, починаючи правити цей файл. Разом з тим, абсолютно однозначно можна сказати, що цієї структури з головою вистачить для 99% існуючих сайтів. Зверніть увагу на три моменти:
- Шапка і підвал визначається компонентами. Компоненти знаходяться в окремих каталогах і файлах. Тому всі зміни виробляються саме там.
- Формування контенту здійснюється в type-файлі. Як правило це зумовлені стилі, класи і в main.php відбувається тільки висновок вже підготовленого html-коду. Зміни у висновку здійснюються на рівні налаштувань або type-файлів (або type_foreach-файлів).
- Висновок сайдбара здійснюється окремою функцією і формується повністю автоматом.
Таким чином, немає ніяких причин для зміни main.php. За рахунок wrap і батьківських блоків у вебмастера є можливість довільно змінювати дизайн сайту за допомогою css-стилів.
Розглянемо кілька практичних прикладів.
міняємо сайдбар
Давайте для прикладу поміняємо в нашому шаблоні контент і сайдбар місцями. Оскільки ми змінюємо структуру сайту, то є сенс скористатися var_style.css. Скопіюємо його з default-шаблону. Файл add_style.css можна видалити.
Відкриємо цей файл і знайдемо рядки відповідають за виведення контенту і сайдбара:
Блок div.main є батьком для div.content і div.sidebar. Тепер саме час освіжити знання попередніх уроків. Для зміни положення скористаємося простими float: left і float: right.
Сайдбар і контент помінялися місцями. Правда сайдбар «прилип» до краю контейнера. Це не дивно, адже ми не вказали відступи для його wrap-блоку. Виправляємо і виходить такий код:
Змінимо фон браузера
Трохи змінимо колір фону браузера. За це відповідає тег BODY.
Приберемо тінь контейнера і збільшимо поля
Тінь задається у div.all-wrap за допомогою властивості box-shadow. Деякі браузери його підтримують на експериментальному рівні, тому воно присутнє з декількома префіксами. Також додамо трохи більше поля від кожного краю.
Зробимо меню чорним фоном
У файлі є підказки по меню. У нашому випадку потрібно поміняти тільки загальний фон. Він заданий в div.MainMenu. Також поміняємо колір виділеного пункту і пункту при наведенні (це один стиль). В результаті отримуємо:
Картинку в шапку
Скопіюємо з default-шаблону компонент image-rand.php. Вибудуємо блоки таким чином:
В каталог шаблону images / headers скопіюйте кілька картинок з default-шаблону. Або завантажте свої.
Після цього можна перейти на сайт.
Додамо рамку до картинки шапки
Компонент image-rand.php виводить зображення у вигляді тега IMG всередині блоку div.component_header_image. Рамку вкажемо для IMG. але щоб зображення не вилізло за межі блоку (ми пам'ятаємо про блочну модель!), зменшимо width на ширину кордону.
Крім того ми прибираємо нижню межу за допомогою «border-bottom: none».
змінимо підвал
Приберемо фон і додамо верхню межу.
Додамо верхній і нижній відступ від браузера
У нашого div.all-wrap зараз задано margin: 0 auto - це центрування по горизонталі і нульові відступи зверху і знизу. Зробимо їх по 20px:
Поміняємо колір посилань
Тут в общем-то простіше нікуди:
Код a: hover - це стиль посилання при наведенні.
Поміняємо основний шрифт
Нехай це буде Georgia розміром 12pt. Оскільки це основний шрифт, то задаємо його для BODY.
Поправимо поле сайдбара
Мені не подобається ліве поле сайдбара.
Раніше ми його спеціально зробили, але тепер воно явно зайве. виправляємо:
заголовки записів
І останній штрих - змінимо заголовок записів. Нехай це буде шрифт Arial. Заголовки записів - це H1.
Тепер порівняйте отриманий результат з шаблоном «Twenty Ten». який я раніше портував на MaxSite CMS. Стовідсоткового збігу, звичайно ж немає, та й завдання такої не стояв, просто порівняйте трудовитрати попереднього варіанту і цього.
Оскільки всі зміни у нас відбулися в файлі var_style.css. то я не буду викладати повністю шаблон, а обмежуся тільки цим файлом 14.