У нас є базова структура макета сторінки. Тепер ми хочемо зробити так, щоб цей макет відповідав придуманому нами дизайну, а не використовував виключно кольору і шрифти. У Twitter Bootstrap для генерації складних стилів використовується версія CSS під назвою LESS. Однак в нашому простому шаблоні ми будемо використовувати стандартний CSS-код.
Створіть порожній файл з ім'ям custom.css і збережіть його в папці ess вашого шаблону. Після цього додайте нову таблицю стилів в index.php після таблиці template.css.
Посилання на новий файл необхідно додавати після посилання на файл templat так як один з принципів каскадних таблиць стилів говорить: «те, що знаходячи в коді далі, перевизначає те, що знаходиться раніше» (це і є каскад).
Ми вибрали зображення для заголовка сайту і за допомогою мережевого інструменту Adobe Kuler проаналізували кольору цієї фотографії. Грунтуючись на отриманому результаті, ми вибрали фоновий колір (# 5Е7339), що представляє собою відтінок зеленого, а також взяли два сусідніх відтінку зеленого, # A3BF72 і # 95BF4C. Крім того, знайшли комплементарний колір, # 663973.
Ми почали з самого простого. Додали стилі для фонового кольору і основного кольору тексту, а також визначили ширину контейнера, яка буде використовуватися завжди, незалежно від того, що ми додаємо на сторінку:
Після цього ми додали заголовок зображення, а також кольору і шрифти для заголовків і посилань:
На наступному етапі ми поміняли деякі інші деталі стилізації конкретних елементів, перевизначивши для цього стилі з файлу Bootstrap. Для цього ми скористалися браузерні інструментом. Найвідоміші з таких інструментів - це Firebug, що працює в браузері Firefox, і Developer Tools для Chrome. Зазначені інструменти дозволяють в подробицях вивчити структуру цікавлять вас частин сторінки, щоб визначити, які стилі керують їх відображенням.
Верхнє меню контролюється класом nav, тому ми модифікували його, додавши невелику поле зліва. Ми також додали стиль для посилань в меню (. Nav> li> а). В результаті на сторінці спеціально для посилань меню використовується власний колір:
Потім ми відредагували налаштування модуля Розумний пошук (Smart Search), переключивши параметр Тема поля пошуку (Search Field Label) на вкладці Дополтельние параметри (Advanced Options) в положення Приховати (Hide). Ми хочемо, щоб назва нашого сайту відображалося білими буквами над зображенням заголовка. Для цього нам знову знадобилося додати нескол] рядків коду РНР і CSS. До блоку PHP-коду у файлі index.php ми додали наступні рядки:
Тут йдеться про те, що назва сайту необхідно витягти з метаданих, які ми створили в Загальних настройках (Global Configuration) веб-сайту. Після цього ми трохи змінили блок
У таблиці стилів CSS ми визначили стилі для даного класу:
Нарешті, нам залишилося виконати невелику коригування стилів CSS, щоб зробити ширину модуля Навігатор сайту (Breadcrumb) дорівнює ширині зображення в заголовку: