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.
Palette
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
Farbtastic
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
Stylesheet
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
Later
We will be adding some more features to the colorizer later, dark theme options and a child theme stylesheet creator
Notices
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, www.DigitalRaindrops.net 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 http://DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, 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.
Membership
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.
