I’ve worked on a website color scheme editor recently. The main idea was to change the colors and banner of a website. The target website was my recent work with my department’s website.

Well…. There are a lot of color scheme editor available on the web, but I tried something different. I wanted to give the complete control to the administrator. But, uff…. It was really tough.

Main things I had to do was

• To select a suitable color picker.
• Then identify the areas the colors should be changed.
• Store the color information.
• Generate the CSS file according to the changes.

First problem I faced was to generate the CSS according to the changes. I tried to integrate PHP inside CSS file (!!!). A foolish idea. Then the idea I found is like creating a new CSS each time administrator changes the style, and store the changes to the database.

As I’m storing the information to the database as well, its also possible to rollback to a previous style.

Then the next problem comes – color picker. I was not in a mood to create a color picker by myself. After spending a good amount time in Google, I found the MooRainbow color picker, which is based on Mootools. It was nice and I’m happy too. Cz, I like Mootools library!!

There was another problem, I have to convert the Hex value to RGB for this purpose. Mootools helped me here once again. There is a very useful function hexToRgb() which helped me out.

You can find the way to implement moo rainbow at its own website.

As I had to provide edit ability to almost 70 sections of the website, the form was huge. So there were a need to use something like Accordion. But size was also a factor. Then I found a simple script which solved the problem and provided almost accordion like feature. I divided the form in 11 sections and implemented the function.

Here is the JavaScript code segment. I found the idea of this function from a web site but forgot form where. Whoever the main coder is, many thanks to you… 🙂


function shoh(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
if (document.getElementById(id).style.display == "none"){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
} else {
if (document.layers) {
if (document.id.display == "none"){
document.id.display = 'block';
} else {
document.id.display = 'none';
}
} else {
if (document.all.id.style.visibility == "none"){
document.all.id.style.display = 'block';
} else {
document.all.id.style.display = 'none';
}
}
}
}
window.addEvent('domready', function(){
shoh('fs1');
shoh('fs2');
shoh('fs3');
shoh('fs4');
shoh('fs5');
shoh('fs6');
shoh('fs7');
shoh('fs8');
shoh('fs9');
shoh('fs10');
shoh('fs11');
shoh('fs1');
});

For security reasons I can’t give the link here but providing a screen shot of the editor is here. This also have some IE issues (!) and needs debugging.