left arrow right arrow help header logo background

Step 6: Customize the template page

In this step, we will delete the original main image and move the other images over the main image to the index.html. We do this since we want the main image and the other over it to appear only on the index.html.
  1. Select the main image and press the Delete key to remove it from the page.
  2. Select the images shown below on the page. There are three of them. Click the right mouse button. Select Cut from the context menu.
  3. Press the Save button so that other opened pages will be updated for the changes of this template.
  4. Open the index.html page and paste the above images to the page. Move them to the similar positions when they are on the template page. The positions need not be precise. We can adjust them after we place back the new main image in the index.html. Press the Save button.
  5. Go back to the template page. Right click on the mouse button and select "Page Properties" from the context menu.
    Select the style "background" and click the Edit button to bring up the CSS Style Editor.
  6. Select the "Background tab" of the CSS Style Editor. Change the background color from #272727 to #141414. Add the dark wood texture as background image and repeat it horizontally. Set the values of the dialog as shown below. Click OK to save the settings.
  7. Drag the light.png which we have created in previous step to the template page. Place it at 50 pixels from the left.
  8. Click this button   or select Arrange -> Send to Back from the main menu to move this image to the bottom of the other elements. If not, it will block access to these elements. The page will now look like below.
  9. To match the new background color, we need to change the borders of the text elements which acts as a background for the contents and also footer. Click on the area between the dark wood texture and the footer. Right click the mouse button to bring up the context menu. Then select "Styles" from the menu.
    Select the style "contentline" and click the Edit button to open the CSS Style Editor. Select the "Borders tab" and set the bottom border color to #000000. Click OK to save the settings.
  10. Select the footer text element.
  11. Right click on the mouse button to bring up the context menu. Select "Styles" from the menu.
    Select the style "footerline" and click the Edit button to open the CSS Style Editor. Select the "Borders tab" and set the top border color to #333333.
    Select the style "bottomtexthoverlink" from the Styles pane of the CSS Style Editor. Select the "Text tab" and set the color to #AF1402 or select from the custom colors of the Color Dialog.
     
    Click OK to save the settings. The footer will look like this.
  12. Select again the footer text element. Right click on the mouse button to bring up the context menu. Select "Mark as footer" from the menu. The current setting is that this element will stay below all other elements on the page. To keep it at a certain fixed height from the top, we will change the minimum height to 700 pixels. For example if the height of the contents of the page is 500 pixels. This element will stays at 700 pixels from the top. If the height of the page is 900 pixels, then this element will be positioned to 900 pixels from the top.