Как настроить виджеты

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

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

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

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

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

customize firebug

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

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

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

Firebug для Firefox
Firebug Руководство для веб-дизайнеров
Chrome для разработчиков
HTML5 Rocks - Введение в Chrome Developer Tools
Paul Irish - Повторное введение в Chrome Developer Tools
Safari Developer Tools
Opera Developer Tools

Куда поместить CSS для перезаписи стиля WIDGETKIT в шаблонах Warp Framework?

Если вы желаете переписать некоторые стили виджетов и вы используете шаблон Warp Framework, используйте файл extension.css, расположенный в папке css вашего шаблона.

СОЗДАЙТЕ Собственный СТИЛЬ ВИДЖЕТОВ

Стили - это вариации стандартных виджетов, которые предоставляют собственный настроенный HTML-код и CSS стили. Создание нового стиля виджета является рекомендуемым способом настройки виджетов. Вы можете создать свой собственный стиль или просто начать с копирования существующего. Таким образом, WidgetKit может быть обновлен без объединения всех ваших настроек в обновленному стиль. Читайте: {документ: создание стиля текста: как создать новый стиль}

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

Настройка WidgetKit - задача не из легких, и вам нужны серьезные навыки в PHP и JavaScript, . Вот некоторые полезные ресурсы для того, чтобы вы начали:

Вторник, 15 мая 2012

Posted in: Настройка