comments 33

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:

  1. 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).
  2. 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.

About these ads

33 Comments

  1. Renee

    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!

  2. 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).

  3. Cras Spiele

    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 ?

  4. Craps Spiele

    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.

  5. colleen

    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.

  6. Betillo

    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

        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

      • 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

  7. rin

    :c why is it not installing for my blog site, it keeps saying some error of missing line 108 in style.css

  8. rin

    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

  9. Pingback: Emptiness Header Images « Blog

  10. 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

  11. 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..

  12. Laura Brisbane

    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!

  13. Houston

    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. :)

  14. Deborah

    Hi,
    If i update the emptiness theme, will i lose the customized header image?
    Thank you

    • Cliffano Subagio

      Hi Deborah,

      The custom header image should still be there upon updating the theme version.

      However, it’s always a good practice to back up your custom header image somewhere :).

      HTH.

  15. 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?

    • Cliffano Subagio

      Hi Robin,
      If you’re not familiar with CSS, it’s probably easier if you modify the theme files directly.

      1. In header.php file, remove the following lines:
      <h1><a href=”<?php echo home_url(); ? rel=”nofollow”>”><?php bloginfo(‘name’); ?></a></h1>
      <?php bloginfo(‘description’); ?>

      2. I suspect it could be one of the widgets/plugins that you use. Perhaps you can try disabling them, check if the problem disappears, then reenable them one by one to find out which one is the culprit.

      Thanks for using the theme :).

    • Cliffano Subagio

      The header image is actually a background on div.splash , you can find the relevant html in header.php file and find the word ‘splash’.

      To make it a link, you can try:
      – add a div inside the div.splash, that div must have the height and width of the header image, then wrap that div with anchor tag
      – or remove the background image, then add an img tag for the header image, then wrap it with anchor tag

  16. 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?

  17. 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.

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