Wordpress How to: Customize OpenBook theme color scheme

Posted by jbj on Jul 3, 2008 in wordpress • 28 comments

Since the release of the OpenBook, many bloggers asked me how they can modify the color scheme of the theme. Before the release of OpenBook next version, which will probably allow the user to set the colors in Wordpress admin panel, here’s an easy, step by step guide to give your OpenBook theme the look you want, even if you don’t know any web language.

Before we start

For those who don’t know yet the OpenBook theme, here’s a screenshot:

Wordpress premium theme:openbook

You can download the English version here (this post also contains install instructions) or view a live demo on my personnal weblog.

Let’s go

Now we’re ready to play. The main thing to know with OpenBook color scheme is that I used 5 colors:

  • Background: #151515
  • Content background: #fff
  • header blocks: #222
  • Green (used for links): #49AB0D
  • Blue (Titles, hover links): #109dd0

Of course, you can manually edit OpenBook files to modify the color values, but having to change each value by hand is in my opinion, very boring.
Happilly, Vi is here to help. For those who doesn’t know, Vi (or Vim) is a powerful modal text editor. If you want to learn more aboout Vim, I recently posted an article about 100 very usefull Vim commands.

If you run any Linux distro or Mac OS X, Vi is already installed on your system. If you’re on Windows, you’ll have to download the GUI version here and install it.

Assuming you downloaded and unziped OpenBook, you now have to navigate inside the openbook22-en directory by using the Terminal, as you can see on the screenshot above:

Customize OpenBook theme color scheme

Now, in order to open style.css in Vi, type the following command in the Terminal:

vi style.css

We’re going to use a little Vi trick to modify each occurence of a pattern by another pattern. For exemple, let’s modify the default green color on links by red.
Type the following line, and then press enter:

:%s/49AB0D/FF0000/g

In order to save and exit the file, type :wq. If you just want to save, without exiting, type :w instead.

If you look at your OpenBook theme now, you’ll see that all links are now red. Pretty easy, isn’t it?
Now you have everything to modify OpenBook to make it exactly fits your needs. Just two things to know:

  • style.css is the main stylesheet used on OpenBook, but don’t forget to also edit ie.css (which is a stylesheet only for Internet Explorer) and jd.gallery.css, which is the stylesheet used on the Smooth Gallery.
  • The Vi trick I gave you is case-sensitive, so check case before using it.

I wrote this tutorial for my OpenBook theme, because many bloggers asked me how they can change colors easily. But of course, you can apply this tip to any theme you want.
Have fun!

28 reactions

» Comments RSS Feed

Leave a comment