How to change colors in your blog’s wordpress theme
It’s a familiar story to all of us who host our own blogs. We spend hours hunting for the perfect theme, and yet it’s so hard to find the right one. Even when the design and layout is perfect, and the theme has all the features one’s looking for, you are still put off by the colors.
Most of us abandon the theme because we think it’s too difficult to change colors. For those of us who have never done any CSS editing (or, for that matter, any coding whatsoever), it seems an uphill task – and even a little scary.
It’s really not difficult at all – take it from someone who has no CSS editing knowledge whatsoever.
Change the colors in your theme is ultimately as simple as cutting and pasting.
Why do people change the color of their theme ?
1. Color Preference: I keep coming across anecdotal studies that say blue is the most popular color in the internet. Certainly most websites have a lot of blue in them, and a lot of text is in blue – whether it’s bolded newspaper headlines or hyperlinks.
But not everyone likes blue – I like green, for instance. While choosing themes, I found myself instinctively attracted to themes that had green in them, even if they didn’t have the features I was looking for.
2. Readability: Black backgrounds are harder on the eye and are not as reader-friendly as white backgrounds.
3. Color Co-ordination : If you are using a custom header image, you don’t want theme colors that clash with the header image. Taking it a step further, you can even build a website so all colors share a common palette.
4. Uniqueness : If everyone had the same default color template of the theme, then how is your website going to stand out?
A Step by Step guide to changing the color of your theme:
Step 1. Figure out the colors you want your website to have.
Go over every part of your blog/ website. Make a list of each part and what color you’d like it to have. For instance – ‘highlighted text – dark blue’, ‘post header – black’, ‘comments background – white’ and so on. This should speed up the process when you get down to the actual changing. Usually, it might boil down to just noting the parts/ colors in your selected theme that you don’t like.
Then you get to the colors you’d like to have. There are a few ways of going about this. One is to try to color co-ordinate your website, keeping all colors in your blog in the same palette. This may work for people who have a static custom header or a logo. Say your logo is a crimson rose with a green leaf, and you want font colors to be the same shade of the leaf, and highlighted text to be crimson. Think of this as the virtual equivalent of coordinating the curtains with the furniture or wall paint. It’s surprisingly easy to do, too.
The other way is the path that most of us follow – we know which colors we want things to be – say blue or black or green, but we don’t know which specific shade. Sometimes we like a color we see in another blog or website, and we’d like to use the same shade.
Step 2 : Get the hex codes.
There are lots of tools available that can give you hex codes for every shade under the sun. Search for “html color code” or ‘hex color code” and you’ll find hundreds of color charts and color wheels and so on. Here is one, for instance.
– If you are going the color coordination route, then you can use a tool like Color Palette generator. You can upload your blog header/ logo/ other image to the website, and it will break down the various colors in it and give you their hex codes. You can then use those codes to create a palette of your own.
– If you see a color you like on another blog/ website and want to use the same one, there are color picker tools available that will get you the code (hex code/ html/ red, green, blue values, any way you want). I used Instant Eyedropper, which was quite good. Just mouse over to that color and the eyedropper will tell you the hex code.
– If you want to see how different colors will look beside each other, you can use something like this Color Combo Tester.
Step 3 : Edit the stylesheet
Now that you know which colors you want your blog to have and the hex codes for them, it’s a simple matter of plugging in the new values in the stylesheet. For most themes, you can edit the stylesheet directly through your WordPress dashboard under Appearance ->Editor. WordPress automatically opens the Stylesheet when you click “editor”, but if not, you can find it under Theme files – look for Style.css.
Some other themes use a different CSS file. This could be default.css or some other named file – check in your theme documentation. You may also not be able to access this through the WordPress Dashboard but may need to login to your hosting service and open the file using the code editor.
First, back up style.css (or default.css or whatever it’s called). You can do this by copying and pasting the entire text to a text file in your computer. Or, you can create an online backup by saving the file under a new name – say olddefault.css.
Once you’ve done that, all you need to do is edit style.css . This is a simple matter of going to the relevant section – header, or sidebar, and so on, and replacing the appropriate hex code with the code of the color you want to use. By now, you should be able to recognize a hex code – it ‘s a combination of letters and numbers and looks something like say, #70FF70 or #8C8984. Just cut and paste the code of the color you have chosen.
Most of us – personal bloggers or those of us with non- “super busy” websites can easily use trial and error. Plug in a color and if you don’t like the way it looks on your website, change to a different color.
Make sure you are not deleting any other text apart from the color codes. But even if you delete a few other lines of code by mistake, all you need to do is delete the entire text, copy and paste the original stylesheet text and start all over again.
Cutting and pasting text – isn’t that something even a newbie can do?
- Typepad 101: Change the Background of your Blog (everything.typepad.com)
- 40 Free And Useful Online Generators For Web Designers (smashingapps.com)
Along with thanks and compliments to the sources for the shared data
Creative Commons Copyright © Shanepedia 2012