Orange: A Drupal theme using Skinr

Orange: A Drupal theme using Skinr

August 06, 2010
Comments: 12 Comments

This post is only meant to server the purpose of showing the difference between the two versions of this theme. If you are experiencing and error with the theme PLEASE post in the issue queue. Comments have now been disabled for this post.

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:

orange v1 nodes

Now they look like this:

Additionally I altered the way comments are displayed on node pages. Moreover the comment wrapper. Theres always been something about the Drupal comments that have disturbed me; mainly the way it handles the comment count. In the following image the left side is the way Orange used to handle comments and the right side is how Orange v2 displays the same data:

v1 comments and v2 comments

These are the design changes that cannot be altered without editing CSS, as with any theme if you are comfortable enough to change them you may always do so.

The good stuff
So this version allows you to make SO many changes in the UI I'm not sure I can cover ALL possibilities but I will certainly try!! Orange still only has one sidebar but in v2 the sidebar is printed after the content and has no styles applied by default so that the user can pick whether it appears to the left of the main content or to the right. So if you're using Orange and wonder why your sidebar is below the content you'll need to create a page rule that specifies which side the sidebar will show on. This is a great feature because of the versatility of page rules in Skinr. If you wanted one page to have the sidebar on the left and others to have it on the right you can totally do that!

Font and text sizing is also now very configurable. At a page level or even just block or node level you can alter both. As far as fonts go you can either leave it as sans-serif or you can choose to make the headings just serif or monospace, or change both the heading and the content to be either. You can also choose from several different font sizes. This is an example of a node using monospace headings with sans-serif content and the block above is using an extra large font size:

monospace headings large font

Additionally you may make text on anything uppercase lowercase or capitalized, this is great for menus.

The options for layout are the thing I'm most excited about with v2 of Orange. Previously the content top, content inner and footer regions had really bad CSS for making blocks fit. For example the content inner region (grey region with rounded corners) gave blocks a specific width to fit 3 blocks inside so if you only had one block in there it would look off. Now the content in these regions (and any other region) can be sized to fit either 2, 3 or 4 blocks in the region. You can pick from making block widths 25%, 33%, 50%, 75% or even 100%. This makes laying out content in regions a breeze and really is a great feature!

In the following picture you can see the same content sized differently; the top part has each block at 50% and the bottom part has the left block at 75% and right block at 25%:

block sizes

On top of all that you can also change the alignment of items, to be left, center or right. Image fields can be floated to the left or right and also content can be given margins if extra space is desired.

Lists and menus
In the first version of Orange lists were all styled the same way; they had an image for the bullet and a grey line under the list item. I decided for version two that I would offer a couple different options here. By default list items are not styled so if you want something different you'll have to select a skinr option. The first option is the option from v1 and the next two options are essentially the same but with a different color hover. The following image shows three blocks in the new region below the content that show the three list styles:

list styles

As I stated before the primary links are no longer added by default, there is now a navigation region that you may put any menu block you want in it. They are styled the same way by default, no skinr style necessary. Also I removed the suckerfish.js and instead added only a couple lines of JQuery that achieve the same exact result. Three levels of menu are supported if you need more you'll have to add some more CSS. If you put the search bar in this region it will automatically be positioned on the right and styled correctly. Anywhere else the search block is styled differently.

The top menu is taken care of for you by default but there are also other menu styles available for other regions, mainly meant for footer links. There are three styles to choose from; the first is drop downs. These drop downs are not like the main links in the header, they are really basic with no color or style really, they are meant as a starting point if you wanted to style your own. The second option is to display the top level menu items in one line separated by a vertical line. This is much like the footer on my site and will ignore any sub-options in the menu. The third option is to display the top level items horizontally but list their sub-options below them, here is an image of both the second and third options:

2 menu options

In the issue queue I had a request for different color options for the theme. I recognize that the bright orange color might not suit everyones fancy but I have grown to greatly dislike Drupal's color module. I could have offered a couple different color options via skinr but I decided against it for the moment but if people really do want it I will gladly offer some color options.

