Article Links:

Article Home
API
Look and Feel
Demo

Look and Feel

Just like any other widget I build, the XWeb Toolbar is highly customizable as far as look and feel is concerned. Through the power of CSS, all aspects on how this widget looks can be changed. There is no set way for the CSS file to be organized. It is entirely up to the user how to implement the desired style.

The examples in this document represent the styles of the demo. Let's take a look at them.

Toolbar Objects

Toolbar objects consist of the Toolbar and Toolbar item classes.

The Toolbar

The Toolbar is a DIV element and has one state: 

.cls-xweb-toolbar-bar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 24px;
	background-color: buttonface;
	border-right: 1px solid buttonshadow;
	z-index: 10;
	cursor: default;
}

Toolbar Items

Toolbar items are DIV elements and contain images and text. Toolbar items have three states that are determined by mouse events: 

.cls-xweb-toolbar-baritem {
	writing-mode: tb-rl;
	padding: 3px 2px 10px 2px;
	border: 1px solid buttonface;
	background-color: buttonface;
}

.cls-xweb-toolbar-baritem-over {
	writing-mode: tb-rl;
	padding: 3px 2px 10px 2px;
	border: 1px solid #316AC5;
	background-color: #C2D3EF;
}

.cls-xweb-toolbar-baritem-click {
	writing-mode: tb-rl;
	padding: 3px 2px 10px 2px;
	border: 1px solid #316AC5;
	background-color: #E8ECEF;
}
The images are used as icons, and each icon's style can be changed. As you can see here, I use the same style for all states: 
.cls-xweb-toolbar-baritem img, 
.cls-xweb-toolbar-baritem-over img, 
.cls-xweb-toolbar-baritem-click img {
	padding-top: 3px;
	padding-bottom: 8px;
}

Buttonbar Objects

The Buttonbar consits of the Buttonbar, Buttonbar Container, Button, and Arrow Button classes.

The Buttonbar

Like the Toolbar, the Buttonbar is a DIV element and has one state: 
.cls-xweb-toolbar-buttonbar {
	position: absolute;
	top: 0px;
	left: -80px;
	width: 100px;
	height: 100px;
	padding-top: 5px;
	background-color: #FFFFFE;
	border-right: 5px solid buttonface;
	z-index: 5;
	cursor: default;
	overflow: hidden;
}

The Buttonbar Container

The Buttonbar Container contains a Buttonbar's buttons. It is a DIV element and has one state: 
.cls-xweb-toolbar-buttonbar-container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}

The Button

The Button consists of an image and text. It has three states determined by mouse events: 
.cls-xweb-toolbar-button,
.cls-xweb-toolbar-button-over, 
.cls-xweb-toolbar-button-click {
	text-align: center;
	padding-bottom: 15px;
}
Like the Toolbar items above, the images in Buttons are used as icons, and their styles can be changed according to the state the Button is in: 
.cls-xweb-toolbar-button-icon {
	border: 1px solid white;;
	background-color: white;
}

.cls-xweb-toolbar-button-icon-over, 
.cls-xweb-toolbar-button-icon-click {
	border: 1px solid #316AC5;
	background-color: #C2D3EF;
}

The Arrow Button

The Arrow Button is a DIV element that contains an image (the arrow). The Arrow Button has one state: 
.cls-xweb-toolbar-buttonbar-arrowbutton {
	position: absolute;
	background-color: buttonface;
	border: 1px solid black;
	height: 13px;
	width: 98px;
	z-index: 11;
	visibility: hidden;
	text-align: center;
	padding-top: 2px;
}
The arrow of the Arrow Button also can be styled by using the following class: 
.cls-xweb-toolbar-buttonbar-arrowbutton-arrow {}