Summer’s over so its time to winterize Tarn Aeluin’s Theme. In addition to this there’s just a bunch of messy stuff going on. The last time I worked on the theme, I ran out of time and just got enough done to have some nicer colors and banners for the summer. This time around I’ve stuck with Graphene and concentrated on using all this theme can give me and trying to do things the way the designers expected.

Creating a Child Theme

One of the things I want to do is convert over to better fonts. In Graphene and other modules there are so many embedded fonts that you need a ton of heavy editing of the CSS files – fortunately Graphene supports child themes for just this kind of thing. I can create a child theme easily by simply creating a  folder called “graphene-child” in the themes folder, create a styles.css, reference the parent CSS file, and then copy all your customization from the advanced tab in the current theme. If that’s all confusing – just check out the instructions on the Graphene site…and of course try this on a dev server first.

Creating the child theme was remarkably easy. There are a few helpful things that I did learn. Before you start:

• Capture your current background settings – for me that’s #f9f9f9.
• If you have custom headers makes sure you know what they are. I grabbed a screen capture of the headers page so that I could easily get back my rotating banners.
• In your current theme if you have custom CSS, grab that and paste it to text wrangler or notepad++. Do the same with the complete code on the Advanced tab and check the box that you have moved this CSS to a child theme. This will save me 11.8KB per page in bandwidth, according to the Graphene guys.

Then once you create the child theme:

• I created a new file where I first placed the code from the advanced tab. Then I removed from the tail of that the code that was included from the custom CSS page. I’ll add that later.
• Next add back to your local CSS to the tags from the custom CSS page in Graphene and then copy this file to your child theme.

Cleaning up the Theme

I want to open up this theme to be more spacious. Graphene has lots of lines and borders. I’d like to get rid of them. Adding in Jetpack sharing brings more lines. Kill them! In general I would also like to go with more subtle colors and clean easy shapes.The second thing I would like to do is replace the chaos of fonts with just Open Sans.

A lot of this can be done in Graphene’s panels – most of the lines and fonts. However there are a lot of references to Tohonto that cannot be. I removed all of these by first setting a body tag in my styles.css to the Open Sans font. Then I one-by-one went thru with Firebug and add new references to fonts where needed. I did find some pesky issues with Jetpack. It seems that their sharing functions and its styles are added after the theme. Any changes I would make to “sharedaddy” styles would be included before the sharedaddy styles. To solve this issue I used the Edit CSS feature in WordPress (under the appearance tab) to include these changes there. Problem solved!

While doing all of this I also took a look at plugins and installed a few additional things like WP-Navi, updated the image gallery (Image Gallery Reloaded) to be a bit nicer, and explored a few more image related plugins that I’ll be working on for the future.

Beyond Cleanup

I did get a bit beyond cleanup. I’ve added the WP Navi module to spice up pagination, changed out the gallery tool for WunderSlider/Gallery. These changes really do improve usability on the site. Currently the light box is not working on galleries, but I’ll fix that. I’ll be using my Menegroth page to really test the scalability and features of the gallery tool.

Overall I think this is pretty good – my theme is cleaner – I removed a lot of complexity from the experience. About 10 graphical lines are gone. I also got rid of all gradients and added some pacing to various places. It really opens things up a bit and draws focus to the content. I still have to track down more font issues in various places, but this is more just a matter of time and diligence to weed these things out. I’m going to play with the main menu colors and such. I keep trying to find a better theme than Graphene – I looked at about 10 this time around – but I always come back to it for its features and ability to customize.