Create a new background image for the new template page

Open the template page "template.html". Right click on the page and select "Page Properties" from the context menu.

 

Select "content-area" from the Container to find which styles are used by this container.

 

Select the style "content-area" (We purposely name it that way so that we can find it more easily in the CSS Style Editor). Press the "Edit" button to open the style in the CSS Style Editor.

 

The style "content-area" will be selected when the CSS Style Editor is opened. Click on the background tab to find out which image file is used. It turns out that it is "contents-top.gif". Click cancel twice to leave the CSS Style Editor and the Page Properties.

 

Find the image "contents-top.gif" from the Website Explorer and double click the image "contents-top.gif" to open it in the Image Editor.

 

    

Click on the blank area of the image pane and select the lower part of the image by dragging a rectangle around the image using the mouse. Resize the selection to 10 x 170 just like the one shown below.

 

Click on this button to crop the image.

 

Insert this image to the website by pressing the button "Insert to Site". Change the filename to "small-contents-top.gif" so that the original image will not be overwritten.