ComponentOne Window for ASP.NET AJAX: Window for ASP.NET AJAX Appearance > Styles > Caption Bar Styles

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.


Send comments about this topic to ComponentOne.
Copyright © ComponentOne LLC. All rights reserved.