//end shameless plug
So thats it for the run down of the theme. Please check out my demo site: for a better look. If you are using it please let me know your thoughts/ideas on making it better. I will be working on a Drupal 7 version hopefully it will be ready by the time 7 is released!


Brandon's picture

Hi Amanda! My name is Brandon. I am really new to drupal and have set up a page for a social networking site at my school ( I came across your theme and I love it and would like to use it, but to be honest, I just can't make head nor tail of all of this. I installed skinr, and the theme, but when I enabled it... my homepage went crazy with everything having no form at all. If you could help me out, I'd really appreciate. Just a basic tutorial on what I need to do to get running. I appreciate you so much.
Thank you.

amandar's picture

Did you download Skinr 2.x-dev? I apologize for not making it clear but that is the version required. It does not work with Skinr 1.x. Please check and let me know...

Brandon's picture

Thanks so much for getting back to me. Yes, I have 2.x-dev loaded up, but still not seeing anything at all. Maybe there is some other step to this process? I am really trying to get the site to look like your demo site, but when I load the skin, it doesn't look anything remotely like yours. There are also no options or gears when I hover over boxes in that view. Any tips?
Perhaps Skinr themes are too complicated for my use? Any thing would help!
Thank you again Amanda!

amandar's picture

Hey Brandon, sounds to me like you don't have the skinr ui portion of the module turned on. Check that on the modules page, you need skinr ui, ctools, jquery ui, dialog, and jquery update. That should take care of the gears on everything but the page itself, for that you need to create a page rule.

Cristian's picture

Hello... I like your theme but a I have problems with v2. I install Skinr 6.x-2.x-dev (2010-Aug-12) with Skinr UI and deps. Then I activate your theme... And looks ok but... I don't have the gears in the blocks and the "slides menus" (for example Input Format or Publication Options in "Create *" pages) doesn't open. And CKEditor doesn't load.

The same configuration with Acquia Marina v3 works correctly.

What do you think? What can be the problem?



PD: Sorry for my english... Do you speak spanish?

Terr's picture

First off I really love this theme. Took me a little to get things functioning only because I overlooked a couple of things. I have one thing I can not figure out though. In administration pages where there is a standard theme my wyswig and tinymce work great. On pages with the theme running they do not appear at all. It will also not allow me to expand the menus for publishing options, menu options or any of the others. My guess is I am just missing something. Any idea what I should check.

amandar's picture

Interesting there must be an issue with the theme and tinymce.... could you create an issue in the issue queue and I'll take a look at it. Please include which versions of those modules you are using so I can test.

Thanks for using the theme :)

amandar's picture

Christian, This sounds like an issue with the way I did the fieldsets in the theme, I ran into this issue myself once and I believe the issue was some JS not loading... Check whats going on with jquery ui and jquery update and if the problem persists please create an issue in the queue and I will revert the fieldsets back to normal.

elijah's picture

Your Orange them looks rad. I'm one problem away from rolling it out - the Skinr menus that pull down when I click the gear icons are all full of overlapping text, so that it's not really possible to edit the settings. Probably I've jacked something up - does this issue sound familiar to you?

sneakerr's picture

Your demo is not working check it out.
also I wish to thank you for providing this theme. I am using it and it is great. Thought I have few issues I like it and I will solve them.
My search block. I have set it in navigation menu and and aligned it right, it is good but the Search button is under the input text field, and under the black field.
If you can please help a bit.

terr's picture

I am having the same problem as christian. I removed tinymce from the equation for now. I have a complete fresh install and can not get any of the menus to open. Menu, input, comments, revisions. They show and there is a plus sign on the far side but will not open up. I did start with a fresh install of drupal and the basic modules required just to get the theme running. One thing I have noticed is when I set it up the first time I was able to go into sknr and create the rule to put the bar on the left. Now I am unable to even open the menu in there. Maybe a change in another module has affected things.

amandar's picture

While i appreciate the comments and use of the theme i strongly encourage you to not post on here and rather post in the issue queue and i'll do my best to help you guys... :)