This is a beginners tip, given by a beginner. If you’re an advanced CSS user, you may want to leave a sarcastic correction in the comment box 
If you’re a WordPress user, you may have noticed that amongst your theme files is a CSS file usually called ’style.css’. This file contains all of the formatting information for your blog template, colours, positioning, size of sidebars etc. It is extremely easy to make simple changes to your blog format, by altering one line of code in this file. Love your template, but wish it was a different colour? Change seven characters in this file and you can.
Nothing can go wrong, as long as you take one simple precaution. Download a copy of your existing CSS file from your preferred theme. Make a copy and move it to a safe directory on your PC. Work on the other copy. Now, if your changes ‘destroy’ your blog and go all wrong, simply upload your backup copy and everything will be back to normal. This security gives you the chance to experiment.
Open your working copy of style.css (NOT your backup copy!) using a text editor such as Wordpad. Do not use a word Processor, such as MS Word, as it could corrupt the file. Have a read through, and compare it to your blog. A well written CSS file will contain headings, telling you which section of the blog each block of code is referring to. A lot of it may not make much sense, but headings such as ‘blogtitle’,’sidebar’ or ‘right sidebar container’ will be self evident. Colours will be given as HEX codes, for example #D5E1B1 is the green that Blog-Op uses for a background. Any seven character code in this format will be a colour somewhere on your blog.
So, to change the colour of your sidebar for example, scan the CSS for a section headed ’sidebar’. Look for a colour HEX code, and change it to one of your choice. Ensure that the # symbol is present at the front. Save the CSS file & upload it to your theme directory, refresh your blog, and see if it has changed. Remember, if it completely breaks the formatting of your blog, upload your backup copy to return to normal, and then try again-see if you can tell where you went wrong.
As you read the CSS file more will become apparent: you can see how things are sized, eg your sidebar might be 180p(ixels) wide and you can change this if you want. Be careful of knock-on effects on other elements, and always test the results in Firefox AND Internet Explorer. As long has you have the original CSS file kept safe, nothing can go permanently wrong.
Know the colour you want, but not the HEX code? Use this simple colour chooser at The Hex Hub.
9 users commented in " Make Simple Blog Format Changes With CSS "
Follow-up comment rss or Leave a Trackbacki’m quite a lazy guy who’s not fond at all of uploading files all the time
so what i do is i make my changes straight in the “theme editor” in wordpress.
my way of backing up the original code is i cut the portion of the code i plan to change and paste it in wordpad. then i make my changes. if i’m not happy with them, i just copy the code from wordpad and paste it back where it was.
note: i do keep a copy of all the original files of the themes i use in my computer.
I used to do that, but now I prefer to keep my theme folders (and others!) un-writable to help dissuade our hacking friends…
Good point on just backing up the section of code you’re working on, makes life simpler!
Thank you for turning the no-follow off. On the one hand I see Googles point, but on the other hand, if someone is willing to comment on your blog, aren’t they worth a link?
I agree Lenny, maybe one day, when I’m getting 500 comments + 500 spams a day, but for now moderation takes me 5 minutes.
I like people leaving comments, the least I can offer is a Google worthy link…
Good advice! Most people who have blogs don’t even know what CSS is, so thsi will certainly be helpful.
Anita
Great post. knowing css is very helpful and its pretty simple to learn.
CSS is so powerful, and yet so simple, you can take huge steps to personalizing your template. As long as you have a backup, nothing can go wrong, so experiment away…
With all my fritzing around I need to go dig up our old HTML for Dummies book!!!
[...] theme that you like the look of, but wished the colours were just a bit different? Then read how to make simple blog format changes with CSS, and you can see how just altering a single code in your theme files can immediately change your [...]
Leave A Reply