Как настраивать шаблон
Инструменты веб-разработчика
Всякий раз, когда вы будете пробовать изменять ваш шаблон, настоятельно рекомендуется использовать инструменты веб-разработчиков (например, такие, как известный плагин Firebug для Firefox). Другие браузеры, такие как Chrome, Opera или Safari включают в себя схожий функционал. С помощью этих инструментов вы получаете возможность без особых усилий опробовать CSS стили прямо в браузере и проинспектировать существующие стили для нахождения их расположения в CSS файлах настраиваемого шаблона.
Редактирование CSS стилей прямо в браузере
Запустите Firebug, щелкнув правой кнопкой мыши на интересующем вас элементе веб-страницы и выбрав пункт "Инспектировать(проверить) элемент". На левой стороне плагина вы увидите HTML-структуру документа (убедитесь, что у вас выбрана вкладка "HTML"). Здесь у вас есть возможность добавлять и редактировать атрибуты, а также изменять их значения. Просто дважды щелкните по части кода, чтобы отредактировать его.
Еще более интересной является правая сторона плагина - здесь вы увидите все CSS-стили для выбранного элемента. Если вы хотите изменить что-то, просто дважды щелкните по нему мышью, введите новое значение и после этого нажмите Enter. Вы заметите, что Firebug откроет новую пустую строку, потому как возможно не только редактировать существующие стили, но и добавлять новые. Firebug даже показывает суммарные значения стилей для выбранного элемента, просто убедитесь, что вы активировали вкладку Computed для данного примера.
Поиск нужного файла CSS в вашем шаблоне
Как вы уже могли заметить, рядом с каждым CSS-селектором (в нашеим случае #headerbar) имя файла и номер строки отображают местоположение селектора непосредственно в физических CSS файлах. Просто наведите указатель мыши на имя файла, и вы сможете увидеть полный путь до файла. Чтобы узнать больше о структуре папок вашего шаблона, ознакомьтесь с этим уроком.
Дополнительные ресурсы
Есть некоторые полезные ресурсы, которые помогут вам узнать больше о инструментах веб-разработчиков в различных браузерах:
- Firebug для Firefox
- Firebug Руководство для веб-дизайнеров
- Chrome для разработчиков
- HTML5 Rocks - Введение в Chrome Developer Tools
- Paul Irish - Повторное введение в Chrome Developer Tools
- Safari Developer Tools
- Opera Developer Tools
Куда поместить CSS для создания стиля пользовательского контента?
Если вы желаете придать стиль для вашего контента, например собственная разметка внутри Joomla или Wordpress статьи, используйте файл custom.css, расположенный в папке css вашего шаблона.
СОЗДАЙТЕ СОБСТВЕННЫЙ СТИЛЬ ШАБЛОНА
Рекомендуемый путь для настройки шаблона - это создать собственный пользовательский стиль.Стили - это вариации стандартных шаблонов и они похожи на концепцию дочерних шаблонов в Wordpress или подшаблонов в Drupal. Все стили получают преимущества из наследуемых макетов и средств основного шаблона, которые позволяют создавать незначительные изменения очень быстро. Главное преимущество от использования сосбтвенного стиля в том, что он позволяет вам обновлять шаблон без последующего объединения всех настроек. Прочтите о том, как создать новый стиль.
ИЗУЧИТЕ ОСНОВЫ
В целом, можно сказать, что кастомизация шаблона - задача не из простых. Иногда это может не сработать с первой попытки, но если вы уделите этому вопросу побольше времени, все будет работать именно так, как вы этого захотите. В дальнейшем вам не понадобятся глубокие знания в области программирования, но вам безусловно необходимо разбираться в HTML и CSS. Конечно, если эти знания будут подкрепляться опытом в программировании PHP и JavaScript - в зависимости от поставленной задачи - это даже намного лучше. Вот некоторые полезные ресурсы для того, чтобы вы начали:
- HTML Документация в Mozilla
- HTML5 - технические спецификации для веб-разработчиков
- HTML Dog - Best Practice - руководство по XHTML и CSS
- CSS Документация в Mozilla
- W3C - Таблицы каскадных стилей
- JavaScript Документация в Mozilla
- Красноречивый JavaScript - Введение в современноепрограммирование