When you add list items to C1ToolBar you can style all of the list items or each list item using its CSS selectors. In each type of toolbar item there are additional classes based on the state of the item. These include the following for the C1ToolBarListItem element: .c1tbListItem-Hover, .c1tbListItem-Focus, .c1tbListItem-Selected, and .c1tbListItem-Selected-Hover. The following table describes the different CSS selectors used to style the C1ToolBarListItem element.
|
CSS Selector |
Property Value Example |
Description |
|
.C1ToolBar_ArcticFox .C1tbListItem-Hover .C1tbContainer, .C1ToolBar_ArcticFox .C1tbListItem-Focus .C1tbContainer |
{ background: transparent url( 'Images/ToolbarItemHoverBL.gif' ) no-repeat left bottom; } |
Applies the style to the hover and focus state of the list items of the container in the C1ToolBarListItem. |
|
.C1ToolBar_ArcticFox .C1tbNoRoundedCorner .C1tbListItem-Hover .C1tbContainer, .C1ToolBar_ArcticFox .C1tbNoRoundedCorner .C1tbListItem-Focus .C1tbContainer |
{ background: url( 'Images/NestedBgHover.png' ) repeat-x center center; border: solid 1px #d7d0b3; } |
Applies the style to the hover and focus state of the list items without the rounded corner in the C1ToolBarListItem. |
|
.C1ToolBar_ArcticFox .C1tbListItem-Hover .C1tbOuter, .C1ToolBar_ArcticFox .C1tbListItem-Focus .C1tbOuter |
{ background: transparent url( 'Images/ToolbarItemHoverTR.gif' ) no-repeat right top; } |
Applies the style to the hover and focus state of the outer list items in the C1ToolBarListItem. |
|
.C1ToolBar_ArcticFox .C1tbListItem-Hover .C1tbInner, .C1ToolBar_ArcticFox .C1tbListItem-Focus .C1tbInner |
{ background: transparent url( 'Images/ToolbarItemHoverTL.gif' ) no-repeat left top; } |
Applies the style to the hover and focus state of the inner list items in the C1ToolBarListItem. |
|
.C1ToolBar_ArcticFox .C1tbListItem-Hover .C1tbContent, .C1ToolBar_ArcticFox .C1tbListItem-Focus .C1tbContent |
{ background: transparent url( 'Images/ToolbarItemHover.gif' ) no-repeat right bottom; } |
Applies the style to the hover and focus state of the content items in the list. |
|
.C1ToolBar_ArcticFox .C1tbListItem-Selected .C1tbContainer, .C1ToolBar_ArcticFox .C1tbListItem-Selected-Hover .C1tbContainer |
{ background: transparent url( 'Images/ToolbarItemActiveBL.gif' ) no-repeat left bottom; } |
Applies the style to the active list items and hover list items. |
|
.C1ToolBar_ArcticFox .C1tbNoRoundedCorner .C1tbListItem-Selected .C1tbContainer, .C1ToolBar_ArcticFox .C1tbNoRoundedCorner .C1tbListItem-Selected-Hover .C1tbContainer |
{ background: url( 'Images/NestedBgActive.png' ) repeat-x center center; border: solid 1px #c2bcad; } |
Applies the style to the selected and hover list items that don’t have the rounded corner. |
|
.C1ToolBar_ArcticFox .C1tbListItem-Selected .C1tbOuter, .C1ToolBar_ArcticFox .C1tbListItem-Selected-Hover .C1tbOuter |
{ background: transparent url( 'Images/ToolbarItemActiveTR.gif' ) no-repeat right top; } |
Applies the style to the selected and selected-hover list items in the outer part of the the C1ToolBarListItem element. |
|
.C1ToolBar_ArcticFox .C1tbListItem-Selected .C1tbInner, .C1ToolBar_ArcticFox .C1tbListItem-Selected-Hover .C1tbInner |
{ background: transparent url( 'Images/ToolbarItemActiveTL.gif' ) no-repeat left top; } |
Applies the style to the selected and selected-hover list items in the inner part of the the C1ToolBarListItem element. |
|
.C1ToolBar_ArcticFox .C1tbListItem-Selected .C1tbContent, .C1ToolBar_ArcticFox .C1tbListItem-Selected-Hover .C1tbContent |
{ background: transparent url( 'Images/ToolbarItemActive.gif' ) no-repeat right bottom; } |
Applies the style to the selected and selected-hover list items in the content part of the the C1ToolBarListItem element. |
|
