Customize cordobo-green-park theme

Posted on September 19th, 2006 in WP Themes by snnicky

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.

    • 51 Responses to 'Customize cordobo-green-park theme'

    Subscribe to comments with RSS or TrackBack to 'Customize cordobo-green-park theme'.

    1. Cordobo said,

      on October 2nd, 2006 at 12:49 pm

      Hi snnicky,

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

      Best regards from Germany,

      Andreas

    2. Cordobo said,

      on October 2nd, 2006 at 12:52 pm

      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

    3. snnicky said,

      on October 2nd, 2006 at 9:23 pm

      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.

    4. Cordobo said,

      on October 2nd, 2006 at 10:28 pm

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

      Thanks ;)

    5. Mike said,

      on October 4th, 2006 at 4:49 pm

      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

    6. snnicky said,

      on October 5th, 2006 at 11:32 pm

      Hello Mike,

      thank you for the advice.
      I’ll try the plugin (looks like it’s free).

      The GIMP supports *.ico files.
      And GIMP is free and open source (I compare to Photoshop).

      Thanks.

      Nick

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

      on October 7th, 2006 at 10:11 am

      […] 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. […]

    8. Racheal said,

      on October 12th, 2006 at 10:49 pm

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

      Without your hard work I never would have done.

      Thanks

    9. daryl said,

      on October 12th, 2006 at 10:57 pm

      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

    10. Loren said,

      on October 13th, 2006 at 6:21 am

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

    11. snnicky said,

      on October 13th, 2006 at 3:59 pm

      Hello daryl,

      Thank you for your post.

      First of all I have to make a note that this is not my theme.
      The author is Andreas. And original theme is available on cordobo-green-park.
      The original theme was published under GPL. Thus as far as I understand all modified themes should be distributed under GPL also.

    12. snnicky said,

      on October 13th, 2006 at 4:06 pm

      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.

    13. Charles said,

      on October 18th, 2006 at 7:29 pm

      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.

    14. slowbog said,

      on October 19th, 2006 at 10:57 pm

      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.

    15. bering said,

      on October 20th, 2006 at 8:48 pm

      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.

    16. snnicky said,

      on October 21st, 2006 at 10:27 pm

      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.

    17. snnicky said,

      on October 21st, 2006 at 10:33 pm

      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,

    18. bering said,

      on October 23rd, 2006 at 1:16 pm

      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.

    19. snnicky said,

      on October 23rd, 2006 at 7:39 pm

      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.

    20. bering said,

      on October 23rd, 2006 at 8:45 pm

      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

    21. snnicky said,

      on October 23rd, 2006 at 11:03 pm

      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.

    22. slowbog said,

      on October 24th, 2006 at 12:18 am

      Hey snnicky,

      I’m using GIMP.

      Thanks for the help.

    23. snnicky said,

      on October 24th, 2006 at 11:46 pm

      Hello bering,

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

      Let me know if there are any problem still.

      Thanks.

    24. bering said,

      on October 27th, 2006 at 9:59 am

      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.

    25. Cordobo said,

      on October 30th, 2006 at 4:59 pm

      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

    26. Michael Anker said,

      on November 3rd, 2006 at 2:25 pm

      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

    27. snnicky said,

      on November 5th, 2006 at 1:09 am

      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 :).

    28. snnicky said,

      on November 5th, 2006 at 1:11 am

      Hello Andreas,

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

      Best regards,
      Nick

    29. snnicky said,

      on November 5th, 2006 at 1:14 am

      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.

    30. snnicky said,

      on November 22nd, 2006 at 11:28 pm

      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.

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

      on December 2nd, 2006 at 8:48 am

      […] 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! […]

    32. snnicky said,

      on December 2nd, 2006 at 10:05 pm

      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.

    33. Cordobo said,

      on December 12th, 2006 at 4:12 pm

      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

    34. Krunchy said,

      on January 15th, 2007 at 6:12 am

      Awesome walkthru thanks for the time and effort posting this

    35. Dave said,

      on January 31st, 2007 at 12:20 am

      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

    36. Charles said,

      on March 12th, 2007 at 6:23 am

      Anyone know of a drupal port of this?

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

      on March 12th, 2007 at 7:09 pm

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

    38. Diego said,

      on March 16th, 2007 at 6:48 pm

      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

    39. Morghus said,

      on May 22nd, 2007 at 4:33 pm

      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!

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

      on June 12th, 2007 at 7:05 am

      […] 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 […]

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

      on September 12th, 2007 at 5:31 pm

      […] 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 […]

    42. saphruser said,

      on October 23rd, 2007 at 11:46 pm

      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

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

      on October 24th, 2007 at 5:17 pm

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

    44. snnicky said,

      on October 27th, 2007 at 7:29 am

      Hello saphruser.

      I checked your page. First of all I have to note that we use a bit different versions of the themes.
      You use “Green Park Theme 0.9.2 Beta 12 by Cordobo” and I use “Green Park Theme 0.9.3 Beta 4 by Cordobo”.

      Anyway I believe the version are not different drastically.

      Please navigate to the theme folder in your favorite file manager.
      This may be <site-name>\wp-content\themes\cordobo-green-park\ .



      Find and open on text editor file searchform.php.
      That should contain something like the following:

      <li><h2><?php _e('Search'); ?></h2>
	<div id="search">
		<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
			<input class="searchfield" type="text" name="s" id="s" value="" title="Enter keyword to search" />
			<input name="sbutt" type="submit" value="Find" alt="Submit" class="searchsubmit" />
		</form>
	</div>
</li>

      This is content to show in a proper place.



      Search for files containing text “searchform.php” in the same folder.
      There should be file sidebar.php found. And that should contain something like the following:

      
<?php include (TEMPLATEPATH . '/searchform.php'); ?>

      I hope this answers your first question regarding to search box.
      Let’s switch to the next. Edit file style.css (this is wp-content/themes/cordobo-green-park-09-beta-09/cordobo-green-park-09-beta-09/style.css in your case).
      Modify “#navlist a:link, #navlist a:visited” style the following way:

      1. was: 
        #navlist a:link, #navlist a:visited {
	text-decoration: none;
}
      2. become: 
        #navlist a:link, #navlist a:visited {
	text-decoration: none;
	color: #ff0000;
}


      Good luck.

    45. saphruser said,

      on October 27th, 2007 at 7:54 pm

      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.

    46. Wild_Eep said,

      on January 16th, 2008 at 7:22 pm

      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.

    47. snnicky said,

      on January 17th, 2008 at 9:08 pm

      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.

    48. Leosirth said,

      on February 16th, 2008 at 2:05 pm

      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

    49. Madhu said,

      on March 22nd, 2008 at 3:24 pm

      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.

    50. snnicky said,

      on April 8th, 2008 at 9:57 pm

      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.

    51. Marco Ferreira said,

      on June 1st, 2008 at 11:16 pm

      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

    Post a comment