Tab Look

With CodeThatTab you can customize style for the whole tab control and individual tabs.

A tab may have different style in normal state, current state and in mouse over state.

If a tab has no specified normal style or current or mouse over style it inherits the style from the tab control.

Width and height parameters define the size of tab. You may not set these parameters, by default width is 100 px and height is 20px.

To specify look for tab control and tabs, use the "css", "csscurr", "cssover", "csshint" and "border" properties, as follows:

"border" : {
	"width" : int, "color" : String
},
"css" 	 : String,
"cssover" : String,
"csscurr" : String,
"csshint" : String,
"width" : int
"height" : int

where

border { width, color } - border parameters
css 	 - css class for normal state
csscurr 	 - css class for current state
ccsover 	 - css class for mouse over state
csshint	 - css class for hint
width 	 - width of tab
height 	 - height of tab

CSS, CSScurr, CSSover, CSShint

Css, csscurr, cssover, csshint parameters let you define CSS classes for a tab control or separate tab. For example:

{
	"css" 	 : "def",
	"cssover" : "over",
	"csscurr" : "curr",
	"csshint" : "hint",
	...
}

where "def", "over", "curr", "hint" are names of css-style that can be described in a separate css-file or in the html file.

.over{
	color : #000080;
	background-color : #ffffcc;
	font-family : Verdana;
	font-size : 12px;
}
.def{
	color : #ff0000;
	background-color : #ffffff;
	font-family : Verdana;
	font-size : 12px;
}
.curr{
	color : #000000;
	background-color : #ffffee;
	font-family : Verdana;
	font-size : 12px;
}

Note: If you don't set "csshint" parameter "csscurr" will be used as "csshint".

Example - css, csscurr, cssover, csshint

You can see an example and complete code here - Css, csscurr, cssover, csshint Example [popup]

Border, Width and Height

Border, width and height of a tab can be controled by corresponding parameters border, width, height. For example:

"border" : {
	"width" : 1, color : "#000000"
}
"width" : 120,
"height" : 25

If you wish use background-image CSS parameter for tabs you need use border only for page with hint but not for tabs.

In this case use property borderonlyhint, set it in true. This property can be set only for whole tab control.

"borderonlyhint" : 1

Example - border, width and height

You can see an example and complete code here - Border, width, height Example [popup]

Layout and Align

Layout parameter controls position of tabset within tab control.

Possible values for layout are left, top, right and bottom.

You can define layout as follows:

"layout" : "top"

Align parameter defines align text within tab. This parameter can be used only for whole tab control.

Possible values for align are left, center and right.

You can define align as follows:

"align" : "left"

Example - layout and align

You can see an example and complete code here - Layout and align Example [popup]

Read more about CodeThatTab >>