Previous Topic

Next Topic

Book Contents

Administrator Panel

Top Area Properties

  1. Logotype image
  2. Header background

    Top Area Properties

Table 2. Top Area Properties

UI Element

File

Code Sample

Logotype image

images/def_sb_logo.gif

-

Header background

style.css

.SB_Table_Border_top_left

{

background-image: url(images/table_top_left.gif);

background-repeat: no-repeat;

width: 10px;

height: 10px;

font-size: 5px;

background-position: bottom;

}

.SB_Table_Border_top_right

{

background-image: url(images/table_top_right.gif);

background-repeat: no-repeat;

width: 10px;

height: 10px;

background-position: bottom;

}

Left Navigation Area Properties

  1. Background
  2. Navigation sections header background
  3. Navigation sections header
  4. Expand/collapse navigation section
  5. Navigation section area
  6. Navigation item
  7. Selected navigation item
  8. Context help
  9. "Powered by" logotype image

    Left Navigation Area Properties

Table 3. Left Navigation Area Properties

UI Element

File

Code Sample

Background

style.css

.SB_LeftMenu

{

background-color: #6e89dd;

}

Navigation sections header background

style.css

 

.SB_LeftMenu_panel_header

{

background-image: url(images/panel_header_bg.gif);

background-position: top right;

background-repeat: no-repeat;

background-color: #ffffff;

padding-right: 5px;

padding-left: 10px;

width: 99%;

font-weight: bold;

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

color: #215dc6;

font-size: 11px;

}

Navigation sections header

style.css

 

.SB_LeftMenu_panel_header_text

{

font-weight: bold;

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

color: #215dc6;

font-size: 11px;

}

Expand/collapse navigation section

images/hide.gif, images/show.gif

-

Navigation section area

style.css

.SB_LeftMenu_panel_content

{

background-color: #d6dff7;

background-image: url(images/white_pixel.gif);

background-position: top left;

background-repeat: repeat-y;

}

Navigation item

style.css

.NodeClass

{

color: #215dc6;

padding-left: 5px;

}

Selected navigation item

style.css

.NodeSelectClass

{

background-color: #3878BF;

color: #ffffff;

margin-left: 5px;

}

Context help

Label.skin

<asp:Label runat="server" SkinID="ShortHelp" Font-Size="11px"

Font-Names="Tahoma, Arial, Helvetica, sans-serif" ForeColor="#474747"/>

'Powered by' logotype image and text

Label.skin, images/swsoft_logo_small.gif

.SB_LeftMenu_Copyright td

{

color: #bcc9f0;

font-size: 10px;

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

text-decoration: none;

height: 100%;

vertical-align: middle;

padding: 0 0 5 0;

}

Main Area

The main area consists of two parts:

  1. Screen title - the title of the currently displayed screen
  2. Screen content - the currently available (visible) set of operations, input forms, lists, etc.

    Main Area

The description of the main area parts is provided below.

Screen Title Properties

  1. Path bar
  2. Title
  3. "Up Level" link

    Screen Title Properties

Table 4. Screen Title Properties

UI Element

File

Code Sample

Path bar

LinkButton.skin

<asp:LinkButton runat="server" SkinID="MapPathLink" Font-Bold="false"Font-Size="11px"

Font-Names="Tahoma, Arial, Helvetica, sans-serif" ForeColor="#444444"></asp:LinkButton>

Title

SiteMapPath.skin

<CurrentNodeStyle Font-Bold="true" Font-Size="16px"

Font-Names="Tahoma, Arial, Helvetica, sans-serif"/>

'Up level' link

style.css

.SB_PageTitle_LevelUp

{

padding-right: 10px;

}

General Screen Content

  1. Screen content background
  2. Fieldset for grouping UI elements
  3. Fieldset title

    General Screen Content

Table 5. General Screen Content

UI Element

File

Code Sample

Screen content background

style.css

.SB_Page

{

background-color: #F9F8F8;

}

Fieldset for grouping UI elements

style.css

.SB_ToolBar_FieldSet

{

border-top-style: solid;

border-top-width: 1px;

border-top-color: #d1d1d1;

border-bottom-style: none;

border-left-style: none;

border-right-style: none;

padding-top:5px;

padding-bottom: 5px;

}

Fieldset title

Label.skin

<asp:Label runat="server" SkinID="LabelToolBarTitle" Font-Size="11px"

Font-Names="Tahoma, Arial, Helvetica, sans-serif" ForeColor="Black"

Font-Bold="true" BackColor="#F9F8F8"/>

Tools

The set of operations available on the current screen:

  1. Tool

    Tools

Table 6. Tools Properties

UI Element

File

Code Sample

Tool

IconButton.skin

<SiteBuilder:IconButton SkinID="AddNewSite" runat="server" IconImageUrl="icons/createSite.png"

Orientation="Vertical" Width="80px">

<IconCellStyle HorizontalAlign="Center" VerticalAlign="Middle"/>

<TextCellStyle HorizontalAlign="Center" Font-Names="Tahoma, Arial, Helvetica, sans-serif"

Font-Size="11px" PaddingTop="5px" PaddingRight="3px" PaddingLeft="3px" />

<LeftSeparatorStyle Width="0" />

<RightSeparatorStyle Width="0" />

</SiteBuilder:IconButton>

Lists

