A Cleaner Way To Customise WordPress Theme Styles
The most frequently asked question from Emptiness Theme users was about customising the styles (font, color, width, etc) and the header image of the theme, and I usually answered by giving them some pointers to which file to modify and where. The problem was that most WordPress users would make the modifications directly against the theme files.
The downside of such approach is that the custom code would end up buried within the theme, which users won’t remember few months down the line. And this will then discourage them from upgrading the theme in order to avoid overwriting the customisations accidentally.
A cleaner approach to customise a theme is by isolating the custom code away from the original theme code. Having said that, I would like to encourage my theme users to start practicing this approach. Here’s what you need to do:
- Install MyCSS Plugin, read the documentation on how to use the plugin. Note: you might encounter an error complaining about ‘my.css file not found’, to fix this, you need to create my.css file under mycss plugin directory and give it a proper permission (644 will do).
- When you need to customise a style, do it on my.css file. CSS code in this file will take precedence over the theme’s own style.css .
For example, to change the font-family of the sidebar headings, I added these lines to my.css file:
h3 {
font-family: helvetica, sans-serif;
}
That’s it. I didn’t modify any of the theme code. The catch here is of course we have to be careful not to accidentally delete my.css file.
I don’t know why WordPress doesn’t have this custom CSS feature as part of vanilla WordPress installation. I think this would be very useful when they finally provide easy theme upgrade just like the way upgrading plugins is done.
As for MyCSS Plugin itself, it would be nice if it allows me to customise the location of my.css file so I can put it external to the plugin directory. And how about storing the content of my.css in the database so it can be persisted between plugin versions? Another nice improvement would be to provide the ability to upload files, handy for custom images.
Related Posts:
Hi-sorry, I only just now checked back for your response. Wow-what an incredible resource! I’ve needed something like this! It’s going to take me a little while, I’m sure, but how cool! Thanks for sharing. Already a bit ahead of myself as I get ready to launch my 2nd Emptiness Blog (with or without my photos in the header).
Great advice! I will try it (so much to do, so little time ;-))
I have just made a new blog on wordpress. I got the domain from name.com. I am confuse about all it’s management and can’t be able to find the html codes to change the look of the blog. Any suggestions ?
Clif, the main problem is that the site is hosted by wordpress, I need my own hosting. I got the domain from name.com, there was a plain for “rapid blog” from wordpress.com. Suppose I have to place any add on the homepage, then wordpress would charge me anything, or I am free to manage my own pages independently.
Hi there,
I have to say first, that I love the Emptiness theme. After hours of searching, yours is definitely my favourite.
This process to change the header image, however, is way beyond me. I would love to use this theme but don’t know if I want to live with the stock header. And I tried following the instructions as you gave them but it is more than I can comprehend. 644 permission? No idea.
Any suggestions? Or is this theme just not for those who are not savvy in the tech department?
Thanks for your help. And I won’t be offended if you say that I’m just too unskilled in computer stuff. I know it! ;)
Hi !!
I’m new in this Blog world, a friend of mine told me about WordPress so I download it and installed, after that the next step was to find a minimal theme to use and guess what yours won :)
But now I have a proble it’s about the feed button or link in the main menu, when I press it the browser try to download a page :( so the question is ..
How do I use or configure this feature in your theme, remember I’m new to this so I don’t know if need to do something in wordpress or edit something in your theme.
Hope you can help me with this issue.
Best Regards
Betillo
Hi Cliffano !!
Sorry for the late reply I was away for few days. I check on different computers and browsers, mine it’s IE 6.0…
I think it’s this explorer version issue because on Firefox or newer IE versions that feature works fine.
Anyway thanks for your time and best regards.
Betillo
Sorry I forgot this !!
Where can I edit the Feed tittle, when I add this feed to a reader it appear as “Untitled”.
Thanks
Betillo
:c why is it not installing for my blog site, it keeps saying some error of missing line 108 in style.css
hi, i’m the same as appleftw on your project site also, by the way.
Warning: file(/usr/local/ndn/web/oneclicks/wordpress/wp-content/themes/emptiness/style.css) function.file?: failed to open stream: No such file or directory in /usr/local/ndn/web/oneclicks/wordpress/wp-includes/theme.php on line 180
Warning: implode() function.implode?: Invalid arguments passed in /usr/local/ndn/web/oneclicks/wordpress/wp-includes/theme.php on line 180
yes that’s the full error code.
i installed the theme through wordpress’ buttons.
theme > add new themes > upload > the i upload the .zip file of your theme here > install now
then that’s where the error code comes in.
and i did check my wp-content folder and i do see the style.css file is included. so, very very clueless. thank you for replying back :’D
[...] apartment where I lived back in 2005. I used the picture as a custom header image demonstration on a cleaner way to customise WordPress Theme styles using MyCSS [...]
I never knew of myCSS…thanks!
I used to customize the themes myself, but I found it was a pain to re-customize it after a theme update.
Going to test out myCSS
Imagination is more important than knowledge-Einstein.
very effective method To Customise WordPress Theme Styles
thanks…….
i started blogging long long time back but couldnt continue. last november i stated blogging again with blogger.com and later moved to my own domain with wordpress. since then i was looking for a simple, clean theme. and now i got it. and on the process of customizing it. you have no idea how great this theme is. i just love it. thanks million times for this..
Oh dear. I get what to do with the css code, but where does it come from?
Not very good with all the new technologies!
I have used the Emptiness theme a few times with good results. It’s quite customizable, though I have moved onto Thesis for heavy customization. :)
I like your style of customising wordpress themes. I’ll try it. Thanks
Hi,
If i update the emptiness theme, will i lose the customized header image?
Thank you
Hi Cliffano,
Thank you for the Emptiness.I like this theme.But I know nothing about css…Could you please help me out?
-How can I get rid of the Heading fonts on the top-the blog’s title?Since I want to add the fonts on my header image.
-I dunno why the link to the header image is wrong.(it’s doubled “www.robinwang.co.uk”)Where can I correct it?
I see.Thanks Cliffano,how can I create hyper link out of the header image?
Hi- this is great advice and makes excellent sense, even to someone who is ‘blog illiterate’. Having said that, my brilliance stops at trying to transcribe the css code into something that actually results in my image loading into the header. What is wrong with me?! Can I be this slow? It’s almost like my algebra ‘nod’. It all made sense on the blackboard, and then once I looked down at my paper with my own unique equation-poof, all understanding dissipates. Help?
Oh-and after going through all of the WP theme options, it still always comes back to Emptiness. Love it!