Displaying background colours in Choice drop downs.
This patch will detect a colour code like #88aabb in the HTML for name field of a Choice
and set the background colour of that choice to match.
CHANGE LOG
26-11-05 V1.01 Added code to display text in white if background colour too dark.
Major rewrite to minimise template changes.
16-08-05 V1.00 Initial Release
INSTALLATION
make file optioncoloursupport.js (in Site1) from the following
var threshold = 20; // level to switch text to white - range 0 -> 27
function endoption(ref){
var select = document.getElementById('sel-' + ref); // the SELECT statement
for ( var i = 0; i < select.options.length; i++)
{
var thisoption = select.options[i];
var bits = thisoption.text.match(/(.*)(#\w{6})(.*)/); // have we a #rrggbb
if ( bits != null )
{
var rgbs = bits[2].match(/(\d).(\d).(\d)./); // get most sig. rgb digits
if (rgbs != null)
{
if ( ((rgbs[1] - 0) + (rgbs[2] - 0) + (rgbs[3] - 0)) <= threshold ) thisoption.style.color = 'white';
}
thisoption.text = bits[1] + bits[3]; // remove the #rrggbb code
thisoption.style.backgroundColor = bits[2];
}
}
}
In Act_Primary.html (and all other Product Primary Templates) just above the line, add the line
Replace (back it up first) Act_VariantListHeader.html with the following
OPERATION
For any Choices that you want a background colour against simply
add #rrggbb (# followed by exactly 6 hex digits) to the Choices "HTML for Name" field.
Don't put this #rrggbb into the "Choice Name" field - only the "HTML for Name".
E.g.
Plover #88aabb
Black #000000
Deep #ff0000 Red
The text that overlays the coloured background will switch to white if a threshold is reached.
You can change the sensitivity of this by changing the line in optioncoloursupport.js
var threshold = 20; // level to switch text to white - range 0 (BLACK) -> 27 (LIGHTER)