Caption Bar Styles
The C1Window control includes several CSS elements that allow you to customize the appearance of the dialog window's caption bar, including buttons and text. These elements include the following:
Style Property |
Description |
Example (ArcticFox theme) |
.C1Heading .C1Outer |
Sets the outer heading border for when the control is not in focus.
|
.C1Window_ArcticFox .C1Heading .C1Outer { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_left_unfocused.gif")%>') no-repeat scroll left top; padding-left: 5px; overflow:hidden; } |
.C1Heading .C1Inner |
Sets the inner heading border for when the control is not in focus.
|
.C1Window_ArcticFox .C1Heading .C1Inner { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_right_unfocused.gif")%>') no-repeat scroll right top; padding-right:5px; } |
.C1Heading .C1Content |
Sets the heading's content style.
|
.C1Window_ArcticFox .C1Heading .C1Content { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_center_unfocused.gif")%>') repeat-x scroll left top; padding: 0px 0px 0px 0px; height: 30px; } |
.C1Focus .C1Heading .C1Outer |
Sets the outer heading border for when the control is in focus.
|
.C1Window_ArcticFox .C1Focus .C1Heading .C1Outer { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_left.gif")%>') no-repeat scroll left top; } |
.C1Focus .C1Heading .C1Inner |
Sets the inner heading border for when the control is in focus.
|
.C1Window_ArcticFox .C1Focus .C1Heading .C1Inner { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_right.gif")%>') no-repeat scroll right top; } |
.C1Focus .C1Heading .C1Content |
Sets the heading's content style when the control is in focus.
|
.C1Window_ArcticFox .C1Focus .C1Heading .C1Content { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_center.gif")%>') repeat-x scroll left top; } |
.C1Focus-C1Maximized .C1Heading .C1Outer |
Sets the outer heading border for when the control is in focus and maximized.
|
.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1Outer { background-image: none; padding-left:0px; } |
.C1Focus-C1Maximized .C1Heading .C1Inner |
Sets the inner heading border for when the control is in focus and maximized.
|
.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1Inner { background-image: none; padding-right:0px; } |
.C1Focus-C1Maximized .C1Heading .C1Content |
Sets the heading's content style when the control is in focus and maximized.
|
.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1Content { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.title_center_maximize.gif")%>') repeat-x scroll left top; } |
.C1Heading .C1TextNode |
Sets the heading's text node style when the control is not in focus.
|
.C1Window_ArcticFox .C1Heading .C1TextNode { font-family: System; font-size: 12px; color: #000000; -moz-user-select: none; -khtml-user-select: none; user-select: none; line-height:30px; padding-left:2px; } |
.C1Focus .C1Heading .C1TextNode |
Sets the heading's content style when the control is in focus.
|
.C1Window_ArcticFox .C1Focus .C1Heading .C1TextNode { color:#767676; } |
.C1Focus-C1Maximized .C1Heading .C1TextNode |
Sets the heading's content style when the control is in focus and maximized.
|
.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1TextNode { color: #FFFFFF; } |
.C1Heading .C1Icon |
Sets the heading's icon image.
|
.C1Window_ArcticFox .C1Heading .C1Icon { float:left; display:none; } |
.C1Heading .C1List .C1ListItem |
Sets the heading's button styles.
|
.C1Window_ArcticFox .C1Heading .C1List .C1ListItem { background:transparent url('<%= WebResource("C1.Web.UI.Controls.C1Window.VisualStyles.ArcticFox.Images.Tool-Sprites.gif")%>') no-repeat scroll left top; cursor:pointer; float:left; overflow:hidden; height: 16px; width: 18px; margin-left:1px; } |
.C1Heading .C1ControlBox |
Sets the heading's button styles. |
.C1Window_ArcticFox .C1Heading .C1ControlBox { float:right; padding-top:7px; } |
.C1Heading .C1List .C1Closer |
Sets the heading's Close button styles when the control is not in focus. |
.C1Window_ArcticFox .C1Heading .C1List .C1Closer { background-position: 0px 0px; } |
.C1Focus .C1Heading .C1List .C1Closer |
Sets the heading's Close button styles when the control is in focus. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Closer { background-position: -18px 0px; } |
.C1Focus .C1Heading .C1List .C1Closer-C1Hover |
Sets the heading's Close button styles when the control is in focus and the button is hovered over. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Closer-C1Hover, .C1Window_ArcticFox .C1Heading .C1List .C1Closer-C1Hover { background-position:-36px 0px; } |
.C1Heading .C1List .C1Closer-C1Hover |
Sets the heading's Close button styles when the control is not in focus and the button is hovered over. | |
.C1Focus .C1Heading .C1List .C1Closer-C1Active |
Sets the heading's Close button styles when the control is in focus and the button is active. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Closer-C1Active, .C1Window_ArcticFox .C1Heading .C1List .C1Closer-C1Active { background-position:-54px 0px; } |
.C1Heading .C1List .C1Closer-C1Active |
Sets the heading's Close button styles when the control is not in focus and the button is active. | |
.C1Heading .C1List .C1Maximizer |
Sets the heading's Maximize button styles when the control is not in focus. |
.C1Window_ArcticFox .C1Heading .C1List .C1Maximizer { background-position : 0px -25px; } |
.C1Focus .C1Heading .C1List .C1Maximizer |
Sets the heading's Maximize button styles when the control is in focus. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Maximizer { background-position : -18px -25px; } |
.C1Focus .C1Heading .C1List .C1Maximizer-C1Hover |
Sets the heading's Maximize button styles when the control is in focus and the button is hovered over. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Maximizer-C1Hover, .C1Window_ArcticFox .C1Heading .C1List .C1Maximizer-C1Hover { background-position: -36px -25px; } |
.C1Heading .C1List .C1Maximizer-C1Hover |
Sets the heading's Maximize button styles when the control is not in focus and the button is hovered over. | |
.C1Focus .C1Heading .C1List .C1Maximizer-C1Active |
Sets the heading's Maximize button styles when the control is in focus and the button is active. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Maximizer-C1Active, .C1Window_ArcticFox .C1Heading .C1List .C1Maximizer-C1Active { background-position: -54px -25px; } |
.C1Heading .C1List .C1Maximizer-C1Active |
Sets the heading's Maximize button styles when the control is not in focus and the button is active. | |
.C1Maximized .C1Heading .C1List .C1Maximizer |
Sets the heading's Maximized button styles when the control is maximized and not in focus. |
.C1Window_ArcticFox .C1Maximized .C1Heading .C1List .C1Maximizer { background-position: 0px -50px; } |
.C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer |
Sets the heading's Maximized button styles when the control is maximized and in focus. |
.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer { background-position: -18px -50px; } |
.C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer-C1Hover |
Sets the heading's Maximized button styles when the control is maximized and in focus and the button is hovered over. |
.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer-C1Hover, .C1Window_ArcticFox .C1Maximized .C1Heading .C1List .C1Maximizer-C1Hover { background-position: -36px -50px; } |
.C1Maximized .C1Heading .C1List .C1Maximizer-C1Hover |
Sets the heading's Maximized button styles when the control is maximized and not in focus and the button is hovered over. | |
.C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer-C1Active |
Sets the heading's Maximized button styles when the control is maximized and in focus and the button is active. |
.C1Window_ArcticFox .C1Focus-C1Maximized .C1Heading .C1List .C1Maximizer-C1Active, .C1Window_ArcticFox .C1Maximized .C1Heading .C1List .C1Maximizer-C1Active { background-position: -54px -50px; } |
.C1Maximized .C1Heading .C1List .C1Maximizer-C1Active |
Sets the heading's Maximized button styles when the control is maximized and not in focus and the button is active. | |
.C1Heading .C1List .C1Minimizer |
Sets the heading's Minimize button styles when the control is not in focus. |
.C1Window_ArcticFox .C1Heading .C1List .C1Minimizer { background-position: 0px -75px; } |
.C1Focus .C1Heading .C1List .C1Minimizer |
Sets the heading's Minimize button styles when the control is in focus. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Minimizer { background-position: -18px -75px; } |
.C1Focus-C1Minimized .C1Heading .C1List .C1Minimizer-C1Hover |
Sets the heading's Minimize button styles when the control is in focus and the button is hovered over. |
.C1Window_ArcticFox .C1Focus-C1Minimized .C1Heading .C1List .C1Minimizer-C1Hover, .C1Window_ArcticFox .C1Minimized .C1Heading .C1List .C1Minimizer-C1Hover { background-position: -36px -50px; } |
.C1Minimized .C1Heading .C1List .C1Minimizer-C1Hover |
Sets the heading's Minimize button styles when the control is not in focus and the button is hovered over. | |
.C1Focus-C1Minimized .C1Heading .C1List .C1Minimizer-C1Active |
Sets the heading's Minimize button styles when the control is in focus and the button is active. |
.C1Window_ArcticFox .C1Focus-C1Minimized .C1Heading .C1List .C1Minimizer-C1Active, .C1Window_ArcticFox .C1Minimized .C1Heading .C1List .C1Minimizer-C1Active { background-position: -54px -50px; } |
.C1Minimized .C1Heading .C1List .C1Minimizer-C1Active |
Sets the heading's Minimize button styles when the control is not in focus and the button is active. | |
.C1Heading .C1List .C1Toggler |
Sets the heading's Toggle button styles when the control is not in focus and is expanded. |
.C1Window_ArcticFox .C1Heading .C1List .C1Toggler { background-position: 0px -100px; } |
.C1Focus .C1Heading .C1List .C1Toggler |
Sets the heading's Toggle button styles when the control is in focus and is expanded. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Toggler { background-position: -18px -100px; } |
.C1Focus .C1Heading .C1List .C1Toggler-C1Hover |
Sets the heading's Toggle button styles when the control is in focus and is expanded and the button is hovered over. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Toggler-C1Hover, .C1Window_ArcticFox .C1Heading .C1List .C1Toggler-C1Hover { background-position: -36px -100px; } |
.C1Heading .C1List .C1Toggler-C1Hover |
Sets the heading's Toggle button styles when the control is not in focus and is expanded and the button is hovered over. | |
.C1Focus .C1Heading .C1List .C1Toggler-C1Active |
Sets the heading's Toggle button styles when the control is in focus and is expanded and the button is active. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Toggler-C1Active, .C1Window_ArcticFox .C1Heading .C1List .C1Toggler-C1Active { background-position: -54px -100px; } |
.C1Heading .C1List .C1Toggler-C1Active |
Sets the heading's Toggle button styles when the control is not in focus and is expanded and the button is active. | |
.C1Closed .C1Heading .C1List .C1Toggler
|
Sets the heading's Toggle button styles when the control is not in focus and is collapsed. |
.C1Window_ArcticFox .C1Closed .C1Heading .C1List .C1Toggler { background-position: 0px -125px; } |
.C1Focus-C1Closed .C1Heading .C1List .C1Toggler |
Sets the heading's Toggle button styles when the control is in focus and is collapsed. |
.C1Window_ArcticFox .C1Focus-C1Closed .C1Heading .C1List .C1Toggler { background-position: -18px -125px; } |
.C1Focus-C1Closed .C1Heading .C1List .C1Toggler-C1Hover |
Sets the heading's Toggle button styles when the control is in focus and is collapsed and the button is hovered over. |
.C1Window_ArcticFox .C1Focus-C1Closed .C1Heading .C1List .C1Toggler-C1Hover, .C1Window_ArcticFox .C1Closed .C1Heading .C1List .C1Toggler-C1Hover { background-position : -36px -125px; } |
.C1Closed .C1Heading .C1List .C1Toggler-C1Hover |
Sets the heading's Toggle button styles when the control is not in focus and is collapsed and the button is hovered over. | |
.C1Focus-C1Closed .C1Heading .C1List .C1Toggler-C1Active |
Sets the heading's Toggle button styles when the control is in focus and is collapsed and the button is active. |
.C1Window_ArcticFox .C1Focus-C1Closed .C1Heading .C1List .C1Toggler-C1Active, .C1Window_ArcticFox .C1Closed .C1Heading .C1List .C1Toggler-C1Active { background-position: -54px -125px; } |
.C1Closed .C1Heading .C1List .C1Toggler-C1Active |
Sets the heading's Toggle button styles when the control is not in focus and is collapsed and the button is active. | |
.C1Heading .C1List .C1Reloader |
Sets the heading's Reload button styles when the control is not in focus. |
.C1Window_ArcticFox .C1Heading .C1List .C1Reloader { background-position: 0px -150px; } |
.C1Focus .C1Heading .C1List .C1Reloader |
Sets the heading's Reload button styles when the control is in focus. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Reloader { background-position: -18px -150px; } |
.C1Focus .C1Heading .C1List .C1Reloader-C1Hover |
Sets the heading's Reload button styles when the control is in focus and the button is hovered over. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Reloader-C1Hover, .C1Window_ArcticFox .C1Heading .C1List .C1Reloader-C1Hover { background-position: -36px -150px; } |
.C1Heading .C1List .C1Reloader-C1Hover |
Sets the heading's Reload button styles when the control is not in focus and the button is hovered over. | |
.C1Focus .C1Heading .C1List .C1Reloader-C1Active |
Sets the heading's Reload button styles when the control is in focus and the button is active. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Reloader-C1Active, .C1Window_ArcticFox .C1Heading .C1List .C1Reloader-C1Active { background-position: -54px -150px; } |
.C1Heading .C1List .C1Reloader-C1Active |
Sets the heading's Reload button styles when the control is not in focus and the button is active. | |
.C1Heading .C1List .C1Pinner |
Sets the heading's Pin button styles when the control is not in focus. |
.C1Window_ArcticFox .C1Heading .C1List .C1Pinner { background-position: 0px -175px; } |
.C1Focus .C1Heading .C1List .C1Pinner |
Sets the heading's Pin button styles when the control is in focus. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Pinner { background-position: -18px -175px; } |
.C1Focus .C1Heading .C1List .C1Pinner-C1Hover |
Sets the heading's Pin button styles when the control is in focus and the button is hovered over. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Pinner-C1Hover, .C1Window_ArcticFox .C1Heading .C1List .C1Pinner-C1Hover { background-position: -36px -175px; } |
.C1Heading .C1List .C1Pinner-C1Hover |
Sets the heading's Pin button styles when the control is not in focus and the button is hovered over. | |
.C1Focus .C1Heading .C1List .C1Pinner-C1Active |
Sets the heading's Pin button styles when the control is in focus and the button is active. |
.C1Window_ArcticFox .C1Focus .C1Heading .C1List .C1Pinner-C1Active, .C1Window_ArcticFox .C1Heading .C1List .C1Pinner-C1Active { background-position: -54px -175px; } |
.C1Heading .C1List .C1Pinner-C1Active |
Sets the heading's Pin button styles when the control is not in focus and the button is active. | |
.C1Pinned .C1Heading .C1List .C1Pinner |
Sets the heading's Pinned button styles when the control is not in focus. |
.C1Window_ArcticFox .C1Pinned .C1Heading .C1List .C1Pinner { background-position: 0px -200px; } |
.C1Focus-C1Pinned .C1Heading .C1List .C1Pinner |
Sets the heading's Pinned button styles when the control is in focus. |
.C1Window_ArcticFox .C1Focus-C1Pinned .C1Heading .C1List .C1Pinner { background-position: -18px -200px; } |
.C1Focus-C1Pinned .C1Heading .C1List .C1Pinner-C1Hover |
Sets the heading's Pinned button styles when the control is in focus and the button is hovered over. |
.C1Window_ArcticFox .C1Focus-C1Pinned .C1Heading .C1List .C1Pinner-C1Hover, .C1Window_ArcticFox .C1Pinned .C1Heading .C1List .C1Pinner-C1Hover { background-position: -36px -200px; } |
.C1Pinned .C1Heading .C1List .C1Pinner-C1Hover |
Sets the heading's Pinned button styles when the control is not in focus and the button is hovered over. | |
.C1Focus-C1Pinned .C1Heading .C1List .C1Pinner-C1Active |
Sets the heading's Pinned button styles when the control is in focus and the button is active. |
.C1Window_ArcticFox .C1Focus-C1Pinned .C1Heading .C1List .C1Pinner-C1Active, .C1Window_ArcticFox .C1Pinned .C1Heading .C1List .C1Pinner-C1Active { background-position: -54px -200px; } |
.C1Pinned .C1Heading .C1List .C1Pinner-C1Active |
Sets the heading's Pinned button styles when the control is not in focus and the button is active. |
Note that you can set the visibility and ToolTips for elements on the caption bar, such as the icon image and button elements, by using the CaptionButtons property.
|