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:
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:
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!
Text
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:
Additionally you may make text on anything uppercase lowercase or capitalized, this is great for menus.
Layout
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%:
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:
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:
Colors
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: http://drupal.amandarodriguez.com 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!
