ASP.NET Splitter Tutorial - CSS

Open CSS file in Notepad. Feel free to edit.

CSS file style.css is located according property StyleFolder
Example: spl1.StyleFolder = "splitterstyles/default"

Border

Border around the Splitter can be set using ob_spl_panel class in the style sheet.

Example:
    /* for table where splitter is placed */
    .ob_spl_panel {
        border: 1px solid #999999;
border image

Background color

Background color can be set for splitter panels using ob_spl_leftpanelcontent, ob_spl_rightpanelcontent classes in the style sheet.
    /* for left panel content */
    .ob_spl_leftpanelcontent {
        background-color: #eeeeee;

    /* for right panel content */
    .ob_spl_rightpanelcontent {
        background-color: #eeeeee;
background color

Background image

Background image can be set for splitter panels using ob_spl_leftpanelcontent, ob_spl_rightpanelheader, ob_spl_rightpanelcontent, etc. classes in the style sheet.
    /* for left panel content */
    .ob_spl_leftpanelcontent {
        background-image: url('../images/pagebg.jpg');

    /* for right panel content */
    .ob_spl_rightpanelcontent {
        background-color: url('../images/world.jpg');
background image

Scrollbars

Scrollbars can be set or removed using ob_spl_leftpanelcontent, ob_spl_leftpanelfooter, ob_spl_rightpanelheader, etc. classes.

Use one of these values:
visible - No scrollbars.
scroll - Always show scrollbars.
auto - Show scrollbars where necessary (horizontal or vertical or both).
    /* for left panel content */
    .ob_spl_leftpanelcontent {
        overflow: auto;
        
For IE you can also use separate overflow-X and overflow-Y (not in Mozilla).
scrollbars

Separator

Separator style can be set using ob_spl_dividervertical class.

    /* for vertical panels separator */
    .ob_spl_dividervertical {
        width: 12px;
        background-image: url(../images/icq_dividerVertical.gif);
        background-repeat: no-repeat;
        background-position: center center;
                
divider

Resizing Bar

Resizing bar style can be set using ob_spl_resizebarvertical class.

    /* for vertical panels separator */
    .ob_spl_resizebarvertical {
        border: 2px dashed crimson;
        
divider

Collapsing background

Collapsing background can be set using ob_spl_collapseleft, ob_spl_collapseright classes in the style sheet.

Example:
    /* for left collapsing */
    .ob_spl_collapseleft {
        background-color: white;
        border: 1px solid crimson;
    /* for right collapsing */
    .ob_spl_collapseright {
        background-color: white;
        border: 1px solid crimson;
border image

Collapsing image

Collapsing image can be set using ob_spl_collapseleft, ob_spl_collapseright classes in the style sheet.

Example:
    /* for left collapsing */
    .ob_spl_collapseleft {
        background-image: url('../images/arrow_left.gif');
        background-repeat: no-repeat;
        background-position: center center;
        background-color: white;
        border: 1px solid black;
    /* for right collapsing */
    .ob_spl_collapseright {
        background-image: url('../images/arrow_right.gif');
        background-repeat: no-repeat;
        background-position: center center;
        background-color: white;
        border: 1px solid black;
border image