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

Предположим, вы захотели добавить пользовательский стиль в виджет Slideshow. Просто перейдите в папку /widgets/slideshow/styles, скопируйте существующий стиль, который вы хотели бы настроить и укажите ему уникальное имя.

В менеджере Widgetkit вы должны иметь возможность для выбора вновь созданного стиля.

А теперь детально рассмотрим файлы template.php, style.css, rtl.css и config.xml, расположенные в папке с новым стилем.

Настройка стиля

Файл config.xml расширяет стандартную конфигурацию виджета. Он определяет название стиля, доступное содержимое полей для стиля и все пользовательские настройки стиля.

Определите имя

Во-первых, укажите для нового стиля уникальное имя. В данном случае мы назовем его my_style.

<?xml version="1.0" encoding="utf-8"?> 
<style name="my_style" label="My Style"> 
... 
</style>

Определите содержание полей

<?xml version="1.0" encoding="utf-8"?> 
<style name="my_style" label="My Style"> 
<fields> 
<field type="title" name="title" label="Title" description="" /> 
<field type="html" name="content" label="Content" description="" /> 
<field type="textarea" name="caption" label="Caption" description="" class="small" /> 
</fields>
</style>

Каждое поле имеет определенный тип, например текстовый или текстовая область(textarea). Далее приведен список самых полезных из этих типов:

• title - Это специальное поле для ввода, которое всегда должно использоваться для названия элемента.
• html - Это текстовая область для отображения HTML разметкиЮ которая загружает WYSIWIG редактрор, если таковой доступен.
• textarea - Простая текстовая область.
• text - Просто поле для ввода.
• location - Позволяет вам вводить координаты для отображения карт Google.

Определите новые параметры

<?xml version="1.0" encoding="utf-8"?> 
<style name="my_style" label="My Style">
 <fields>
 <field type="title" name="title" label="Title" description="" /> 
<field type="html" name="content" label="Content" description="" /> 
<field type="textarea" name="caption" label="Caption" description="" class="small" /></fields>
 </fields> 
<settings> 
<setting name="captions" label="Captions" type="radio" default="1"> 
<option value="1">Show</option> 
<option value="0">Hide</option> 
</setting> 
</settings> 
</style>

• list - простое окно для выбора из перечня заданных опций
• radio - переключатели, характеризующие выбор одного из двух вариантов параметра
• text - простое поле ввода

Шаблоны

Файл template.php содержит всю логику и генерирует разметку для вашего стиля. Вы можете получить доступ ко всем полям и настройкам, которые вы определили в файле config.xml.
Так как же получить доступ к этим полям и настройкам? Вы можете ознакомиться с примером кода, который должен делать это. 

<?php $widget_id = $widget->id.'-'.uniqid(); 
$settings = $widget->settings; ?> 
<div id="slideshow-<?php echo $widget_id; ?>" class="mystyle">
<?php foreach ($widget->items as $key => $item) : ?> 
<article> 
<?php echo $item['content']; ?>
<?php if($settings['captions']): ?> 
<div class="caption"><?php echo $item["caption"];?></div> 
<?php endif;?> 
</article> 
<?php endforeach; ?>
</div> 
<script type="text/x-widgetkit" data-widget="slideshow" data-element="#slideshow-<?php echo $widget_id; ?>"> 
<?php echo json_encode($settings); ?> 
</script>

 Вы всегда будете получать доступ к объекту $widget, который содержит всю необходимую информацию для генерации разметки.

Стиль css

Файлы style.css и rtl.css будут загружаться Widgetkit-ом, если они существуют в папке стиля. В файле style.css вы можете определять собственные правила CSS для HTML разметки вашего стиля. Файл rtl.css должен содержать все резервные определения параметров для правосторонних языков (языки типа "справа-налево").
Вы должны всегда давать уникальные имена классам в вашем пользовательском стиле, например как указано ниже: 

<div class="mystyle"> ... <div>

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