OBOUT - Free ASP.NET Show - CSS customize tutorial

ASP.NET Show - CSS Tutorial

Show: Border, Background color, Background image
Panels: Border, Background color, Background image, Scrollbars
Changer: Border, Background color, Background image, Arrow, Number

Open CSS file in Notepad. Feel free to edit.

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

Border

Border around the Show can be set using ob_show_panelsholder class in the style sheet.

Example:

    /* for container where Show is placed */
    .ob_show_panelsholder {
        border: 1px solid #999999;

Background color

Background color can be set for Show using ob_show_panelsholder class in the style sheet.

Example:

    /* for container where Show is placed */
    .ob_show_panelsholder {
        background-color: #eeeeee;

Background image

Background image can be set for Show using ob_show_panelsholder class in the style sheet.

Example:

    /* for container where Show is placed */
    .ob_show_panelsholder {
        background-image: url(images/world.jpg);

Panels Border

Border around the Show panels can be set using ob_show_panel class in the style sheet.

Example:

    /* for container where Show panels are placed */
    .ob_show_panel {
        border: 1px solid #999999;

Panels Background color

Background color can be set for Show panels using ob_show_panel class in the style sheet.

Example:

    /* for container where Show panels are placed */
    .ob_show_panel {
        background-color: #eeeeee;

Panels Background image

Background image can be set for Show panels using ob_show_panel class in the style sheet.

Example:

    /* for container where Show panels are placed */
    .ob_show_panel {
        background-image: url(images/world.jpg);

Panels Scrollbars

Scrollbars can be set or removed using ob_show_panel class in the style sheet.

Use one of these values:
visible - No scrollbars.
scroll - Always show scrollbars.
auto - Show scrollbars where necessary (horizontal or vertical or both).

Example:

    /* for container where Show panels are placed */
    .ob_show_panel {
        overflow: auto;

For IE you can also use separate overflow-X and overflow-Y (not in Mozilla).

Changer Border

Border around the Show changer can be set using ob_show_changer class in the style sheet.

Example:

    /* for container where Show changer is placed */
    .ob_show_changer {
        border: 1px solid #999999;

Changer Background color

Background color can be set for Show changer using ob_show_changer class in the style sheet.

Example:

    /* for container where Show changer is placed */
    .ob_show_changer {
        background-color: #eeeeee;

Changer Background image

Background image can be set for Show changer using ob_show_changer class in the style sheet.

Example:

    /* for container where Show changer is placed */
    .ob_show_changer {
        background-image: url(images/world.jpg);

Changer Arrow

Arrow images can be customized using ob_show_changerleft, ob_show_changerleft_over, ob_show_changerright, etc. classes in the style sheet.

Example:

    /* for left arrow */
    .ob_show_changerleft {
        background-image: url(arrow_left.gif);

Changer Number

Changer numbers can be customized using ob_show_changernumber, ob_show_changernumber_over, ob_show_changernumber_selected classes in the style sheet.

Example:

    /* for number */
    .ob_show_changernumber {
        background-image: url(number.gif);
                
    /* for number when is selected */
    .ob_show_changernumber_selected {
        background-image: url(number_selected.gif.gif);