Item Look

With CodeThatTree you can customize style for the whole tree and individual items. An item may have different style in normal state and in mouse over state.

If an item has no specified normal style or mouse over style it inherits the style from the parent item. For example you can define styles at topmost level and all elements in the tree will use these styles. If a style attribute is specified in the item's description or submenu description, it overrides the parent's style.

To specify style for menu and menu items, use the "style" property, as follows:

"style"	 : {
	"css" : "",
	"csscurr" : "",
	"cssopen" : "",
	"color" : "",
	"colorcurr" : "",
	"coloropen" : "",
	"bgimg" : "",
	"bgimgcurr" : "",
	"bgimgopen" : "",
	"bgcolor" : "",
	"bgcolorcurr" : "",
	"bgcoloropen" : "",
	"shadow" : {
		"color", "width"
	}
	"border" : {
		"color", "width"
	}
	"imgitem" : "",
	"imgdir" : "",
	"imgdiropen" : "",
	"z" : ""
	"itemoffset" : {
		"x" : n, "y" : n
	}
}

where

css         : string                               : CSS class
csscurr       : string                            : color string for the text when node is current
cssopen       : string                           : color string for the text when node is opened folder
color       : string                               : color string for the text 
colorcurr       : string                        : color string for the text when node is current
coloropen       : string                       : color string for the text when node is opened folder
bgimg       : string                              : url of the background image
bgimgopen       : string                      : url of the background image when node is current
bgimgcurr       : string                       : url of the background image when node is opened folder
bgcolor     : string                            : color string
bgcolorcurr     : string                     : color string when node is current
bgcoloropen     : string                     : color string when node is opened folder
shadow      : { "color" : string, "width" : int }  : shadow parameters
border      : { "color" : string, "width" : int }  : border parameters
imgitem     : string                               : url of the image for a tree leaf
imgdir      : string                               : url of the image for a closed tree node
imgdiropen  : string                               : url of the image for an open tree node
z           : int                                  : z - index
itemoffset  : { "x" : int, "y" : int }             : offset for item positioning

Please note this structure is used for noraml style and for mouseover style as well. To define mouseover style use 'styleover' parameter.

Node Images

You can set any node images. Parameter imgitem is used for single tree leafs. If an item has subitems it uses the image from imgdir parameter (or from imgdiropen in open state). For example:

"style" :
{
	"imgitem" : "img/ats.gif",
	"imgdir" : "img/atg.gif",
	"imgdiropen" : "img/ato.gif"
}

Example - Node Images

You can see an example and complete code here - Node Images Example [popup]

CSS, Color, Background Image, Background Color

The css parameter lets you define a CCS class for a tree item. For example:

"style"	 : {
	"css" : "test1"
}

where "test1" is a name of css-style that can be described in a separate css-file or in the html file.

.clsCoolNode {
	color : #2c3c72;
	font-size : 11px;
	text-decoration : none;
	font-family : Arial, Helvetica, sans-serif;
	white-space : nowrap
}

Color, background image, and background color of a tree item can be controled by corresponding parameters color, bgimg, bgcolor. For example:

"style" :
{
	"bgimg" : "img/bg.gif",
	"color" : "#0000FF"
}

or

"style" :
{
	"color" : "#FF0000",
	"bgcolor" : "#FFFFFF"
}

Please note, these parameters (color, bgimg, bgcolor) can be defined in a css file as well as in the tree configuration. If they are defined in both places then parameters from the configuration are used.

Example - css, color, background color and background image

You can see an example and complete code here - Css, color, background color and background image Example [popup]

Border and Shadow

Border and shadow are added for compatibility with CodeThatTree. The parameters can be used like this

"style" :
{
	"border" : {
		"color" : "#003882", "width" : 1
	},
	"shadow" : {
		"color" : "gray", "width" : 2
	}
}

Example - Borders and Shadow

You can see an example and complete code here - Borders and Shadow Example [popup]

Read more about CodeThatTree >>

Additional style parameters ^new

You can set different parameters for nodes in different state: normal, current and opened if node is folder. The parameters can be used like this

"style" :
{
	"color" : "yellow",
	"coloropen" : "white",
	"colorcurr" : "black",
	"bgcolor" : "blue",
	"bgcoloropen" : "black",
	"bgcolorcurr" : "white"
}

Example - Additional style parameters

You can see an example and complete code here - Additional style parameters - Example [popup]

Read more about CodeThatTree >>

© CodeThat.com, 2003-2010
Design by XTLabs, Inc
Sponsored by Rocket Division Software, LTD.