Using Skins

What are Fusion Apply and Skinr?

Fusion Apply is part of the Fusion Accelerator group of modules for use with Fusion themes on Drupal 7. Skinr is a Drupal module required for Fusion themes in Drupal 6. Their main purpose is to allow the theme to define a set of reusable and modular CSS styles, and to make those styles available in Drupal’s UI. These were developed for theme developers to allow them to tap into the power of Drupal’s modularity and apply those same principals to theme development. It does not provide any styles of it’s own. In Drupal 7, these are defined in a core.inc file using PHP. In Drupal 6, these styles are defined in the .info file of the theme (or subtheme), by the themer and end up in various places in Drupal’s UI, such as:

  • Blocks
  • Node type/comments
  • Panel panes
  • Views displays

Fusion’s layout, alignment, and style options are powered by these modules, depending on your Drupal version. Fusion Core comes with a number of generic styles in place, but your subtheme will add several more.

Permalink

Approaches to creating skin styles

Make sure you think about how your sub-theme’s styles are either mutually exclusive or “stackable” with each other and choose the skin form elements (checkboxes vs. radios or select list) accordingly.

Use classes (.class-name) instead of IDs (#id-name). Why? Styles for IDs always override classes. When you’re theming a set of dynamic styles, you never know what you might be trying to override in the CSS, and a class-based skin style can’t override a default style that’s been specified using a CSS ID. If you set a font style for a region using the region ID, such as #sidebar-first { color: #fff; }, then you can’t override this using a .mytheme-blue-text { color: #00f; } style.

Target the style name plus “.inner” when adding styles such as a border or padding which affect the block’s overall width, so you don’t break the grid. Example:
Don’t do this: .mytheme-border { border: 3px solid #000; }
Use this instead: .mytheme-border .inner { border: 3px solid #000; }

If you set a background, you probably want to set a foreground too. If your regions or styles have contrasting background colors, you might end up in a situation where a light background block is placed in a dark background region. If the region has a text/link color set to white, but the block style does not have a text/link color set, then it will inherit the properties of the region. By always setting a foreground (text/link) color for a skin style, even if it’s the page default, you ensure that text will always be legible and creating the desired effect.

Permalink

Creating Fusion Apply styles

Defining a skin

In Drupal 7, skins are no longer defined as Skinr defined them in the .info file. They are now PHP functions that use Drupal’s existing hook system.

This is an example of a skin choice that changes the block positioning:

function fusion_core_fusion_apply_skin_core_info() {

  $skins = array();
 
  $skins['fusion_skins_block_positioning'] = array(
    'title' => t('Block position'),
    'type' => 'select',
    'description' => t('Change the position of this block (default is to float to the left)'),
    'group' => 'layout',
    'theme hooks' => array('block'),
    'default status' => TRUE,
    'options' => array(
      'fusion-right' => array(
        'title' => 'Float block to the right',
        'class' => array('fusion-right'),
      ),
      'fusion-center' => array(
        'title' => 'Position block in the center',
        'class' => array('fusion-center'),
      ),
      'fusion-clear' => array(
        'title' => 'Clear floats (block drops to a new line)',
        'class' => array('fusion-clear'),
      ),     
    ),
  );

  return $skins;
}

First, the function is defined as a skin, which is part of an array. Each element within the skin settings is part of the array. This can be anything from the block alignment that this example identifies, menu layout, to column listings, and beyond. See the core.inc file in /fusion/fusion_core/skins/core/core.inc file to get an idea of how the available options are constructed.

Next, we define what this skin element does - block positioning in this case, and show what it does.

  • 'title' => t('Block position') - creates the title of the vertical tab for the task, in this case, positioning a block.
  • 'type' => 'select' - creates the widget type, in this case, a select list. Radio buttons or checkboxes may also be used.
  • 'description' => t('Change the position of this block (default is to float to the left)') - describes the task to be completed.
  • 'group' => 'layout' - what group this should be in on your /appearance/fusion/skins page. Options here are: general, layout, or box. You may also create a custom group.
  • 'theme hooks' => array('block') - what Drupal elements can be affected by this skin. Options are:
    • node
    • page
    • block
    • views_view
    • panels_pane
    • panels_panel
    • panels_display
    • region

    If no theme hooks are provided, the skin is available to all elements.

  • 'default status' => TRUE - is this skin available by default to all themes? If not, this should be FALSE. Skins that are not available by default can be enabled per-theme at admin/appearance/fusion/skins
  • 'options' => array(
          'fusion-right' => array(
            'title' => 'Float block to the right',
            'class' => array('fusion-right'),

    Defines one of the options that can be selected, per the ‘type’ setting noted above. You can set multiple options.

Some things to keep in mind for working with skin names

Skin names should be informative without being too technical or too vague. It can be a difficult line to walk, but your purpose is to inform other users what your skin is supposed to be doing.

  • There is no need to repeat the theme name or ‘skin’ in the label for the individual form item.
  • Avoid technical terms but use words that a site administrator is likely to understand.
  • Be succinct but descriptive with the labels so they explain what this style looks like, not what it’s for or where it’s located (unless it only works in that case).

    • Bad label examples:

    • Block Skinr style (too generic, not enough info)
    • #2789f7 background (too technical, use English)
    • Latest press releases or news view (describes the content, not the skin)

    Good label examples:

    • 1px border with light background
    • Bright blue
    • List with shaded separators (describes what the style of the skin actually does rather than what’s in it – can apply to many different kinds of content)
  • You can also add descriptions. For example, a grouping of icons could have a general description like, “Select the icon that will appear in the corner of this content” – since this applies to any option selected.
Permalink

Creating Skinr styles

Note: This section is from the Skinr handbook, and is © 2000-2009 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0

System Name and [title]

Each skin begins with the prefix “skinr” in your .info file. This allows Drupal and Skinr to easily identify and access information about your skins.

  1. Start with a skin name which will be used as the system name. You can name a skin whatever you want. The system name will be used to store information about your skin, including where that skin is applied throughout Drupal. It will not show up in the UI or in any markup. skinr[skin_system_name] will be used to prefix all information about a given skin in your .info file.
  2. Next give the Skin a title. This title will be the name of the Skin and will appear in the UI as the form element label, so it should be descriptive of what the Skin is/does.

skinr[skin_system_name][title] = Title

Widget Type [type]

There are 3 different options for displaying your Skinr styles in the UI. These types correspond to Drupal’s Form API widgets. They were created to allow you to better present your skins in the UI and to allow fine-grained control over the options you provide.

  1. checkboxes: Can be used for single or multiple options. Do not use “checkbox” as it will not work.
  2. select: Good for presenting many options when only one can be selected. Note: Multiple selects are not supported. Checkboxes should be used instead.
  3. radios: Can be used for single options.

Syntax:

skinr[skin_system_name][type] = checkboxes
skinr[skin_system_name][type] = radios
skinr[skin_system_name][type] = select

Note: Skinr applies checkboxes by default so it’s not necessary to specify if that’s what you want to use.

Widget Description [description]

skinr[skin_system_name][description] = This should be a description of my Skin. It will show in the UI just as regular form item descriptions do. It can contain <acronym title="Extensible HyperText Markup Language">XHTML</acronym>, so feel free to be creative, but don't go too crazy.

Widget Options [options]

Note: Skinr will include a <none> option for each so they can be unselected by default so there is no need to include a none option here.

Singular

For skins where only one option should be chosen by the user, the syntax would be as follows:

  • If you want to display it in a checkboxes widget:
    skinr[skin_system_name][title] = Title
    skinr[skin_system_name][description] = Description
    skinr[skin_system_name][options][1][label] = Skin option label
    skinr[skin_system_name][options][1][class] = skin-option-class

    Note: [type] is not specified in the above example since it is the default provided by Skinr.

  • If you want to display it in a radio widget:
    skinr[skin_system_name][title] = Title
    skinr[skin_system_name][type] = radios
    skinr[skin_system_name][description] = Description
    skinr[skin_system_name][options][1][label] = Skin option label
    skinr[skin_system_name][options][1][class] = skin-option-class

Multiple

For skins where multiple options can be selected, the syntax would be as follows:

  • If you want to display it in a checkboxes widget:
    skinr[skin_system_name][title] = Title
    skinr[skin_system_name][description] = Description
    skinr[skin_system_name][options][1][label] = Skin option label 1
    skinr[skin_system_name][options][1][class] = skin-option-class-1
    skinr[skin_system_name][options][2][label] = Skin option label 2
    skinr[skin_system_name][options][2][class] = skin-option-class-2

    Note: [type] is not specified in the above example since it is the default provided by Skinr.

  • If you want to display it in a select widget:
    skinr[skin_system_name][title] = Title
    skinr[skin_system_name][type] = select
    skinr[skin_system_name][description] = Description
    skinr[skin_system_name][options][1][label] = Skin option label
    skinr[skin_system_name][options][1][class] = skin-option-class
    skinr[skin_system_name][options][2][label] = Skin option label 2
    skinr[skin_system_name][options][2][class] = skin-option-class-2

Selectively restricting styles to de-clutter the UI using the [features] option

By default Skinr will assume that your styles can be used anywhere Skinr is available on your site through any supported Drupal feature, i.e. nodes, blocks, etc. If you want to reduce UI clutter and improve the UX you can specify hooks/feature names where your skins should appear within Drupal. [features] do NOT need to be specified. If nothing is specified in your skin it will appear everywhere by default. The feature name is the equivalent of the Drupal hook, and may only contain underscores. Some example hooks:

skinr[skin_system_name][features][] = block
skinr[skin_system_name][features][] = panels_pane
skinr[skin_system_name][features][] = node
skinr[skin_system_name][features][] = comment_wrapper
skinr[skin_system_name][features][] = views_view

Example Use Case: You need to implement 2 designs for menu lists and the structure is mainly the same, but there are 2 different color options. Your style only includes CSS for menus. You know that Drupal only outputs menus through blocks and panel panes, so you don’t want show the style in the skin in views, node types or comments. One way you could do that is:

  1. Create the structural CSS in .menu-style
  2. Handle each color option in separate classes as extensions of .menu-style, i.e. .menu-white, .menu-black
  3. Implement it with Skinr as follows:
    skinr[menu_style][title] = Menu Styles
    skinr[menu_style][type] = select
    skinr[menu_style][description] = Choose either black or white. This style can be used on menus and uniform lists.
    skinr[menu_style][features][] = block
    skinr[menu_style][features][] = panels_pane
    skinr[menu_style][options][1][label] = White
    skinr[menu_style][options][1][class] = menu-style menu-white
    skinr[menu_style][options][2][label] = Black
    skinr[menu_style][options][2][class] = menu-style menu-black

The [features] as specified above tell Skinr that the [menu_style] skin should only be shown in Drupal’s UI if the user is editing either a block or a panel pane.

Adding Javascript and CSS files to Skins

The latest version of Skinr supports the option to associate CSS and Javascript files with a given skin. This new feature allows you to basically package any skin as a fully functional snippet of code. It also aids you with selectively loading JS/CSS where necessary. To extend upon the above menu example, let’s say that the menu is a drop-down menu and requires some Javascript to properly function, as well as some external CSS files. Let’s also say you also want to support a vertical and horizontal option.

skinr[menu_style][title] = Menu Styles
skinr[menu_style][type] = select
skinr[menu_style][description] = Choose either black or white, vertical or horizontal. This style can be used on menus and uniform lists.
skinr[menu_style][features][] = block
skinr[menu_style][features][] = panels_pane
skinr[menu_style][scripts][] = dropdown.js
skinr[menu_style][stylesheets][all][] = dropdown.css
skinr[menu_style][options][1][label] = Horizontal White
skinr[menu_style][options][1][class] = menu-style menu-horizontal menu-white
skinr[menu_style][options][2][label] = Horizontal Black
skinr[menu_style][options][2][class] = menu-style menu-horizontal menu-black
skinr[menu_style][options][3][label] = Vertical White
skinr[menu_style][options][3][class] = menu-style menu-vertical menu-white
skinr[menu_style][options][4][label] = Vertical Black
skinr[menu_style][options][4][class] = menu-style menu-vertical menu-black
Permalink