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.
- Download cordobo-green-park and unpack it to appropriate folder (<WordPress>/wp-content/themes).
- Log into your WordPress as admin and activate "Cordobo Green Park" theme
- View your site. Create a screen-shot (Alt+Print Screen). You'll get something like the following:
- Run GIMP. (GIMP supports many languages. I'll mention English menu names.)
- Create a new image: [main GIMP menu] --> [File] --> [Acquire] --> [From Clipboard].
- In a new window with your screen-shot navigate to [main menu] --> [Tools] --> [Color Tools] --> [Hue-Saturation...].
- 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.
- 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). - 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:
- 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").
- Switch mode to "RGB": Click [main menu] --> [Image] --> [Mode] --> [RGB]. (window title becomes "*chungo_logo_headerbar_green.png-6.0 (RGB, 1 layer) 2400x47").
- Specify the desired hue shift using [main menu] --> [Tools] --> [Color Tools] --> [Hue-Saturation...] dialog.
- Switch back to indexed mode: [main menu] --> [Image] --> [Mode] --> [Indexed].
- In "Indexed Color Conversion" dialog specify "Generate optimum palette", "Maximum number of colors"=256, "Color dithering"=None, "Enable dithering of transparency"=false.
- Save the image.
- Edit favicon.ico image:
- Open the image in GIMP. Pay attention that the image is opened in "RGB" mode.
- Pay attention that there are three layers. ([main menu] --> [Dialogs] --> [Layers]).
- Shift hue on a desired value for each of the layers.
- 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.
- Edit png or gif image:
- 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:
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.
- Download SNNicky.com-customize-cgp.zip
- Unpack the script to some location.
- Open the script in some text editor to read the instructions.
- Follow the instructions.
- A way to modify style.css for a hue shift is described above.
- Download customize-cordobo-green-park-theme-photoshop-cs.zip
- Unpack the script to some location.
- Open the script in some text editor to read the instructions.
- Follow the instructions.
I'm going to maintain this post (correct typos, improve description, ...)
Your comments are welcome.
2 of December 2006
Revisions history:
1.8:
1.7:
1.6:
1.5:
1.4:
