Как адаптировать шаблон под собственные нужды

В этом уроке мы покажем вам, как приступить к адаптации Warp шаблона и какие инструменты вам понадобятся для небольших изменений внешнего вида и цвета шаблона.

Инструменты WEB разработчиков

Всякий раз, когда вы попытаетесь адаптировать шаблон, настоятельно рекомендую использовать инструмент веб-разработки, такой как знаменитый плагин Firebug для Firefox. Другие браузеры, такие как Chrome, Opera или Safari включает в себя похожие функции. С помощью этих инструментов вы сможете опробовать CSS стиль прямо в браузере и проверить существующие стили, найти их расположение в CSS файлах шаблона.

Редактирование стилей CSS прямо в браузере

Вызовите Firebug, щелкнув правой кнопкой мыши на интересующем элементе, и выберите пункт «Исследовать элемент». С левой стороны вы увидите HTML-структуру документа (убедитесь, что активна вкладка HTML). Здесь у вас есть возможность добавлять, редактировать атрибуты и их значения. Просто дважды щелкните на части кода для ее редактирования.

Еще более интересной является правая сторона плагина, здесь вы увидите все CSS-стили для элемента. Если вы хотите изменить что-то в них, просто дважды щелкните на нужной строке, введите новое значение и нажмите клавишу ввода. Вы заметите, что Firebug открывает новую пустую строку, так что вы можете не только редактировать существующие стили, но и добавлять новые. Firebug даже показывает вычисленные значения стиля для выбранного элемента.

Поиск необходимого CSS файла в шаблоне

Как вы уже заметили на рисунке, рядом с CSS-селектором (в нашем случае #headerbar) в настоящее время отображается имя файла и номер строки. Просто наведите на него курсор, и вы увидите полный путь к файлу. Чтобы узнать больше о структуре каталогов вашего шаблона, взгляните на этот урок.

Дополнительные ресурсы

Вот несколько полезных ресурсов с описанием инструментов веб-разработчика:

• Firebug for Firefox
• Firebug Guide for Web Designers
• Chrome Developer Tools
• HTML5 Rocks - Introduction to Chrome Developer Tools
• Paul Irish - A Re-introduction to the Chrome Developer Tools
• Safari Developer Tools
• Opera Developer Tools

Куда поместить мой пользовательский CSS стиль контента?

Если вы хотите стилизовать ваш контент, например, внести пользовательские дополнения в Joomla или WordPress статьи, пожалуйста, используйте файл custom.css, расположенный в каталоге css вашего шаблона.

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

Рекомендуемый способ адаптации шаблона, заключается в создании собственных пользовательских стилей. Стили являются вариациями шаблона по умолчанию. Все стили наследуются от макетов и элементов основы шаблона, которые позволяют очень быстро делать незначительные изменения. Основной выгодой от использования пользовательского стиля является то, что он позволяет обновлять шаблон без его потери. Читайте о том, как создать новый стиль.

Изучите основы

В целом можно сказать, что адаптация шаблона не является легкой задачей. Иногда не получается ее сделать с первой попытки, но если вы потратите некоторое время, вы достигните желаемого результата. В дальнейшем вам не обязательно иметь глубоких знаний веб-программирования, но вы должны иметь представление о HTML и CSS. Но если вы понимаете языки PHP и JavaScript, в зависимости от задачи, это будет еще лучше.

Вот несколько полезных ресурсов для начала:

• Mozilla's HTML Documentation
• HTML5 - A technical specification for Web developers
• HTML Dog - The Best Practice Guide To XHTML and CSS
• Mozilla's CSS Documentation
• W3C - Cascading Style Sheets
• Mozilla's JavaScript Documentation
• Eloquent JavaScript - A Modern Introduction to Programming

Прочтите в учебнике раздел по адаптации Warp шаблона, который объяснит, как обеспечить его изменение.

• 1
• 2
• 3
• 4
• 5