Projects: emptiness mycss plugins stylesheet wordpress
by Cliffano Subagio
27 comments
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:
CSS can be quirky at times, an excellent resource on CSS is available at w3schools http://www.w3schools.com/css/ .
Thanks for using Emptiness theme.
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 ?
Cras, please check out WordPress Codex http://codex.wordpress.org/Using_Themes
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 Colleen,
Thank you for the compliment. I just submitted a new version of the theme (v1.1) which supports WordPress custom header image API, meaning that you can upload your own header image by using the form located at WordPress Dashboard -> Appearance -> Custom Header -> Upload New Header Image, browse and upload the header image.
I just submitted v1.1 a few minutes ago, so it might take a while until it’s available from the theme page’s download link.
Alternatively, if you’re still having problem, feel free to email me your custom header image (500×265 pixels) and I’ll be happy to package a customised Emptiness Theme for you.
HTH.
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
Betillo, what browser did you use when you experienced that problem?
Did you get the same error on all browsers?
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
Re IE6, I’m with this crowd :) http://mashable.com/2009/07/16/ie6-must-die/
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
Re the feed title. I just double checked, the atom feed should have the blog title. I’m not sure how you got untitled instead. What reader are you using?
:c why is it not installing for my blog site, it keeps saying some error of missing line 108 in style.css
That’s a weird error about line 108 in the stylesheet. Can you copy paste the exact error message? Perhaps something else caused the problem.
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
Hi rin, sorry I just noticed this comment of yours answering my query on the theme’s wiki page.
Do you happen to use some caching plugin? Perhaps you can try this http://wordpress.org/support/topic/292882
[...] 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- 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!