Each skin definition consists of properties that define its form element and settings that are needed to make it work, such as the class(es) Skinr should apply, which files it should load, whether or not it should be disabled by default and which theme hook(s) it was designed to work with, and so on.
Depending on your directory and file structure, you'll use one of the following hooks to implement your skin(s):
Below is a full listing of the available properties. See an example.
- title required↑
The title of the skin, which translates to the form label on the settings form.
<?php 'title' => t('Text color') ?>
- options required↑
An array containing one or more options (also arrays) for the skinr administrator to choose from when applying skins. Each option can be a machine name describing the option, or a numeric key and should include the following properties:
- title required
- Becomes the option label in the settings form.
- class required
- An array containing one or more classes the skin. This is the class you'll write your CSS to target.
'options' => array(
'option_1' => array(
'title' => t('Style 1'),
'class' => array('style-1'),
'option_2' => array(
'title' => t('Style 2'),
'class' => array('style-2', 'clearfix'),
- description ↑
The form element description, which is displayed on the skinr settings form. The description is useful for providing instructions or notes to users applying the settings.
<?php 'description' => t('Select a style to apply to this element.') ?>
- type ↑
The type of form element to use when displaying the options to the user in the settings form. The following options are acceptable values:
- checkboxes default
- Useful when single or multiple options can be selected. Does not need to be set manually, as Skinr will apply this type by default.
- Useful when a single option can be chosen, but many exist.
- Useful when a single option can be chosen and only a few options exist.
<?php 'type' => 'select' ?>
- group ↑
Groups are there to help keep your skins organized and reduce clutter in the Skinr settings form. They are displays as vertical tabs. Skinr provides 4 groups by default. If the group property is not set, the skin will appear in Skinr’s default group labeled “general.” You can place your skin in any of the following groups, and you may also create your own group(s).
- general default
- Styles for content such as lists, buttons, margins, padding, etc.
- Presentational styles for the container.
- Fonts, styles, sizes and other typography related skins.
- Grid, layout and other structural related skins.
<?php 'group' => 'box' ?>
- attached ↑
- Maps to the functionality of
drupal_add_css()with one exception: paths are automatically assumed relative to the plug-in directory, unless external.
- Maps to the functionality of
drupal_add_js()with one exception: paths are automatically assumed as relative to the plug-in directory, unless external.
'attached' => array(
'css' => array(
'http://fonts.googleapis.com/css?family=Arimo', array('group' => CSS_THEME),
'js' => array(
- theme hooks ↑
An array containing certain allowed hooks, which allow you to limit where the skin can be used. This is helpful when your skin only applies to a certain type of content. For example, if you write a skin that applies to a menu block, setting the theme hook to “block__menu” will cause your skin to only appear in the settings form when editing a menu block. Some of the possible options (per type) include:
<?php 'theme hooks' = array('block', 'node') ?>
- weight ↑
Sets the weight of the skin inside the group. The weight should not be set on each individual skin. Instead, it should be used sparingly where positioning a skin at the very top or bottom is desired.
<?php 'weight' => '10' ?>
- default_status ↑
Skins are disabled by default to keep UI unwanted clutter to a minimum. In some cases, like contrib themes, it makes sense to enable skins which are required to make the theme work properly by default. Setting this property to 1 will cause it to be enabled by default for all installed themes.
<?php 'default status' => '1' ?>
- status ↑
- This property exists to allow themes to set the default status for a particular theme. When you are registering a skin for your base theme, you likely do not know which sub themes are going to use your base theme. By setting the global default status to 0 and enabling the skin for your base theme itself, the skin's status will be automatically inherited to all sub themes of your base theme.
'status' => array(
'bartik' => 0,
'garland' => 0,
'mybasetheme' => 1,