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