Many of the Kolakube skins in the gallery all have one thing in common — a color switcher. I try to design all of the color schemes the best I can, but sometimes a certain color scheme doesn’t work for a specific site’s need.
As of today, there are 4 different colors to a skin: red, blue, orange and green. I plan on adding more in the future, but what about those of you who don’t want to wait for me to do that?
It’s come up quite a bit over at the forums: “Alex, how can I add more colors to my skin?” After such popular demand, I have decided to kickoff the launch of the Tut Kiosk with a detailed tutorial on how to create custom color schemes.
If you guys want, I can also write a tutorial for custom color schemes for any Thesis installation. Let me know in the comments.
First Off … How the Color Picker Works
The way the color picker works is like this: you choose what color you want to display on your site and save your options. After you save the options, the CSS file with the old color will be overwritten by a new CSS file with the color you chose, thus changing how your site looks.
So when you break it down, all we are doing is switching from one CSS file to another. Simple, right?
What You Need to Get Started
- A skin enabled with the Kolakube Options Panel and color options.
- Access to your custom folder via FTP + a text editor.
- Image editor (preferably Photoshop)
1. Create the newly colored images
First off, you need to create the images with the colors you want in your layout. So, if you want to turn Marketers Delight dark blue, then open up the PSD file in Photoshop and change the color.
I have made a quick video of me using the Hue/Saturation tool to easily adjust the colors of the entire layout.
Once you have everything colored, go ahead and crop the images and save them to your computer. We will go back to them later and upload the images folder shortly.
2. Adding Color Choices to the Admin Options
Let’s get the coding parts out of the way. The great thing about adding a new color to to the color switcher is that it’s only a matter of copying and pasting new options.
So, in other words: this will be a breeze.
First, let’s add a new color to the standard color picker. Open up
/custom/admin/skin_options.php into your text editor and search for this line (usually at the very top of the file):
[php]”options” => array(“Red [Default]”, “Orange”, “Blue”, “Green”),[/php]
Now, all you have to do is add a color to the list. Make sure you wrap the new color in “quotes” and separate each entry with a comma. Like so:
[php]”options” => array(“Red [Default]”, “Orange”, “Blue”, “Green”, “MY NEW COLOR”),[/php]
skin_options.php, and make sure the new color is in the color picker. But don’t close the file, still one more thing to do.
3. Adding Color Styles to Your Blog
Scroll down a little in
skin_options.php and find the function extra_css. Inside of that function are a bunch of
case statements. These are the lines of code that determine which color will show on your blog when called by the admin options.
After the last case statement, you need to create a new one. So paste this line of code in:
case “MY NEW COLOR”: ?>
<link media="screen, projection" type="text/css" href="/custom/colors/dark-blue.css” rel=”stylesheet” />
IMPORTANT: The case title must be the same name as the option you created in Step 2. So, I would rename this case “MY NEW COLOR”.
What this code does is switches the CSS file after the admin options are saved. So, when you return to your blog, the new CSS file with the different color styles in it will show up and your blog will be a different color.
Now, let’s create the color files.
4. Creating the Color Files
The coding part is done! Congratulations. Now we just need to setup a few things in our file directory and we are done.
Go to the
custom folder in your FTP program and go into the images folder. Inside of that folder, you should see other folders entitled “green” or “blue” and so on. These are where separate colored images will go, separated from the other theme images.
So, go ahead and create a new folder in the images folder titled whatever color you want.
Now, you need to upload the images you made in Step 1 into this folder.
Repeat for CSS
Go back to the custom folder and look for the folder titled colors. This is where you will need to create the CSS files for each color scheme and code in your colored images.
- Open up a premade color, such as
- Copy its contents over to your new colored CSS file.
- Replace the image paths from the green to the new colored images you made.
- Just save, upload and test your new color.
Recolor Your Site and Show it Off!
If you followed the steps correctly, you should be able to use your new color scheme on your blog. If you did in fact add a new color scheme and are using it on a live Thesis installation, share it here! I always love seeing what you guys do with Kolakube skins.