Stabbing Behind the Arras

When I moved to WordPress, I had already thought pretty hard about what I wanted my site to look like.  I decided to use the free Arras theme because it provided the right balance of eye candy and layout that I was looking for.  One of the oddities I noticed was that the header is themed differently on different pages.

I noticed this when I first added two of Google’s Web fonts as my default serif and sans serif fonts.  I use the sans serif font for normal text:

body, p, html { font-family: ‘Droid Sans, sans-serif; font-size: 12px; }

The serif version of this font is for my header, since I don’t use a logo in my so-called personal brand.  The header (also known as blog-name in CSS) is wrapped differently, though, in two different places in the top of the theme.  I ended up adding a long CSS customization to my user.css file to get the look that I wanted:

div.logo a, div.logo a:visited, div.logo a:hover, div.logo a, div.logo a:visited, div.logo a:hover { font-family: ‘Droid Serif, serif; font-size: 34px; color: #333399; }

Any of the elements that start div.logo h1 are for the main home page.  The rest, the div.logo span are for the subordinate pages.  The subtitle, or blog-description, has the same issue so I did the same thing.

div.logo, div.logo { color: #990000; font-size: 14pt; font-family: ‘Droid Serif’, serif; }

This was similar to the theming challenges I had on Plone, where you often had rather deep nesting of styles.  I like that the Arras theme uses a user.css file, similar to Plone’s Plonecustom.css file, which enables you to make customizations outside a theme’s own cascading style sheets.  If you change your mind later and want to go back to the default theme, it is easy to just disable your customization.