How to Create Custom Color Schemes for Your Kolakube Skin

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.

Creating Custom Colors

We will add a new color choice to the Color Picker.

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]

Save 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:

[php]
case “MY NEW COLOR”: ?>
<link media="screen, projection" type="text/css" href="/custom/colors/dark-blue.css” rel=”stylesheet” />
<?php break;
[/php]

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.

File View

Create a new folder in the "images" folder with your new color.

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.

The best way to add new colors to skins like Marketers Delight or Nexis Premium (that have colors built-in) is to follow these steps:

  1. Open up a premade color, such as green.css
  2. Copy its contents over to your new colored CSS file.
  3. Replace the image paths from the green to the new colored images you made.
  4. 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.

4 comments add yours

  1. This is a great post Alex. I have one quick question.
    I have a wordpress locally install on my laptop. follow the instruction exactly to install the skin. However, I notice I needed to change the permission for the cache folder and lay.css file
    Do i have to upload these two item to my hosting account then download the file and folder with the needed permission so I can tweak the layout locally before going live?

    • Hey Jaime,

      You can delete the original custom folder in Thesis, then upload the one you get in our download. Does this answer your question?

      • yes Alex I have done the replacing of the Custom folder from thesis, with the Custom folder from the Blogussion skin. However the permission still needed to be change to allow customation of lay.css file and the cache folder.

        I wanted to know If I change the 705 to 777 and 604 to 666 Locally on my own machine without going to the webhost, for the Cache folder and Layout.css file?

Leave a Comment