Как настраивать шаблон

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

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

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

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

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

customize firebug

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

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

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

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

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

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

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

СОЗДАЙТЕ СОБСТВЕННЫЙ СТИЛЬ ШАБЛОНА

Рекомендуемый путь для настройки шаблона - это создать собственный пользовательский стиль.Стили - это вариации стандартных шаблонов и они похожи на концепцию дочерних шаблонов в Wordpress или подшаблонов в Drupal. Все стили получают преимущества из наследуемых макетов  и средств основного шаблона, которые позволяют создавать незначительные изменения очень быстро. Главное преимущество от использования сосбтвенного стиля в том, что он позволяет вам обновлять шаблон без последующего объединения всех настроек. Прочтите о том, как создать новый стиль.

ИЗУЧИТЕ ОСНОВЫ

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


  • Пятница, 25 мая 2012

Оставить комментарий

Вы комментируете как Гость.

beget