When you add a C1ToolBarSplitButton to the C1ToolBar you can style the split button and its nested toolbar items 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 C1ToolBarSplitButton element: .c1tbSplitButton-selected, .c1tbSplitButton-Selected-Hover, .c1tbSplitButton-Hover, and .c1tbSplitButton-Focus. The following table describes the different CSS selectors used to style the C1ToolBarSplitButton element.
|
CSS Selector |
Property Value Example |
Description |
|
.C1ToolBar_ArcticFox .C1tbDropDownList-Selected .C1tbNestedList .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbSplitButton-Selected .C1tbNestedList .C1tbTextNode |
{ color: #000; } |
Applies the style to the selected dropdown list items in the C1ToolBarSplitButton element. |
|
.C1ToolBar_ArcticFox .C1tbListItem-Selected .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbSplitButton-Selected .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbDropDownList-Selected .C1tbTextNode |
{ color: #fff; } |
Applies the style to the selected dropdown list text item in the C1ToolBarSplitButton element. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton-Hover .C1tbContent, .C1ToolBar_ArcticFox .C1tbSplitButton-Focus .C1tbContent |
{ background: transparent url( 'Images/ToolbarSplButHover.gif' ) no-repeat right bottom; } |
Applies the style to the hover and focus content items in the outer part of the C1ToolBarSplitButton element. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton-Hover .C1tbOuter, .C1ToolBar_ArcticFox .C1tbSplitButton-Focus .C1tbOuter |
{ background: transparent url( 'Images/ToolbarSplButHoverTR.gif' ) no-repeat right top; } |
Applies the style to the hover and focus text node items in the outer part of the C1ToolBarSplitButton element. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbDropDownList .C1tbTextNode |
{ background: transparent url( 'Images/ToolbarSplitButtonArrow.gif' ) no-repeat right center; } |
Applies the style to the text node items on the split button or in the dropdown list of the C1ToolBarSplitButton element. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton-Hover .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbDropDownList-Hover .C1tbTextNode |
{ background: transparent url( 'Images/ToolbarSplitButtonArrow.gif' ) no-repeat right center; } |
Applies the style to the hover text node items on the split button or in the dropdown list of the C1ToolBarSplitButton element. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton-Selected .C1tbContent, .C1ToolBar_ArcticFox .C1tbSplitButton-Selected-Hover .C1tbContent |
{ background: transparent url( 'Images/ToolbarSplButActive.gif' ) no-repeat right bottom; } |
Applies the selected and selected-hover to the content and outer content area of the C1ToolBarSplitButton element. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton-Selected .C1tbOuter, .C1ToolBar_ArcticFox .C1tbSplitButton-Selected-Hover .C1tbOuter |
{ background: transparent url( 'Images/ToolbarSplButActiveTR.gif' ) no-repeat right top; } |
Applies the selected and selected-hover to the outer part of the C1ToolBarSplitButton element. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton-Selected .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbSplitButton-Selected-Hover .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbDropDownList-Selected .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbDropDownList-Selected-Hover .C1tbTextNode |
{ background: transparent url( 'Images/ToolbarSplitButtonArrowHover.gif' ) no-repeat right center; } |
Applies the style to the selected and selected-hover text node C1ToolBarSplitButton and C1ToolBarDropDownList items. |
|
.C1ToolBar_ArcticFox .C1tbDropDownListNoArrow .C1tbContainer .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbListItem .C1tbNestedList .C1tbTextNode |
{ background: none; } |
Applies the style to the text node item of the dropdownlist item without the arrow image. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton .C1tbTextNode |
{ padding-right: 10px; } |
Applies the style to the text node items of the C1ToolBarSplitButton element. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton .C1tbDropDown-NestedList .C1tbList .C1tbListItem .C1tbContainer |
{ background: none; border: none; } |
Applies the style to the nested list items of the C1ToolBarSplitButton element. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton .C1tbDropDown-NestedList .C1tbList |
{ cursor: pointer; display: block; background: #fafafa url( 'Images/NestedBg.png' ) repeat-y top left; min-width: 146px; border: solid 1px #868686; overflow: visible; margin-top: -3px; margin-left: -2px; } |
Applies the style to the nested dropdown list items of the C1ToolBarSplitButton. |
|
.C1ToolBar_ArcticFox .C1tbSplitButton-Selected .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbSplitButton-Selected-Hover .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbDropDownList-Selected .C1tbTextNode, .C1ToolBar_ArcticFox .C1tbDropDownList-Selected-Hover .C1tbTextNode |
{ background: transparent url( 'Images/ToolbarSplitButtonArrowHover.gif' ) no-repeat right center; } |
Applies the style to the selected and selected-hover text node items of the split button and dropdownlist elements. |
|
