Custom CSS frustration

27Aug09

I spent a little time (well far too much really) earlier this week tarting up the corporate blog, so that it would look more like our web site. It wasn’t much fun.

I’d had in mind that I might just merge the two, but it turns out that WordPress.com doesn’t offer the DNS flexibility that I needed, so that route was quickly backed out.

Next up was the tricky area of look and feel. WordPress.com has some great themes to choose from, but limits the kind of full customisation that you’d get from hosting your own WordPress for perfectly good security reasons (unless you’re a VIP blogger). To balance things up it offers the (paid for) option of Custom CSS so that you can get control over look and feel. You can start with any of the existing themes, or use the SandBox theme, which is essentially a blank piece of paper. I’d done a little CSS hacking before, though I certainly wouldn’t consider myself an expert, but trying to clone the look and feel of our web site turned into a miserable experience:

  • Firstly the documentation is next to useless. There’s a forum dedicated to CSS, but just about everything in it leads to some condescending ‘CSS has a learning curve’ type comment. It seems that nobody has bothered to pull together a simple HowTo for newbies – this is how you get you logo in the header, this is what you should do if you want a sidebar on the right rather than the left etc. The best I did find was Mark’s Classic CSS explained.
  • It didn’t take me long to trip over the WordPress Theme Generator, which is very neat, but turned out to be a bit useless as the themes it makes are for people doing their own WordPress hosting. It would be fantastic if such as tool existed to generate CSS to sit on top of SandBox, and frankly it’s a disgrace that WordPress.com don’t offer something like this to help people get started.
  • It turns out that SandBox isn’t documented in a WordPress.com friendly manner. Or if it is then (as Douglas Adams might say) it’s ‘in the cellar, in the bottom of a locked filing cabinet stuck in a disused lavatory with a sign on the door saying “Beware of the Leopard“‘. The best I could find was Lorelle’s all the styles for the SandBox theme – a dated list of what’s there, with essentially nothing to say how to use it. There’s lots of detail in the readme, and more on the project home page, but I must confess that this was hard to parse, and seemed to be intended once again for those making custom theme’s for their own servers rather than custom CSS for WordPress.com.
  • I was mighty impressed by the SandBox theme competition, the results of which seemed to somewhat work when I tried them as Custom CSS, but I remained thwarted by simple things like column placement.

In the end I pretty much gave up. Having found that the Vigilance theme had almost all of the customisation I needed (thanks Drew) it was time to return to productivity rather than pain. Maybe I’ll cough up the $14.97/yr so that @clarkjch can have his favourite font, but then maybe not.



5 Responses to “Custom CSS frustration”

  1. 1 vromano

    so can you help me figure out HOW TO??? before I shoot my computer and throw my mac in the lake?????

  2. 2 Chris Swan

    Vromano – I already posted everything useful that I found, which I don’t think does actually amount to a HowTo.

    If you want to save that Mac from the lake then I’d suggest just going with the the Vigilance theme and customising that a bit. At least it lets you have a logo in the header, and choose your own colour scheme.

  3. Hi Chris, I found this post following the “custom CSS” tag while browsing for other people using the feature. I’ve been tweaking my own designs for a little while and have taught myself CSS the hard way: reading tutorials and reference pages online. The feature on WP.com is completely un-supported so you did well to take such a dive into the (relatively) unknown. I’ve been working on CSS skins for the Sandbox theme and I pieced together something that looks a little like your corporate site, just to see if I could. I didn’t spend ages on it or check very thoroughly and I know that it is almost a year since you made this post but I thought I’d share anyway just in case you find it useful. You’d need to switch to the Sandbox 1.6.1 theme and add the CSS code to the original stylesheet. I will post it below because I couldn’t find a contact form or email address, apologies if it doesn’t get formatted correctly.

    Luke

    /*********************************************************************/

    body {background-color:#cbcbcb; color:#5e5e5e; font-family:”Futura-Medium”,”Futura”,”Trebuchet MS”,sans-serif; font-size:62.5%; margin:0;}
    #wrapper {margin:0 auto; padding:10px; width:700px; background-color:#ffffff; font-size:1.4em;}
    a {color:#5e5e5e;}
    a:hover {color:#999999;}

    div#container {margin:0 0 0 40px; width:450px; float:left;}
    div#content {margin:0;}
    div#primary {float:right; margin:0;}
    #secondary, .skip-link {display:none;}
    #footer {margin:0; visibility:hidden;}

    h1#blog-title {margin:0;}
    h1#blog-title a {display:block; text-indent:-999em; background:#fff url(“http://www.capitalscf.com/content/sites/all/themes/capitalscf/images/capital-scf-large-logo.png”); height:150px; width:500px;}
    #blog-description {display:none;}

    div#menu {background-color:#ffffff; font-size:1.1em; font-weight:bold; text-transform:capitalize;}
    #menu a {font-family:”Helvetica Neue”,Arial,sans-serif; color:#999999;}
    #menu a:hover {color:#ff0000;}
    #menu ul ul {display:none;}

    #nav-above {display:none;}
    h2.entry-title {margin:0;}
    h2.entry-title a {color:#5e5e5e; text-decoration:none; font-family:”Helvetica Neue”,Arial,sans-serif;}
    h2.entry-title a:hover {color:#999999;}
    .entry-date, .entry-meta {color:#999999; font-size:0.8em;}
    .entry-date abbr {border:none;}
    .entry-meta {margin:20px 0 50px 0; padding-top:10px; border-top:1px dashed #999999;}

    #primary h3, #primary h3 a {font-family:”Helvetica Neue”,Arial,sans-serif; margin-bottom:10px;}
    #primary ul {margin:0;}
    #primary ul li {list-style-type:none; padding-bottom:8px;}
    #primary ul ul ul {display:none;}

    #primary a {text-decoration:none; color:#007600}

    body.page textarea#comment {width:450px; font-family:”Helvetica Neue”,Arial,sans-serif; font-size:0.9em;}

    /*********************************************************************/

    • 4 Chris Swan

      Wow – thanks for that. I’ll check it out. It’s a shame that we’re days away from a web site relaunch that’s going to change the look of our corporate site.

      • Not a problem, hopefully it will help you with any CSS work you take on in the future. I hope the relaunch goes well.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: