Blogs

Ok so you might know that I designed and built the Orange theme, and yes this is a shameless plug BUT I think the new version of Orange (which utilizes Skinr) is a great intro to Skinr and also a great theme for beginners who want options without having to open a CSS file. In this post I'll go through all the design changes from v1 to v2, and all the different customization options available.

Design changes
The overall design hasn't changed a whole lot, the regions that existed before are still there. There is an additional region above the footer below the content and the search bar and primary links are no longer added by default. The main design difference is with nodes. I changed the way the node date, author, tags, links and comments are displayed. Previously nodes looked like this:

Now they look like this:

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

Intro
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:

Introduction
There has been a big buzz surrounding Skinr these days especially at Drupalcon SF 2010. There is also a lot of confusion about what it actually is and does. Being that the module was developed by my fellow employee Bala Bosh and the brain child of my sister Jacine Rodriguez, I have a unique view of Skinr. I'm not too involved to the point where I can't explain the basics and how its useful for every themer.

For those of you who don't know about Skinr, in a nutshell it is a module that allows the themer to preset specific styles for content that can be applied through the UI. You can control anything with skinr that has a preprocess function - the entire page, nodes, blocks, comments, views, panels. The kinds of things you can do are limited only by your imagination.

Since its conception, Skinr has grown into a robust powerful module that every themer should know about and use.

OK, so why should I use it?