Tuesday, September 19, 2006

Customize cordobo-green-park theme

After WordPress installation I started to choose a theme.


There was a lot of themes on http://wordpress.org/extend/themes/...


After several hours digging I stopped on cordobo-green-park.
I liked that theme but I decided to modify that (experiment with main color).


The original theme was done in two colors: green and grey.
That allowed to "shift" a main hue quite easy. The result you may see in this very moment.


I will describe the procedure for a case somebody will want to do something similar.


The main idea.


Since cordobo-green-park is done in green and grey colors it is possible to change the green color and its hues to let's say red (blue, violet or whatever you like) and its corresponding hues.
So, we are going to shift main color and preserve saturation and light.
Note: The current theme shift is +140 in GIMP (and Photoshop) color hue scale (0-360).


The manual procedure.



Automated procedures for GIMP (automated) and Photoshop (automated) users are described below. But I think it makes sense to read manual procedure description to understand better what happens.


  1. Download cordobo-green-park and unpack it to appropriate folder (<WordPress>/wp-content/themes).

  2. Log into your WordPress as admin and activate "Cordobo Green Park" theme

  3. View your site. Create a screen-shot (Alt+Print Screen). You'll get something like the following:


  4. Run GIMP. (GIMP supports many languages. I'll mention English menu names.)

  5. Create a new image: [main GIMP menu] --> [File] --> [Acquire] --> [From Clipboard].

  6. In a new window with your screen-shot navigate to [main menu] --> [Tools] --> [Color Tools] --> [Hue-Saturation...].

  7. Specify the hue shift in opened Hue-Saturation dialog.



    NOTE for Photoshop users: the same procedure may be done via [main menu] --> [Image] --> [Adjustments] --> [Hue/Saturation] dialog (Ctrl+U):



    When you find a desired shift value it's time to modify "green" images of the theme.


  8. The "green" images are in <WordPress>/wp-content/themes/<cordobo-green-park>/images folder.
    There are two "green" images (favicon.ico and screenshot.png) in <WordPress>/wp-content/themes/<cordobo-green-park> folder (this is the theme root).

  9. Open each "green" image in GIMP (Photoshop). Shift the image hue on the desired value. Save the image.

    NOTE for GIMP users: how to shift hue for different images:

    • Edit png or gif image:

      1. Open an image in GIMP. Pay attention that the image is opened in "indexed" mode (window title is "chungo_logo_headerbar_green.png-6.0 (indexed, 1 layer) 2400x47").

      2. Switch mode to "RGB": Click [main menu] --> [Image] --> [Mode] --> [RGB]. (window title becomes "*chungo_logo_headerbar_green.png-6.0 (RGB, 1 layer) 2400x47").

      3. Specify the desired hue shift using [main menu] --> [Tools] --> [Color Tools] --> [Hue-Saturation...] dialog.

      4. Switch back to indexed mode: [main menu] --> [Image] --> [Mode] --> [Indexed].

      5. In "Indexed Color Conversion" dialog specify "Generate optimum palette", "Maximum number of colors"=256, "Color dithering"=None, "Enable dithering of transparency"=false.

      6. Save the image.



    • Edit favicon.ico image:

      1. Open the image in GIMP. Pay attention that the image is opened in "RGB" mode.

      2. Pay attention that there are three layers. ([main menu] --> [Dialogs] --> [Layers]).

      3. Shift hue on a desired value for each of the layers.

      4. Save the image. (8 bpp, 1-bit alpha, 256 slot palette are OK.)





    NOTE for Photoshop users: For now I don't know how to change the ico file.
    My Photoshop cannot edit *.ico files and it's possible that yours cannot either. I use GIMP 2.2 to do that.


  10. The last thing to do is to modify the style.css from the theme root folder. In order to do that use the textareas below:


  11. Note: several script functions used to perform the "shift"

    /*
    File http://www.js-examples.com/page/javascripts__example.html?view=1107
    was retrieved from the JS-Examples archives
    http://www.js-examples.com
    1000s of free ready to use scripts, tutorials, forums.
    Author: Steve DeGroof - 0
    */
    //convert rgb to hsl (all values 0..1)
    function rgbToHsl(r, g, b)

    //calculate rgb component
    function hToC(x, y, h)

    //convert decimal to hex
    function toHex(decimal,places)

    are taken from http://www.js-examples.com.



    Paste a content of your style.css here (original style.css):


    Maximum hue shift supported by image editor (360 for GIMP and Photoshop):
    Desired hue shift:

    Modified style.css (? replacements):




The automated procedure.



People ask for an ability to modify not only hue but saturation also.
(I haven't been asked for lightness yet. But this is a question of time I guess.)



I spent some time investigating algorithms to shift saturation and found that it is easier to utilize Photoshop (and I hope GIMP in future).
Plus since there is an ability to script the Photoshop I decided to automated the procedure of theme images modification also.




This is a procedure for GIMP users.
You may change hue, saturation and lightness. All images are modified automatically.


  1. Download SNNicky.com-customize-cgp.zip

  2. Unpack the script to some location.

  3. Open the script in some text editor to read the instructions.

  4. Follow the instructions.

  5. A way to modify style.css for a hue shift is described above.






This is a procedure for Photoshop CS, CS2 users.

You may change hue, saturation and lightness. All images (except favicon.ico) and style.css are modified automatically.


  1. Download customize-cordobo-green-park-theme-photoshop-cs.zip

  2. Unpack the script to some location.

  3. Open the script in some text editor to read the instructions.

  4. Follow the instructions.



I'm going to maintain this post (correct typos, improve description, ...)


Your comments are welcome.




Revision: 1.7
2 of December 2006



Revisions history:

1.8:
  • Customization procedure is automated for GIMP users.


  • 1.7:
  • Simple automation script fix for Photoshop CS2.


  • 1.6:
  • Customization procedure is automated for Photoshop users (except favicon.ico).


  • 1.5:
  • Details on how to shift an image hue in GIMP are added.


  • 1.4:
  • The procedure is described using GIMP.


  • 48 comments:

    Cordobo said...

    Hi snnicky,

    very well done! Thanks for the great work, a lot of people will appreciate your work.

    Best regards from Germany,

    Andreas

    Cordobo said...

    Regarding the Icon:

    A powerful and free (no Adware or Spyware) icon-editor can be found at Wildfire:
    http://www.wildfiredesign.net/iconlab/index.htm

    Andreas

    snnicky said...

    Thank you, Andreas.

    I downloaded GIMP 2 from http://www.gimp.org/ yesterday. That's free open source program.

    And that can edit icons.

    I'm going to modify the procedure description and use GIMP for images manipulations.

    Cordobo said...

    I'm damn impressed by your work, especially the javascrict-implementation for the css changes is a very good piece of work.

    Thanks ;)

    Mike said...

    snnicky,

    There's also a plug in for Photoshop to edit favicons. See http://www.telegraphics.com.au/sw/ - use the file format plugin to open and save versions of each of the three formats and then icobundle to combine them.

    Mike

    Stealth Fiction » Blog Archive » Green Park Theme Review said...

    [...] Now the default bright neon yellow Green Park color scheme is not for everyone. I had almost abandoned the idea of using the theme due to the colors. However, there is a very nice tutorial on customizing the color layout using either photoshop or gimp. This guide includes a css converter so that you wont have to manually edit code. It took roughly 10 minutes to convert the images and code to a slate blue. [...]

    Racheal said...

    Brilliant, I never thought I would be able to do it.

    Without your hard work I never would have done.

    Thanks

    daryl said...

    You should allow people to post their color combos after they have modified your theme. It would probally help alot for those that don't want to mess with Gimp. Not to mention that it is a bit time consuming to change colors.

    I like your blue myself and modified your theme to kinda the same color. I left some of the green in to give a bit of a shade...

    check it out at www.biker-events.com

    Loren said...

    How can i use the css converter to adjust my hue if i also adjusted saturation?

    snnicky said...

    Hello Loren,

    my css converter cannot do this for now.
    I didn't need that when I wrote the converter.

    But since there is somebody who needs this I'll add the ability to change saturation also.

    Thank you for the request.

    Charles said...

    I so wish I'd found this before I started doing things the hard way. I may well use this to fix the bits I haven't done yet. Kinda thinking about how to script re-coloring of graphics.

    slowbog said...

    I'm tinkering around with this whole process and I would first like to say that I have nearly zero technical ability. And yet I find myself able to do everything that is outlined here, which demands substantial credit to the author of this walk-through as well as whomever designed the original theme.

    I do have a question, and that is: I'm trying to get a maroon looking color, but I can't seem to get darker colors out of just the areas that used to be green. It simply goes from red to pink as I shift through the hue selections. Is there a way to darken up just the 'green' sections without darkening the whole page?

    Thanks again.

    bering said...

    The Saturation "problem" is giving me a headache also. I changed the hue, this 140 level is a wonderful blue color. Unfortunately I need my site to have a bit of financial-boring feel, so I adjusted the saturation for all the images, but the CSS stands out a bit. I tried adjusting the converted, but I am far away with my knowledge.

    I would however like to thank you snnicky and Andreas, this is THE only real look&feel pro wordpress template.

    snnicky said...

    Hello slowbog,

    for now my scripts do not provide an ability to make only "green" colors darker. This may be done only manually.

    BTW, what image editor do you use ?
    I'm trying to support GIMP and Photoshop. But they are different and I need to know what is more claimed.

    Thank you.

    snnicky said...

    Hello bering,

    if you use Photoshop you may shift the saturation and lightness now. Just follow the steps from "automated procedure" section.

    If you use GIMP then you may change the css manually.
    Not a quick and easy way but this is possible.
    I hope I'll create an automation script for GIMP in the foreseeable future,

    bering said...

    Hello snnicky,

    I use both, Photoshop and GIMP (for .ico). I think that I will have to edit the .css to change the saturation of this +140 hue sooner or later. But for now my website, which I finnaly got to put up, still looks pretty good. I think we should study rgb, hex, color calculating and. css, we really can't expect you to do all the work for us. Thanks.

    snnicky said...

    Hello bering,

    well, if you use Photoshop that's great.
    The script customize-cordobo-green-park-theme-photoshop-cs.zip I wrote for Photoshop not only automates the images modification.
    But applies hue, saturation and lightnes shifts to style.css also.

    So if you were so kind to test the scipt that could help me to mantain the script.
    And help other people to customize the theme easier.

    Thank you.
    Nick.

    bering said...

    Hi snnicky,
    thanks very much for the link to the Photoshop script. I am sorry to say that I tried it, but I only got an error message. I posted the screenshot below. I have a job interview comming up, so I will look further into this on thursday. BTW, i use Photoshop CS2.
    http://www.tehnicna-analiza.com/aaa/photoshop%20js%20error.jpg

    snnicky said...

    Hm...
    Looks like they changed a way to create dialog windows from JavaScript in CS2.

    Ok. Thanks for your help.
    I'll digger the Internet for CS2 documentation.

    slowbog said...

    Hey snnicky,

    I'm using GIMP.

    Thanks for the help.

    snnicky said...

    Hello bering,

    good news. I've fixed the automation script error with Photoshop CS2.

    Let me know if there are any problem still.

    Thanks.

    bering said...

    Hi snnicky,

    the new automation script works GREAT! Thank you. It's pure luxury, please, let me know how I can donate.

    Sorry for not getting back to you sooner, I had a busy week.

    Thanks.

    Cordobo said...

    Hi snnicky,

    my forthcoming release of Cordobo Green Park (0.93) will ship with an options page and 3-4 color schemes:

    - lime green (default)
    - light blue
    - dark red
    - dark gray

    With a single click the users will be able to change the look (and feel) of the template.

    Best regards,

    Andreas

    Michael Anker said...

    I have just tried the automation script
    customize-cordobo-green-park-theme-photoshop-cs.zip

    But I get a error message when i open it in my PhotoShop CS2 (Version 9)

    Error 19: Bad argument ...
    http://www.bibliotek.horsens.dk/error.jpg

    And last but not least. Thanks for a great design :-)

    With Kind Regards
    Michael

    snnicky said...

    Hello bering,

    I created that script just for the pleasure.
    Thank you for your positive report.

    The best donation would be some job offer :).
    If I can write some kind of program for you - just let me know :).

    The short list of my knowledges is listed on About page.
    I know I need to improve that page. But since you saw some samples already perhaps that is enough :).

    And of course you may write me a letter for clarification (email adress is in the script file header).

    Thank you :).

    snnicky said...

    Hello Andreas,

    your theme is the best and you continue to improve that!
    Thank you.

    Best regards,
    Nick

    snnicky said...

    Hello Michael,

    according to the error message you use the old version of the script. I didn't paste a good mark that script was fixed to work under Photoshop CS2.

    You need to re-load the script. Current version is "0.2 - 24 of October 2006. Fixed to work in Photoshop CS2."

    Thank you for your post.

    snnicky said...

    Hello Ms.U,

    I think you posted in a wrong thread. Thus I answer here.

    Ms.U original question:
    >I love the Cordoba Green theme, and I'm trying to figure out how to utilize thsi SNNicky GIMP thing (it's challenging to me, because I'm not that majorly code-savvy). I'm looking for anyone who might be able to help me change the hue of my site from the green to a crimson red color. That simple! (but somehow I can't master it :-( .....)

    >Please help!

    >Ms.U

    Right now there is only one way to utilize GIMP to do the conversion. Manually. (Of course somebody may some script to do that him/herself).

    Could you please clarify where you need the help ?
    Do you need more detailed manual conversion description ? Or do you need an automated utility (some script) to do the job ?

    I was going to create a script for GIMP. However there were no requests for that.


    Thanks.

    The Ken Puls Blog » Blog Archive » You have to love the internet said...

    [...] As you can see from reading the frame here, I use WordPress to power the blog.  I wasn’t really happy with the skin, though, so I took a browse through the Wordpress theme gallery, and found the Cordobo-Green-Park theme.  It was exactly what I wanted… only it was green.  I really liked the layout, but not the colour. And so here comes the power of the net.  I accidentally found this page, which happens to be all about adjusting this theme to use the exact colours I want! [...]

    snnicky said...

    Hello Ken,

    the next time you need to customize the Cordobo-Green-Park you may use the automation script for GIMP.
    I've just uploaded that.

    Good luck.

    Cordobo said...

    Hi Snnicky,

    Cordobo Green Park with color schemes support is almost out. Leave a comment to get your copy of Cordobo Green Park 0.93 Beta 1 via email (not yet available for download)

    Best regards,

    Andreas

    Krunchy said...

    Awesome walkthru thanks for the time and effort posting this

    Dave said...

    I too use cordoba. I am having trouble displaying google adsense ads. The one I want is 468 x 15 pixels but in some browsers/screen resolutions there is a big gap between the header and the google ad (and the 1st post). I believe this is because the central area of the page is not wide enough. Is there a way to make this area wider? Maybe by only 10 pixels or so?

    Regards,
    Dave

    Charles said...

    Anyone know of a drupal port of this?

    TechTraction » Blog Archive » Quick WordPress Template Color Adjustment said...

    [...] Slon posted an excellent Cordobo color changing tutorial over at his blog (SNNicky.com). Unfortunately, I didn’t find that post till [...]

    Diego said...

    Hi Snnicky, I'm using your js script to change your cordobo theme colors with Photoshop CS2 but after some work it gives me this error: Cannot open the file because the open options are incorrect. Line 440: app.open(image)
    Do you have any suggestions or a fix? Thanks in advance. Great theme!
    Diego
    www.eighthreeseven.com

    Morghus said...

    You sir, are a genious. First we get a bloody amazing template from Andreas, and then I dump into this one that does the only thing I felt it was missing. Thanks alot mate!

    Void Pointer » Blog Archive » Changing colors in Cordobo Green Park WordPress theme said...

    [...] fould this really simple way to change the theme colors from the fluorscent green to some thing else - that is what I use to get [...]

    Erik J. Heels » WordPress 2.2.1 To 2.2.3 said...

    [...] properly, so I opted for Cordoba Green Park. Except green is not my favorite color. I started customizing the Cordoba Green Park theme to use different colors using this tutorial when I realized that the newer version of Cordoba Green Park supports five [...]

    saphruser said...

    Hi its a wonderful theme, i have on my site but my search box doesnt seem to appear, what can i do to enable it?
    and if i want to change the color of page titles on home page how do i do that?

    thanks in advance

    seo技术精华与实践-陈迪 » Wordpress 上手指南(收藏) said...

    [...] Cordobo Green Park 主题,并在网友 pizzaxp 的帮助下做了修改,主体颜色是根据 Tutorial on how to change Cordobo Green Parks color scheme [...]

    saphruser said...

    Hi Snnicky,

    Thanks a lot for your time in providing the solution...but the above code exists as u said including
    still i dont see my search :(
    dunno why.
    also i am planning to use wp forum plugin for which the theme is too narrow. can you help me create a page without sidebars pls?
    only for forum page i want to use a page template without side bars. kindly advice.
    thanks again.

    Wild_Eep said...

    Hello,

    I would like to download the Photoshop automation script, but the link sends me to a page with cyrillic on it, rather than downloading a .zip file to my computer.

    snnicky said...

    Hello Wild_Eep,

    thank you for the feedback.

    I've fixed the links.
    Good luck.

    Please let me know if you need more features from the script.

    Leosirth said...

    Hi, i'm trying to use this great script (photoshop version) but when i try to open it i get an error saying "Error 19:Bad Argument:..." here is the screen-shoot if needed

    http://www.itcontent.it/wp-content/uploads/2008/02/script-error.jpg

    I'm using Photoshop CS3

    Thanks for any help and for the great work

    Madhu said...

    Hi, A couple of quick questions on this theme. I'm trying to use this theme for my new blog.

    1) Is the Calendar widget working for you? When I drop it in the left sidebar, the calendar does appear however the label "Calendar" does not show up in the green bar. What do we do to get the title correctly like other widget titles.

    2) How do you create custom widgets like "Donation", "Google Ads", etc using Wordpress control panel?

    Thanks for a prompt reply.

    snnicky said...

    Hello Leosirth.

    I do not support the Photoshop script any more.
    Please check the script available for download on Nice-Soft.blogspot.com.

    Thank you.

    Marco Ferreira said...

    my site doesnt show well in IE, im using green park and the first post gets huge, all other pages and posts are fine, any ideia how i fix the css?
    site is: www.fvrss.com