Digital Raindrops Colorizer

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area.

We have been looking at the $_SESSION variable, so we thought we would bring the functions of our popular Color Fun child theme to the front end, we wanted the visitor to be able to change the colors, preview the changes and grab the generated styles.

One of the things we found annoying with our child theme was no palette, so we have built in five palette colors, one click and they update the target color, when thinking about colors we added 100 posts with header images, if you view the post you will see a palette of over 120 colors generated from the header image.

You can read on or go and play, if you are still here then here is some information to get you started.


Here we can see the five palette colors, we added some defaults but they can be changed to whatever colors we want, when we update the page the palette colors in the other sections will update with the new colors



We have built in the Farbtastic color picker right into our page, we can change or just tweak the colors using the picker


Setting Colors

To set a new color we can either click on one of our palette colors, use the picker or type in a new Hexcode, here we have clicked the palette colors for the gradient start and end


Live Preview

A little quirk we have found with our code and the $_SESSION variable is that we have to press Preview Twice for our changes to take effect



we have generated the styles for our changes in the stylesheet section, this can be copied and saved by the visitor for later use.


Header Colors

We have added 100 posts with header images, these can be seen on the home page, we can use left and right keys to navigate, once we find a thumbnail that we like, we can look at the top 30 colors from the header image.


Click the thumbnail or title and we will find at the foot of the post the colors from the image, we can note the ones we like to use in our palette, with Darker, Lighter and a complementing color



We will be adding some more features to the colorizer later, dark theme options and a child theme stylesheet creator


We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions., therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.


Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

One thought on “Digital Raindrops Colorizer

  1. Thanks for posting your colorizer. I’ve been playing with it, and it has enabled me to colorize the navbar of the Twenty Eleven child theme I’m working on.

Leave a Reply


Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook

Related Posts

Posted in Blog

Read More

Posted in Tips


In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More