When you add scrolling behavior to the C1ToolBar you can style its scroll elements. The following table describes the different CSS selectors used to style the different parts of the scrollbar buttons.
In each type of scroll button there are additional classes based on the state of the item such as active and disabled scroll buttons. These include the following for the C1ToolBar scroll button element: .C1ToolBar_VisualStyle_ScrollButtonActiveTop, .C1ToolBar_VisualStyle_ScrollButtonActiveRight, . .C1ToolBar_VisualStyle_ScrollButtonActiveLeft, .C1ToolBar_VisualStyle_ScrollButtonDisabledTop, .C1ToolBar_VisualStyle_ScrollButtonDisabledRight, .C1ToolBar_VisualStyle_ScrollButtonDisabledBottom, .C1ToolBar_VisualStyle_ScrollButtonDisabledLeft.
The following table describes the different CSS selectors used to style the scroll button element.
|
CSS Selector |
Property Value Example |
Description |
|
C1ToolBar_VisualStyle .C1ScrollContainer |
{ border:solid 1px #fff; display:block; } |
Applies the style to the toolbar’s scroll container area. |
|
.C1ToolBar_VisualStyle_ScrollButtonTop |
{ margin:0 0 0 0; background:#c7c7c7 url( 'Images/scroll_btn_top.gif') center center no-repeat; border-bottom:solid 1px #999999; } |
Applies the style to the top part of the scroll button of the C1ToolBar. |
|
.C1ToolBar_VisualStyle_ScrollButtonRight |
{ margin:0 0 0 0; background:#c7c7c7 url( 'Images/scroll_btn_right.gif') center center no-repeat; border-left:solid 1px #999999; } |
Applies the style to the right side of the toolbar’s scroll button. |
|
.C1ToolBar_VisualStyle_ScrollButtonBottom |
{ margin:0 0 0 0; background:#c7c7c7 url( 'Images/scroll_btn_bottom.gif') center center no-repeat; border-top:solid 1px #999999; } |
Applies the style to the bottom of the toolbar’s scroll button. |
|
.C1ToolBar_VisualStyle_ScrollButtonLeft |
{ margin:0 0 0 0; background:#c7c7c7 url( 'Images/scroll_btn_left.gif') center center no-repeat; border-right:solid 1px #999999; } |
Applies the style to the left side of the toolbar’s scroll button. |
|
.C1ToolBar_VisualStyle_ScrollButtonActiveTop |
{ opacity: .99; -moz-opacity: .99; -khtml-opacity: .99; filter: alpha(opacity=99); } |
Applies the style to the active top part of the toolbar’s scroll button. |
|
.C1ToolBar_VisualStyle_ScrollButtonActiveRight |
{ opacity: .99; -moz-opacity: .99; -khtml-opacity: .99; filter: alpha(opacity=99); } |
Applies the style to the active right part of the toolbar’s scroll button. |
|
.C1ToolBar_VisualStyle_ScrollButtonActiveBottom |
{ opacity: .99; -moz-opacity: .99; -khtml-opacity: .99; filter: alpha(opacity=99); } |
Applies the style to the active bottom part of the toolbar’s scroll button. |
|
.C1ToolBar_VisualStyle_ScrollButtonActiveLeft |
{ opacity: .99; -moz-opacity: .99; -khtml-opacity: .99; filter: alpha(opacity=99); } |
Applies the style to the active left part of the toolbar’s scroll button. |
|
.C1ToolBar_VisualStyle_ScrollButtonDisabledTop |
{ opacity: .00; -moz-opacity: 0.00; -khtml-opacity: 0.00; filter: alpha(opacity=0); display: none; } |
Applies the style to the disabled top part of the toolbar’s scroll button. |
|
.C1ToolBar_VisualStyle_ScrollButtonDisabledRight |
{ opacity: .00; -moz-opacity: 0.00; -khtml-opacity: 0.00; filter: alpha(opacity=0); display: none; } |
Applies the style to the disabled right part of the toolbar’s scroll button. |
|
.C1ToolBar_VisualStyle_ScrollButtonDisabledBottom |
{ opacity: .00; -moz-opacity: 0.00; -khtml-opacity: 0.00; filter: alpha(opacity=0); display: none; } |
Applies the style to the disabled bottom part of the toolbar’s scroll button. |
|
.C1ToolBar_VisualStyle_ScrollButtonDisabledLeft |
{ opacity: .00; -moz-opacity: 0.00; -khtml-opacity: 0.00; filter: alpha(opacity=0); display: none; } |
Applies the style to the disabled left side of the toolbar’s scroll button. |
|
