Custom CSS frustration
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.
Filed under: blogging, could_do_better, grumble | 5 Comments
Tags: CSS, Custom CSS, SandBox, theme, WordPress, WordPress.com
Subscribe
Recent Comments
Tim Coote on Ross Anderson RIP iain on Skiing in Espace Killy (Val… Chris Swan on Getting more from a British Ga… Murray Cowell on Getting more from a British Ga… JL on AI MacGuffin 
Pinboard.in bookmarks- Meta.ai Oh My!
- Looking for AI use-cases — Benedict Evans
- the biggest threat facing your team
- Why has Hugh Grant settled his phone hacking claim against the Sun?
- Open Source Security (OpenSSF) and OpenJS Foundations Issue Alert for Social Engineering Takeovers of Open Source Projects
- AI isn't useless. But is it worth it?
- Pluralistic: The true post-cyberpunk hero is a noir forensic accountant
- Subaru battery drain due to missing 3G network
- Paying maintainers: the HOWTO
- SARS-CoV-2 airborne infection probability estimated by using indoor carbon dioxide | Environmental Science and Pollution Research
Chris Swan's Weblog 
so can you help me figure out HOW TO??? before I shoot my computer and throw my mac in the lake?????
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.
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;}
/*********************************************************************/
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.