User Manual
Samples

Introduction    Style customize    Bar position    Items' actions

HTML code as items' text    XPBar from the database

Change XPBar Behaviour    Standard vs PRO

On-line Builder

PRO

STD

123Guide   

Order PRO Now    FAQ

CODETHATXPBAR USER MANUAL

Style Customize

CodeThatXPBar allows you to customize style for whole submenus and individual items. Different styles can be assigned to ordinary items and for items that are under mouse cursor.

Style specified in the topmost bar describes the default style for the whole bar and all bar's items.

When the style attribute is specified in the item's description or submenu description, it overrides the style of the parent.

To specify style for a bar and bar's items, use the "style" property, as is shown at folowing construction:

"style"	 : {
	"css" : "",
	"size" : [width, height],
	"align" : "",
	"color" : "",
	"bgimg" : "",
	"bgcolor" : "",
	"shadow" : {
		"color", "width"
	}
	"border" : {
		"color", "width"
	}
	"imgitem" : "",
	"imgdir" : "",
	"imgdiropen" : "",
	"imgendon" : "",
	"imgendoff" : "",
	"z" : "",
	"opacity" :
}

where

css	 : string				 : CSS class
size	 : [width, height]		 : item width/height
align	 : string				 : text alignment (left/right/center/middle)
color	 : string				 : color string for the text
bgimg	 : string				 : url of the background image
bgcolor	 : string				 : color string
shadow	 : {
	"color" : string, "width" : int
}
 : shadow parameters
border	 : {
	"color" : string, "width" : int
}
 : border parameters
imgitem	 : {
	"src" : string,
	"width" : int, "height" : int
}
 : bullet image for non - submenu (bar) or
plain (tree) items or default bullet for
a menu item
imgdir	 : {
	"src" : string,
	"width" : int, "height" : int
}
 : bullet image for submenu items
imgdiropen : {
	"src" : string,
	"width" : int, "height" : int
}
 : bullet image for open submenu with items
imgendon : {
	"src" : string,
	"width" : int, "height" : int
}
 : end item bullet when in "on" or "opened" state
imgendoff : {
	"src" : string,
	"width" : int, "height" : int
}
 : end item bullet when in "off" or "closed" state
z	 : int				 : z - index
opacity	 : int				 : opacity

The Main Style Properties - Borders and Shadows, Itemover, Css, Scrollers and Backgrounds

CodeThatXPBar allows you to specify borders and shadows for your bars. For this purpose you should specify border/shadow like it shown at the example:

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

To customize style for items under mouse cursor you may use code like following:

"itemover" : {
	"css" : "test1", "bgcolor" : "#458EEE", "align" : "middle",
	"color" : "white"
}

You can use CSS to set certain properties for your bar:

"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.

.test1
{
	FONT - SIZE : 8pt;
	FONT - FAMILY : Verdana, Arial;
	TEXT - ALIGN : justify;
	FONT - WEIGHT : bolder;
	MARGIN - LEFT : 5px;
	MARGIN - RIGHT : 5px
}

You may want to cancel border/shadow that was defined for bar at whole, for a certain menu item or submenu.

"style" : {
	"border" : "",
	"shadow" : ""
}

You have a posibility to determine scrollers for your XPBar. For example:

"style" : {
	...
},
"scroller" : {
	"style" : {
		...
	},
	"styleover" : {
		...
	},
	"up" : url, "down" : url,
	"height" : int, 		//scroller's height
	"step" : int, 		//step to scroll by
	"time" : int, 		//pause in milliseconds
	"len" : int, //length in pixels to scroll
	"offset" : int //if scroller size smaller
	//that bar size set margin from the left side
}
 : describes the scrollers set

You can use various colors for items' background and even specify background image.

"style" : {
	"bgcolor" : "#669002"
}
"style" : {
	"bgimg" : "img/grass.gif"
}

Example - The main style properties

You can see an example and complete code here - The main style properties Example

Bullet Images

With CodeThatXPBar you can specify various bullet images for the items:

bullet image for non-submenu (bar) or plain (tree) items or default bullet for a menu item

bullet image for submenu items

bullet image for open submenu with items

end item bullet when in "on" or "opened" state

"style" : {
	"imgitem" : {
		"src" : "img/bul.gif", "width" : 16, "height" : 16
	},
	"imgdir" : {
		"src" : "img/dir.gif", "width" : 16, "height" : 16
	},
	"imgendon" : {
		"src" : "img/arr_down.gif", "width" : 16, "height" : 16
	},
	"imgendoff" : {
		"src" : "img/arr_right.gif", "width" : 16, "height" : 16
	}
}

Example - Bullet Images

You can see an example and complete code here - Bullet Images Example

Opacity

You can define an items opacity (IE 5+):

"style" :
{
	"opacity" : 50
}

Example - Opacity

You can see an example and complete code here - Opacity Example

Read more about CodeThatXPBar >>

© CodeThat.com, 2003-2005
Design by XTLabs, Inc.