2
#1
Example 11: Color-picker for forumotion editors (all boards)
Posted July 24th 2011, 12:06am
If you use boards outside of forumotion, you have noticed that the color choices in the forumotion editors are deficient at best. A couple years ago, an individual with the screen name of jalokim found a way to add color choices to the editor. I had developed a color-picker several years ago for general purpose use, but it wasn't compatible with forumotion editors. I combined the two ideas, and 18 months ago, a color-picker appeared on the original Ego-One board. I removed the color-picker from Ego-One when jalokim turned over the board to someone else.

A modified version of that color-picker is in use in the text editors on this board. And now, it can be yours to use as well!

Installation is easy. Create a Javascript File, select the In all the pages option, paste in the following script, and save the file.

var CopyrightNotice = 'Color-picker for forumotion text editors. Copyright © 2005-2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
$(function() {
if (document.getElementById('color')) {
var colors=new Array('00','33','66','99','CC','FF');
var x='<div id="colorpicker"><table cellspacing="0" id="grid">';
var y=x;
for (i = 5; i >= 0; i--) {
x=x+'<tr>';
y=y+'<tr>';
for (j = 5; j >= 0; j--) {
for (k= 5; k >= 0; k--) {
var col = colors[j]+colors[i]+colors[k];
x=x+'<td style="background: #'+col+';"><button style="background:#'+col+';" title="#'+col+'" onmouseover="this.className=\'selectHover\';" onmouseout="this.className=\'\';" onclick="bbfontstyle(\'[color=#'+col+']\', \'[/color]\');selectWysiwyg(this, \'color\');return false;"></button></td>';
y=y+'<td style="background: #'+col+';"><button style="background:#'+col+';" id="text_editor_cmd_constructBBcode_select_color_#'+col+'"></button></td>';
}
}
x=x+'</tr>';
y=y+'</tr>';
}
document.getElementById('color').innerHTML=x+'</table></div>';
document.getElementById('wcolor').innerHTML=y+'</table></div>';
}
});

Now add the following to your system CSS:

#color, #wcolor {overflow: visible;}
#colorpicker {position: absolute; top: 20px; left: -225px;}
#grid {border: 1px solid #808080;}
#grid td {padding: 0px;}
#grid td button {height: 12px; width: 12px; padding: 0px; border: 1px solid #808080;}
#grid td button:hover {border: 1px solid #ffffff;}

And that's it! This script is simple, yet extremely powerful. If you are serious about learning javascript, this is a good example of its power. Please ask me in a reply if there is something you don't understand and would like explained.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 11: Color-picker for forumotion editors (all boards)
Posted August 9th 2011, 6:13pm
This is very awesome. :)
φ
Posts: 21
Joined: August 6th 2011, 11:00pm
Location: Tennessee
Example 11: Color-picker for forumotion editors (all boards)
Posted October 9th 2011, 12:28pm
Nice tutorial. :)
φ
Posts:
Avatar
Guest
Example 11: Color-picker for forumotion editors (all boards)
Posted December 1st 2011, 5:41pm
Thanks !

Works very Good :D
φ
Posts: 15
Joined: September 22nd 2011, 11:00pm
Location: Yoshi's Island
Example 11: Color-picker for forumotion editors (all boards)
Posted December 1st 2011, 6:43pm
Agreed! It does. :) Thank you!
φ
Posts:
Avatar
Guest

Who is online

Users browsing this forum: No registered users and 1 guest