Skinr: skin sets

Skinr: skin sets

July 27, 2010
Comments: 3 Comments

So finally I'm getting around to writing about skin sets! Skin sets are an awesome new feature for Skinr because they allow you to recycle commonly used CSS. It prevents the need to continuously copy the same styles over and over. Some examples of where you would use this is for layout, menus, list styles, font stacks, administration styles, etc. The great thing about skins is obviously that you can use them in any Drupal site so this opens up the idea of sharing skins with the community. This is exactly what I wanted to do with this demonstration so the skin that I've created is available for download at the bottom.

Getting started
Before you start writing your skin make sure that Skinr and its required modules are up to date. There have been some good changes in Skinr since my previous post and I even had to update (don't forget to run update.php). Once you have the latest Skinr code you'll see that Skinr is no longer under Site configuration. Previously Skinr was under Site configuration and skins were under Site building. Now both are together in Site building. Additionally, you'll need to make a "skins" directory in your site folder. So it would be "sites/all/skins" or "site/yoursite/skins."

Writing your skin
Before starting to write I always open up documentation so that I can reference it. Skinr documentation is located at: Setting up the files for a skin is similar to starting a new theme or module. You first need to create the directory for it in sites/all/skins. For this demo I am writing a skin that allows you to choose from different menu styles so I called the folder "menu_styles." Then within our new directory I create a file followed by any additional CSS or JS files needed.

In our file we first need to set up the information about our skin, which is similar to setting up a module or theme's .info file:

; $Id$
name = Menu styles
description = Various menu style skins
version = 6.x
core = 6.x
package = Menus

We need to give it a name, description, version, which version of Drupal core it can be used with, and additionally a package. Now the 'package' works exactly the same way as when you declare a package in a module's .info file. In Skinr v2 skins now have a page where you can enable or disable them. It is very similar to the modules page. So 'package' here puts that skin in a fieldset with whatever you put, for this case its under Menus.

When you go to admin/build/skinr/skins you should see this:
skin administration page

Obviously to use you will have to enable it and doing so at this point will result in zero functionality since we have yet to add anything.

Adding skins
The next step is to add the Skinr skin information into the skin's .info file. This is done exactly the same way as if you were adding the skin to your theme. This is what we have in the demo:

skinr[options][groups][links][title] = Links
; Menu styles
skinr[menu_styles][title] = Menu styles
skinr[menu_styles][type] = select
skinr[menu_styles][group] = links
skinr[menu_styles][features][] = block
skinr[menu_styles][features][] = panels_pane
skinr[menu_styles][features][] = views_view
skinr[menu_styles][description] = select from available menu styles
skinr[menu_styles][stylesheets][all][] = menu_styles.css
skinr[menu_styles][options][1][label] = Drop downs
skinr[menu_styles][options][1][class] = dd
skinr[menu_styles][options][2][label] = One level links with separators
skinr[menu_styles][options][2][class] = inline-links
skinr[menu_styles][options][3][label] = Links as columns with sub-options below
skinr[menu_styles][options][3][class] = column-links clearfix

Really quickly, in the first line I'm creating the fieldset that I want the skin to be in in the edit skinr dialog. Below that I'm giving my skin a name, type of form item to use, assigning it to the group 'links', enabling it for use on blocks, panels and views, giving it a description, adding my css file and then declaring the available options with their titles and classes. If none of that makes sense to you please refer to the skinr documentation and/or my previous post.

Applying the skin
This skin is available for use on blocks, panels and views so in order to use it we have to ensure that our skinr variable is being printed out in the appropriate templates. Your theme must have at least a template file for blocks, panels_pane and views_view. Applying the skin to a block was already discussed in my previous post. To apply the skin to a panel pane you must edit the panel's content and in the pane you want to apply skinr to you select the gear icon and in the menu that appears, under "style" select "change" (as pictured):


When you click through you'll see several options, select skinr and then press next. Once through, on this page you'll see the usual skinr options and once you've made your selection press save. Then you'll need to update and save your panel.

As far as views go, you can apply the skin to any view's display type. So on the edit form when you click on style you won't see skinr, you'll see the usual views styles along with any other styles modules might have added. Once you have a style selected its the configuration form that contains the skinr options.

This is basically all you need to know to create skin sets. You can include as many skins and files as you want. Hopefully at some point we can create a library of skins for people to utilize.

menu_styles skin set


Michel's picture

Hi, images are tiny. Can you enlarge them ?


amandar's picture

Wow thanks for bringing that to my attention, thought I fixed that a while ago! Now its fixed! :)

johan van grieken's picture

Many thanks for this article ! This is what I was looking for!