Skinr: How do I use this thing?

Skinr: How do I use this thing?

April 30, 2010
Comments: 6 Comments

So you've installed Skinr and its required modules, now what?! The most common misconception about Skinr is that it contains CSS. Skinr doesn't come with any styles! Another common misconception is that Fusion and Skinr are the same thing, this is not so. Fusion is a theme that takes full advantage of the features of Skinr and thats it. Skinr is a tool that you need to take several steps in order to use.

Printing the $variables
The first place you should start is getting the variables to print. You can go straight to your template files and print the variable in the first div. However, I prefer to declare the Skinr variable in my preprocess functions. The way I do it is:

// Printing the Skinr variable
if($vars['skinr']) {
  $vars['block_attributes']['class'][] = $vars['skinr'];
// Combine attributes into a single string to be added to the block container.
$vars['attributes'] = theme('render_attributes', $vars['block_attributes']);

If you use the Studio theme then this is familiar to you. You need to repeat this for anything you want to style with Skinr. So if you want to style panels or views, you'll need a preprocess for them and also a template that prints out the $attributes. When you've successfully added the Skinr variable you will see the following on items that can be styled:

Skinr cog on hover

If you click edit skin you should see the dialog modal but there won't be anything in it (unless you have another theme enabled that has Skinr styles).

.info file
The next step is your .info file. Here you will need to declare any Skinr styles you would like available. Since there is a good deal of documentation on all the sytax available, I wont go into too much detail. Below is a snippet of what I have in my .info file for this site:

; Skinr
skinr[options][groups][blocks][title] = Blocks
skinr[options][groups][blocks][collapsed] = 1

skinr[block_styles][title] = Block styles
skinr[block_styles][description] = Select from the available block styles
skinr[block_styles][type] = radios
skinr[block_styles][group] = blocks
skinr[block_styles][features][] = block
skinr[block_styles][features][] = panels_pane
skinr[block_styles][features][] = views_view
skinr[block_styles][options][1][label] = Flag heading
skinr[block_styles][options][1][class] = flag
skinr[block_styles][options][2][label] = No title/Blue with rounded corners
skinr[block_styles][options][2][class] = no-title blue
skinr[block_styles][options][3][label] = No title/Georgia font
skinr[block_styles][options][3][class] = no-title georgia

So the first two lines of the Skinr code are creating a fieldset called blocks, and telling it to be closed when the modal is opened. The reason this was introduced was because when you start adding a lot of different skins the UI can get very cluttered! So you can create a group for all content, blocks, page styles, etc. it is a really great feature!

Lines 3 & 4 are declaring the title of this skin as it should appear in the UI and the description that prints below. After that I'm saying that I want these options to be available as radios. If you leave that line out Skinr will default to checkboxes. If you have a lot of options you can also use select here to de-clutter. On line 6 I am adding this skin to the blocks fieldset I created above. The next three lines I'm telling Skinr what objects I want this skin to be available to. If you want the style to be available to anything that prints the Skinr variable you can just leave out these lines.

The rest of the code is declaring all the styles in the skin. Each style needs a label and a class but you can also add CSS and JS files per option if need be. You can also add CSS and JS for the entire skin. The label of each style should be a description of what it is and then class is whatever you'd like to reference in your CSS. As you can see here I repeated the 'no-title' class for options 2 and 3 - you can add multiple classes to one style and build up on styles so you don't need to repeat CSS.

One thing to note here is that I gave this skin a system name of "block_styles" but I could really call it "your_mom" if I wanted to because no one sees this. The skin system name just needs to be unique. Additionally the title, description and labels are all text visible in the UI so if a client is going to see this it should be descriptive and straight forward.

When that's all set in your dialog modal you'll see the following:
This is what the code in info file prints out

Another option
Since you can have multiple skins you could also take out the 'no-title' class and create its own checkbox option that can be applied to anything - separate from the other style. To do so you would have this in your .info file:

skinr[basic][options][1][label] = Remove the title so it is still accessible
skinr[basic][options][1][class] = no-title

As you can see I didn't declare a title, description, feature or group because I want this available to all objects. What you get in the modal is this:

Creating the styles
The next thing I usually do is assign each of these options to a piece of content, so I click on each block and click one of the radios. Since there is no CSS for the classes being applied in my style.css nothing will change, but if you have already written the CSS then these will automatically change so you can preview the style before you even press save.

When I go to edit my CSS the classes are there for me to select and start writing. //shamelessplug I prefer to use CSSEdit because it I like to preview while I write and I like shortcuts and groups. I'm not gonna go through my CSS for this since, if you're reading this you know CSS. :) The only thing I'll say is that I usually group my Skinr styles together at the bottom of my file, but obviously you can do whatever you prefer!

Page styles
If you've gotten this far and wondered how you apply page styles, you're not alone. I was confused by this at first. You would assume there would be a contextual drop down link in the top right corner of the page but in order to make that appear you need to first go to 'admin/settings/skinr/page' and create a new rule. Page rules can be applied based on user role, path and PHP so once you create a rule you'll be able to edit it through the contextual links.

Other things to note

When you need to limit a skin to a particular object (or feature) there are many options available to you. A quick way to know what to use is at the top of the modal, it basically tells you what hook to use to target those objects. Pictured above is just a regular block, but there are a lot of hooks available!

Also at the bottom of every Skinr dialog there is the option to add CSS classes. I haven't really needed to use this but I'm sure someone out there is grateful for it!

If you look at the Skinr documentation you can also see there is the option to add template files. However, they cannot be applied automatically to a skin, they would need to be selected in the UI. There are issues with it, and I still can't get it to work correctly so I stay away from that.

One other feature is the ability to import/export skins from a theme. If you go to 'admin/settings/skinr' you'll see tabs for importing and exporting.

Of course as with almost everything in Drupal you can set permissions for users, so if you would like your client to be able to change skins you can give them the ability to do so.

Next: Skin sets!
That's it for the basics of implementing a skin, of course there's a lot more you can do but this is a good starting point. The next topic to cover is skin sets, these are really great because you can carry them over from site to site and reduce the amount of CSS you repeat on a regular basis. They work a bit differently than skins in a theme, so that is coming soon. If there's anything here that could use some clearing up let me know!


rasskull's picture

Great overview Amanda!

photoshop_nerd's picture

Thank You for providing this overview.

When I make the changes to .info etc. I do not see my items show up under "theme-specific settings" on the theme configuration page of the UI.

Is there another way to use skinr besides the theme-specific settings area, or is there another step to make the items added to .info show up there?

amandar's picture

Hey photoshop_nerd.. you actually don't see anything from the .info file in your theme specific settings.. you will see them on block configuration pages and under admin/settings/skinr/page.

If you have all the required modules you'll see the COG links on blocks and nodes as long as the skinr variable is being printed.

Hunter's picture



Ryan Johnson's picture

Amanda I freakin' love you! Trying to bridge this gap has been driving me up a wall stealing precious nights and slumber (this is one of them) and finally I came across this Skinr briefing that actually makes some sense!!

I can sleep at last!! lol

Ty Ty Amanda :D

amandar's picture

I'm very happy to have helped you understand it! :D