WordPress How to: Customize OpenBook theme color scheme

by Jean-Baptiste Jung. 39 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!

Comments (39) - Leave yours

  2. TeknoHell said:

    Nice theme. But is a problem.
    the css picture isn’t changeing.?
    Look: http://www.teknohell.com/resimler/problem.JPG

    My website: http://www.teknohell.com

    Help me!
    (sorry. because my english speak is bad.)

  4. TeknoHell said:

    Thanks, jbj.
    But, i could not do :( .
    i found tutorial link(JonDesign’s SmoothGallery): http://smoothgallery.jondesign.net/showcase/gallery/

    There is code my theme/header.php anyway.?
    But isnt becoming.
    i Loved you openbook lot. i want to set.

    Can you help me?
    (sorry. because my english speak is bad.)

  5. jbj said:

    You have to read the “Configuring SmoothGallery” on the link I gave you, not JohnDesign tutorial. (which is for generic SMoothGallery, not SmoothGallery embeded in WordPress)
    Hop it will help.

    Greetings :)

  7. TeknoHell said:

    Ops!

    OpenBook Options > Featured categorie ID: 18
    id 18 is: http://www.teknohell.com/?cat=18

    home page not changeing.?
    http://www.teknohell.com

  8. TeknoHell said:

    Ops!

    OpenBook Options > Featured categorie ID: 18
    id 18 is: http://www.teknohell.com/?cat=18

    home page not changeing.?

    ps: my 6. post: Your comment is awaiting moderation. im re-send

  9. jbj said:

    In Openbook option, you have to report the ID of your “featured” category (18). Then, add some posts to the featured category and you’ll see theses posts rotating on homepage.

  11. jbj said:

    Isaw in the source that you put 3 posts in your featured category…but you didn’t assign any image, this is the reason why no image display ;)

    You got to create – for each post in featured category – a custom field name featuredimg and assign it the wanted image url as a value.
    (There’s more info about that in the tutorial I shwon you)

  14. jbj said:

    Hey, first of it all, I can’t answer everyone in a five minute delay. So, please be patient :)
    Secondly, I can go to your wordpress install and set an image, (But working on a blog is paid support) but each time you’ll want to put a post in the gallery, you’ll have to create a custom field and assign it an image.
    That’s easy, believe me. Try to read this article, it should help you.

  16. MCMLXXXVIII said:

    Great WP theme. I’m having just a slight problem with the SmoothGallery, particularly the category IDs. For the left and right category columns, do I input an #ID or the name of the category? I tried entering my categories (ie. Media, News), but it ends up just posting every recent entry. I also have the same problem for the Featured catagory ID on SmoothGallery. As I entered the ID of it (“featured”), it basically shows all the posts in every category. Check my site for a better understanding. I’m looking forward to your help. Thanks!

  17. MCMLXXXXVIII said:

    *Update* I actually figured out the whole dilemma by setting the permalinks to ID# (how dumb of me!). Sorry for the non-sense!

  19. godefroy said:

    hello jbj,
    i totally love love love your theme!!!
    actually i’m already using it, i tweaked it as much as i could, hope you like it\
    i tried to make it as different as i could, but there’s a limit :) )

    there is one thing i’d like to know and i really need your help on that:
    is there a way to ad an image (a vignette-like image) to each excerpt listed in the monthly archive?
    i’m not very good at php, i think i need the line of code that pulls the image from each post and attaches it to the post excerpt in archive.

    thanks and hope i’ve been coherent enough :) )

  20. jbj said:

    Hi godefroy, glad you like OpenBook and glad to see that you customized it very well :)
    For now, Openbook doesn’t allow you to put an image in the monthly archives. Thought, I can do it directly in your blog, as paid support, if you want :)

  21. godefroy said:

    thank you jbj,
    it’s really not a must, it was just an idea to further beautify the archives page, but you’ve already done an amazing job; the archives look great comparing to the majority of wordpress themes
    congrats on your hard work! :)

  23. www.helmiasyraf.com said:

    hi jbj…i am blog newbie….so bit unfamiliar with the terms of all those code

    i have few probles…

    1. How can divide the posting into few categories under smooth galery like yours….mine is all under one heading -blogging…do you have any idea?

    2. When i go to each particular page of my posting…..at the side bar there is more than 1 column of category under the title IN THIS CATEGORIES….i think maybe the posting under few dif cate…..so how can I change the title as there will be no three same title anymore….

    3. How to take out the Categories and Archives from the side bar…. i think it has alrady embedded in the code right? which part of code that i have to delete?

    4. Do u have any tips which how can i make bar at the bottom at my page as the sidebar is too long which make my blog looks lengthy….Just like below of this page

    By the way….thank you so much for your wonderful theme and for your assistance…..

    If you dont mind, can you give tips or comment about my blog …..I think there is still space for me to improve the blog….thank you

  24. www.helmiasyraf.com said:

    I need other help…iI hope u dont mind…
    Why i cant update my code…this code will appear -You need to make this file writable before you can save your changes. See the Codex for more information. How to change the font as your theme fonts quite small for me….tq for ur previous assistance.Really helpful (n_n)

  25. Da Lash said:

    Dude… This is exactly what I am looking for. A good professional looking theme which is fun and needs absolutely no manual editing! This is the best that I have seen after looking at a few hundred themes on the net. Now I can forget about the design and focus on the content. Thanks a lot dude!!! I have it up and running on my blog.

    Just one problem… The “Featured” Category is showing up in the top menu! This should not happen right?

    How do I fix this?

    Da Lash

  27. Mawe said:

    Hi JBJ..

    First of all, I’d like to say this is a really great theme you’ve given us bloggers! What a relief to find a cool theme like this without having to manually edit all those confusing code. You’re a blessing :)

    I’d like your help on a small problem, though. I’m having trouble with my header image. I downloaded the English version of Openbook22, and whenever I try to edit the header image and color in my WP admin panel, it doesn’t show up in my home page.

    What’s more, all the categories I set up on the Openbook Options keep on disappearing. I’d really be grateful for some help. Thanks!

  28. jbj said:

    Hey Mawe, thanks for your compliments, I really appreciate it =)

    Btw the “header image and color” isn’t supported in openbook. I think you have this option because you have the default WP theme installed.
    To modify OpenBook logo, just use the related textfield in the “OpenBook Options” tab.
    To change the background color, just use this tutorial ;)

    For your categories, are you sure to define categories IDs, and not categories names? (It must look like this: 1,5,7)

  30. Gustavo said:

    Hey my friend, let me tell you you have done a great job with this theme, thanks. I have a little question about the categories, you can check what I´ve done www.teededamas.com it´s a female golf´s magazine.
    the question is: the slideshow categories is “destacadas” (in yours, were featured) everything it´s working well but I would like to hide the “destacadas” from the navigation bar (but the slideshow must still work). I´ve been looking all around how to exclude it, but I couldn´t. How can I do it?
    Thanks again

  31. jbj said:

    @Gustavo: Get the id of your “destacadas” category. Edit the header.php file. On the wp_list_categories() function, add the following parameter:
    exclude=1 (Assuming 1 is the id of your destacadas category).

  34. Gustavo said:

    Hey mate, I have another little question, I have in the nav bar a few categories, can i mix them with some pages? I wanna have in the nav bar for example 4 or 5 categories plus an “about” page and “contact” page..

    Can you tell how to do it? Thanks again, really

  36. denised said:

    I downloaded the openbook theme and now need to login to my site again to make changes and there is no link to do this. How can I get back into my site as admin? Thanks.

  38. Abe Frogman said:

    Great theme! How can I hack this to have the functionality of the featured content gallery plugin? Or the full functionality as seen on http://smoothgallery.jondesign.net/showcase/gallery/ with the arrows and the thumbnails?

    I really like the featured content gallery plugin, because it has the nice options page, but it will not work with the openbook theme apparently. How can I fix this please? I appreciate all of your help, and for making this awesome theme GPL!

  39. Ozzie said:

    Hello,
    It is a great theme that I use since beginning of this year. I have a design question.
    I would like all category titles on both left and right column seen at same horizontal position at frontpage.
    Is there a way to do this?

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!