What is Skinr?

Skinr’s main purpose is to allow themes and modules to define a set of reusable and modular CSS classes, and to make them available in Drupal's UI. Skinr was developed for themers to allow them to tap into the power of Drupal's modularity and apply those same principals to theme development. It allows you to expose CSS you’ve written in Drupal’s administrative UI.

How it works in 7 steps

Step 1: Let Skinr know you've got skins.

This process is different for themes and modules. See Directory & Hook Structure for full details and options.

In themes: Add these two lines to your theme's .info file:

skinr[api] = 2
skinr[directory] = skins

In modules: Add this code with your .module file.

<?php
/**
 * Implements hook_skinr_api_VERSION().
 */
function modulename_skinr_api_2() {
  return array(
    'directory' => 'skins',
  );
}
?>

Step 2: Define a skin

Below is an example of a skin with six different color options in a skin plug-in called "Styles." The skin also specifies that a CSS file named colors.css, where the CSS styles will be located. This example belongs to a theme called "mytheme". This code is located in sites/all/themes/mytheme/skins/styles/styles.inc.

<?php
/**
 * Implements hook_skinr_skin_PLUGIN_info().
 */
function mytheme_skinr_skin_styles_info() {
  $skins['mytheme_text_color'] = array(
    'title' => t('Text color'),
    'type' => 'select',
    'attached' => array('css' => array('colors.css')),
    'default status' => 1,
    'group' => 'typography',
    'options' => array(
      'color_1' => array('title' => t('Red'), 'class' => array('red')),
      'color_2' => array('title' => t('Orange'), 'class' => array('orange')),
      'color_3' => array('title' => t('Yellow'), 'class' => array('yellow')),
      'color_4' => array('title' => t('Green'), 'class' => array('green')),
      'color_5' => array('title' => t('Blue'), 'class' => array('blue')),
      'color_6' => array('title' => t('Violet'), 'class' => array('violet')),
    ),
  );
  return $skins;
}
?>

Step 3: Write the corresponding CSS

Skinr doesn't write your CSS for you. You'll need to do this yourself. In this example we provide the CSS for the six options we defined. In the first step our skin referenced a CSS file called "colors.css." In our skin definition we specified a file named color.css. Skinr automatically assumes that this file will be located relative to your plugin directory, so Skinr will load it from sites/all/themes/mytheme/skins/styles/color.css when the style is applied.

.red { color: red; }
.orange { color: orange; }
.yellow { color: yellow; }
.green { color: green; }
.blue { color: blue; }
.violet { color: violet; }

Step 4: Enable your plug-in

Visit admin/structure/skinr/library and click the checkbox to the left of your skin to enable it.

Step 5: Locate the element you want to change

Contextual links

Step 6: Configure Skinr settings

Configure Skinr settings

Step 7: Watch your style appear

In this case, we selected option 2, which called for the class color-2. Skinr loads any CSS and JavaScipt files you've specified and the class for the option is added to the top-level <div> of the element:

<div id="block-block-1" class="block block-block color-2">