Streamline Data Ltd - Design wizard

In the Design Wizard you have the full control of the design of the presentation. For the standard user the predefined layout can be altered from the build in functionality explained below. For the advanced user with the sufficient knowledge of Cascading Style Sheet the layout can be entirely redefined - see the Advanced Functionality section for more on this subject. Style section In the Style Section you can either choose to use the default style or create one or more styles yourself. For each style you create you can choose a menu layout; a left menu with sub menus or a top menu with sub menus in the left side, colours, text layout, add a logo, etc.
	Type a title in the title field, select either Left or Top in the Menu Layout and press Create. All styles that have been created can be found in the dropdown box Select Style and the selected style is the current style for the presentation. By pressing Delete you can delete a style (careful - this action is not reversible) or for the advanced user you can gain access to the css code and add background images to your layout by pressing the Adv Edit button. The Adv Edit button is only visible if Advanced Functionality have been selected in the Settings dialog box under the Tools Menu.
	Select colour In the colour selector you have three deferent ways you can select a colour; use the sliders, type the RGB colour codes or type the hex colour code in the respective fields. The colour selector is used to select colours for the layout or the menu text.
Colour Layout Select either the Set colour or Get colour and the click in one of the frames named; Top, Menu, Main or Bottom to set or get a colour. When the Get Colour is selected and a frame is clicked, the colour selector will automatically display the colour and the values for either the RGB colour code or the Hex colour code can be read.
	Menu text style In the Menu text style you can select the font, the font caption, font weight, font size and text decoration. The result of your selections is displayed in the preview box to the right.
By pressing either the Set Link colour button or the Set Mouse over colour button above the preview box, the colour of the menu text will be change according to colour selected in the Colour Selector.
When a change has been made to either the colour layout, the menu text style or the menu text colour, the change needs to be saved. The Save button can be found in bottom left corner of the Design Wizard.
	Insert logo A logo can be inserted to the top frame. Press the Browse button to select the logo. The logo needs to be in either; jpg, png, gif or bmp format. Unless the layout is redesigned the size of the logo needs be no more than 120 pixels wide or 50 pixels high.
When a logo has been selected the logo text will display the file name of the logo, but the text can be changes to a more useful text such as "Home". The text type in the Logo text field will be displayed when the mouse pointer is held over the logo. See the Logo Preview to the right. The text needs to be changed before the Upload button is pressed. If you want to change the logo or the logo text you will have to select a new logo and press Upload after you have changed the logo text again.

Advanced functionality When the Advanced Functionality has been selected in the Settings dialog box under the Tools Menu, the Adv Edit button is displayed. When the Adv Edit button is pressed the Advanced Css Edit page is shown.
	At the Advanced Css Edit page the selected style sheet can be opened in a css editor by pressing the Edit button. By default the style sheet is opened in Notepad, but an alternative editor can be selected from the Settings dialog box. If you want to insert a background image into the layout, the picture itself can be uploaded at the Select Background Image section. The Uploaded Images is listed in the dropdown box and if a background image is no longer needed it can be deleted by selecting the unwanted image in the dropdown box and press Delete.
When a background image is inserted by the css code the following relative path to the image shall be used: "../images/bg/". See below for a exsample of the css code: background-image: url("../images/bg/offline-help-header.gif");