The list of objects is divided into the following parts:

  1. Operations on list
  2. Table header
  3. Table header (list sorted by selected parameter)
  4. Table rows

    Lists

Table 7. List Properties

UI Element

File

Code Sample

Operations on lists

IconButton.skin

<SiteBuilder:IconButton SkinID="ListSearch" runat="server" IconImageUrl="icons/search.png">

<IconCellStyle HorizontalAlign="Center" />

<TextCellStyle HorizontalAlign="Center" Font-Names="Tahoma, Arial, Helvetica, sans-serif"

Font-Size="11px" Wrap="false" Font-Underline="true" PaddingLeft="5"/>

<LeftSeparatorStyle Width="0" />

<RightSeparatorStyle Width="0" />

</SiteBuilder:IconButton>

Table header

GridView.skin

<HeaderStyle Font-Size="11px" HorizontalAlign="left"

CssClass="SB_GridView_Header" BackColor="#D6DFF7" Height="24px" Wrap="false"/>

Table header (list sorted by selected parameter)

GridView.skin

<SelectedRowStyle BackColor="#9fb1e9"/>

Table's rows

GridView.skin

<AlternatingRowStyle BackColor="#f0f0f0" CssClass="SB_GridText" Height="24px" />

<RowStyle BackColor="#ffffff" CssClass="SB_GridText" Height="24px"/>

Dialog Forms

Dialog form is divided into the following parts:

  1. Parameter name
  2. "Required" indicator
  3. Footnote
  4. Button

    Dialog Forms

Table 8. Dialog Forms Properties

UI Element

File

Code Sample

Parameter name

Label.skin

<asp:Label runat="server" SkinID="LabelToolBarTitle" Font-Size="11px"

Font-Names="Tahoma, Arial, Helvetica, sans-serif" ForeColor="Black" Font-Bold="true"

BackColor="#F9F8F8"/>

'Required' indicator

Label.skin

<asp:Label runat="server" SkinID="LabelRequired" Font-Size="11px"

Font-Names="Verdana, Arial, Helvetica, sans-serif" Font-Bold="true" ForeColor="Red"

Text="*" CssClass="SB_RequiredLabel"/>

Footnote

Label.skin

<asp:Label runat="server" SkinID="RequiredNote" ForeColor="#666666" Font-Size="11px"

Font-Names="Tahoma, Arial, Helvetica, sans-serif" />

Button

IconButton.skin

<SiteBuilder:IconButton runat="server" SkinID="Ok" IconImageUrl="icons/ok.gif"

LeftSeparatorImage="images/button_left.gif"

RightSeparatorImage="images/button_right.gif" Width="70px" >

<IconCellStyle BackImageUrl="images/button_middle.gif" PaddingLeft="5px"

PaddingRight="5px" />

<TextCellStyle Wrap="false" BackImageUrl="images/button_middle.gif"

Font-Names="Tahoma, Arial, Helvetica, sans-serif" Font-Size="11px"

HorizontalAlign="Center" PaddingRight="15px"/>

<LeftSeparatorStyle Width="1px"/>

</SiteBuilder:IconButton>

Tabs

Parameters of a certain system object can be arranged in tabs.

Tabs area is divided into the following parts:

  1. Active tab
  2. Tab item
  3. Tabs panel

    Tabs

Table 9. Tabs Properties

UI Element

File

Code Sample

Active tab

IconButton.skin

<SiteBuilder:IconButton runat="server" SkinID="FormTabOn" Width="100">

<TextCellStyle Wrap="false" BackImageUrl="images/tabMiddleOn.gif" Font-Names="Arial;" Font-Size="11px" HorizontalAlign="Center"/>

<LeftSeparatorStyle BackImageUrl="images/tabLeftOn.gif" Width="3" Height="21" />

<RightSeparatorStyle BackImageUrl="images/tabRightOn.gif" Width="3" Height="21" />

</SiteBuilder:IconButton>

Tab item

IconButton.skin

<SiteBuilder:IconButton runat="server" Width="100" SkinID="FormTabOff">

<TextCellStyle Wrap="false" BackImageUrl="images/tabMiddleOff.gif" Font-Names="Arial;" Font-Size="11px" HorizontalAlign="Center"/>

<LeftSeparatorStyle BackImageUrl="images/tabLeftOff.gif" Width="3" Height="19" />

<RightSeparatorStyle BackImageUrl="images/tabRightOff.gif" Width="3" Height="19" />

</SiteBuilder:IconButton>

Tabs panel

style.css

.SB_FormTableHeader TH

{

height: 35px;

padding-left:10px;

background-position: bottom;

background-repeat: repeat-x;

background-image: url(images/FormTabsBg.gif);

}

Login

Login area is divided into the following parts:

  1. Login title
  2. Login block

    Login

Table 9. Login Properties

UI Element

File

Code Sample

login title

style.css

.SB_LoginTitle {

height: 59px;

background-image: url(images/login-header.gif);

font-size: 19px;

font-family: "Franklin Gothic Medium", Verdana, Geneva, Arial, Helvetica, sans-serif;

color: #ffffff;

padding-left: 75px;

width: 453px;

}

Login block

style.css

.SB_LoginTable

{

border-width: 1px;

border-style: solid;

border-color: #cccccc;

width: 453px;

}

See Also

Customizable Properties

Areas of User Interface

General Properties

Wizard