Modifying your theme colors

Socrates Premium Wordpress Theme

Socrates Premium Wordpress Theme

Get Instant Access

Have you ever come across a WordPress theme available online and thought, 'Wow, this is a great theme but it would look even better if it had a green layout!'? This happens to me really often, and I'm pretty sure it's happened to you as well.

Luckily, changing the theme color scheme isn't as difficult as it seems to be.

Getting ready

Of course, you'll need at least one readily available WordPress theme. You'll also need a text editor. In this example, we shall use the Vi text editor—which is my favorite text editor; however, even other decent text editors can do the job (TextEdit on Mac, gEdit on Ubuntu, or Notepad on Windows).

If you don't have a favorite text editor, you can use Vi text editor—which is available by default on Mac and Unix systems and freely downloadable from the link: download.php#pc

On Mac and GNU/Linux systems, just open a terminal and type vi in order to open the Vi text editor. Type vi myfile.php in order to open a file in Vi.

Macintosh ¡^ vi isingls.chp

How to do it

1. The first thing we need to know is the hexadecimal color codes for each of the theme colors. Most WordPress themes use a color scheme of three to five different colors.

2. In order to know which colors are used on the theme, we'll have to open the theme CSS file, named style.css.

3. The CSS property used to define a background color is background color (or simply, background). For the foreground color, the property's name is color, and for the border colors, it is border color (or simply, border). For example, here's the color scheme which I use on the OpenBook theme:

□ Background color: #151515

□ Content background color: #fff

4. Once you have known about the colors used on the theme, you'd want to modify the theme. Open the style.css file in Vi:

vi style.css

5. Vi has a very useful command to replace all the occurrences of one sting with another. This way, you'll have to run the command only once for changing each color. If you choose to use some other text editor, then look for the search and replace command, which achieves the same result.

6. For example, suppose we are using the OpenBook theme, and you want to replace the dark grey background with a white background. Run the following command in Vi:


7. Save your modification with the help of the save command: :w

8. Repeat the search and replace command as necessary.

How it works

The command used above is a powerful find and replace feature of Open Source text Editor Vi.

In case you want to learn more about the Vi's features, visit the following link: http://www. 0-vim-commands-every-programmer-should-know

Following are a few important points, for your information:

► All themes use a style.css file, but some themes also use extra stylesheet (for example, using a specific stylesheet for Internet Explorer is very common). Thus, make sure to replace colors in all stylesheets that are part of the theme.

► This trick can only replace CSS-based colors. To modify image colors, you'll need to use a design program such as Adobe Photoshop or The Gimp.

► If you changed your theme colors and some parts still display the old colors, make sure that the CSS colors are written in hexadecimal codes (for example: #151515). Some theme designers use color names instead of hexadecimal codes (for example: they may use background color: white instead of background color: #ffffff).

► Some color codes can be written by using shorthand, for example, #006699 can be written as #06 9—therefore, make sure that you've checked for that too.

Was this article helpful?

0 0
Make Money Blogging

Make Money Blogging

It is fine to get started on a hosted solution like Blogger.comor They will allow you to learn the basics of blogging and web publishing without spending money. As soon as you nail down these basics, however, it is vital to buy your own domain name and to purchase a web hosting package with some company.

Get My Free Ebook

Post a comment