Before we start
For those who don’t know yet the OpenBook theme, here’s a screenshot:
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:
Now, in order to open style.css in Vi, type the following command in the Terminal:
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:
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.