views:

148

answers:

2

I have a CF8 html cftree that when you select each cftreeitem it is given a blue background. I have experimented with adding styles to the form and that does not work. I have tried marking up the display= attribute of the cftreeitem and that half works (can control color but not vlink, visited, or text-decoration). The closest that I have been able to get is by adding text-decoration:none to a stylesheet and then using a <div> at the beginning of the display= attribute for the cftreeitem to call it. The problem with that is that it messes up the spacing and I can't use it on the top parent item or it adds an additional parent even though 'parent' correctly shows the 'value' and not 'display'. So I still have the blue background with the parent and funky spacing. Has anyone else used a different method to get rid of the blue background? Thanks much for any help.

Question Summary: has anyone written a cftree so that each cftreeitem does not have a blue background when selected? If so, how did you do it?

+1  A: 

On Coldfusion 8 if you look under your webroot in \CFIDE\scripts\ajax\package\cftree.js

on line 247 you will see: _23.style.backgroundColor="lightblue";

That is where it is finding the color, you can change it there or even experiment with commenting it out (worked on my test).

kevink
That is a thing of beauty! Thanks so much - works like a champ. I commented it out and get no background color. I can now get rid of the css hack that I put in place. Appreciate the help!
JS
Firebug's CSS Property inspector and the fact that "lightblue" is not very common in the *.js files helped. There probably is a better way to override the value (you will need to remember to persist the change when you migrate to Cf9).
kevink
A: 

I would recommend against editing the core JavaScript and CSS; and instead recommend overriding it. Are you familiar with CSS' "!important" directive? If not, this is a decent place to read up on it.

You didn't post any code, but let's assume your CFTreeItem's have class="cftreeitem" or you can otherwise determine the selector you should use to specify the elements you want to style (FireBug is great for this, by the way). To override the lightblue color, do this in your application's css, somewhere:

.cftreeitem a:link, .cftreeitem a:active, .cftreeitem a:visited, {
    background-color: none !important;
}

Using "!important" should override all other rules, even those that would override this one, as long as they don't also include "!important"

Adam Tuttle