![]() | ||||||||||
| ||||||||||
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
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"}
You can see an example and complete code here - The main style properties Example
With CodeThatXPBar you can specify various bullet images for the 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} }
You can see an example and complete code here - Bullet Images Example
You can define an items opacity (IE 5+):
"style": { "opacity":50 }
You can see an example and complete code here - Opacity Example Read more about CodeThatXPBar >>
|