Previous Topic

Next Topic

Book Contents

Wizard

Header Properties

  1. Logotype image
  2. Header background
  3. Steps menu
  4. Status bar
  5. Toolbar items

    Header Properties

Table 10. Wizard Header Properties

UI Element

File

Code Sample

logotype image

images/def_sb_logo.gif

-

header background

style.css, images/header_bg.jpg

.SB_Header

{

border-bottom: solid 1px #7d7d7d;

}

.SB_Header_top

{

background-color: #6E89DD;

height: 40px;

}

.SB_Header_top_left

{

background-color: #FBFAFF;

height: 40px;

background-image: url(images/header_bg.jpg);

background-position: right top;

background-repeat: no-repeat;

}

steps menu

images/steps_abg.gif

images/steps_bg.gif

images/steps_design_abullet.gif

images/steps_design_bullet.gif

images/steps_edit_abullet.gif

images/steps_edit_bullet.gif

images/steps_pages_abullet.gif

images/steps_pages_bullet.gif

images/steps_publish_abullet.gif

images/steps_publish_bullet.gif

images/steps_separator.gif

images/steps_separator_al.gif

images/steps_separator_aleft.gif

images/steps_separator_ar.gif

images/steps_separator_aright.gif

images/steps_separator_left.gif

images/steps_separator_right.gif

images/steps_start_abullet.gif

images/steps_start_bullet.gif

-

status bar

StatusBar.skin

<SiteBuilder:StatusBar runat="server"

EmptyImage="images/empty.gif"

InfoImage="images/icon_info.gif"

HelpImage="images/icon_help.gif"

ErrorImage="images/icon_stop.gif">

<MessageStyle Font-Names="Tahoma, Arial, Helvetica, sans-serif" Font-Size="11px" ForeColor="#0068b9"/>

</SiteBuilder:StatusBar>

Toolbar items

IconButton.skin

<SiteBuilder:IconButton SkinID="ToolBarFeedback" runat="server" IconImageUrl="icons/feedback.gif" OverIconImageUrl="icons/feedback.gif" Height="100%">

<IconCellStyle BackColor="#DBDBDB" PaddingTop="5" PaddingRight="5" PaddingBottom="5" PaddingLeft="10"/>

<RightSeparatorStyle Width="0"/>

<LeftSeparatorStyle Width="0"/>

<TextCellStyle PaddingRight="10" BackColor="#DBDBDB" Wrap="False" ForeColor="#000000" Font-Names="Verdana, Arial, Helvetica, sans-serif" Font-Size="11px" />

</SiteBuilder:IconButton>

Footer Properties

  1. Copyright font, separator and background
  2. Footer logo
  3. Footer buttons

    Footer Properties

Table 11. Wizard Footer Properties

UI Element

File

Code Sample

copyright font, separator and background

 

images/style.css

.SB_Footer

{

background-color: #6E89DD;

}

.SB_Footer_copyright

{

color: #bcc9f0;

font-size: 10px;

font-family: Tahoma, Arial, Helvetica, sans-serif;

text-decoration: none;

height: 100%;

vertical-align: middle;

padding: 5 0 5 0;

}

.SB_Footer_vertical_separator

{

background-color: #9FB1E9;

}

Footer logo

images/swsoft_logo_small.gif

.SB_Header

{

border-bottom: solid 1px #7d7d7d;

}

.SB_Header_top

{

background-color: #6E89DD;

height: 40px;

}

.SB_Header_top_left

{

background-color: #FBFAFF;

height: 40px;

background-image: url(images/header_bg.jpg);

background-position: right top;

background-repeat: no-repeat;

}

footer buttons

IconButton.skin

<SiteBuilder:IconButton runat="server" SkinID="FooterBack" IconImageUrl="images/go_back_bullet.gif"

Height="40px" LeftSeparatorImage="images/go_back_l.gif" RightSeparatorImage="images/go_back_r.gif">

<IconCellStyle BackImageUrl="images/go_bg.gif" PaddingLeft="15px" PaddingRight="5px" />

<TextCellStyle Wrap="false" BackImageUrl="images/go_bg.gif" PaddingLeft="5px" PaddingRight="15px" Width="40px"

HorizontalAlign="Center" Font-Bold="true" Font-Names="Tahoma, Arial, Helvetica, sans-serif"

Font-Size="11px" ForeColor="#ffffff" />

</SiteBuilder:IconButton>

Overview

The images displayed on the overview page of the Wizard are also skinable.

Overview

You can customize them by replacing the following files:

Start

The images displayed on the start page of the Wizard are also skinable.

Start

You can customize them by replacing the following files:

Preloader

Preloader is a message window appeared before a page is completely loaded.

Preloader

Table 12. Preloader Properties

UI Element

File

Code Sample

preloader

 

Preloader.skin

images/loading.gif

<SiteBuilder:Preloader runat="server">

<TableStyle Width="320px" Height="56px" BackColor="#EEF0FC" BorderWidth="3px" BorderStyle="solid" BorderColor="#6E89DD"/>

<TextStyle ForeColor="#000000" Font-Size="11px" Font-Names="Tahoma, Arial, Helvetica, sans-serif"/>

</SiteBuilder:Preloader>

See Also

Customizable Properties

Areas of User Interface

General Properties

Administrator Panel