Background

Changing the background to your web pages:

Path, from the left navigation menu: ['Customization' section] > Skin Setup > Background

You can change the appearance of the background to your web-pages using the link labeled "Background" within the Skin Setup menu. Different colored backgrounds, and/or graphical elements as tiled background images, can make an enormous difference to the appearance of your site, and can help tie together the other graphical elements (and fonts, etc.) within the pages of your site.

Selecting the 'Background' button within the Skin Setup menu will load the Background customization screen, above the Skin Setup navigation menu:

Fig. 2.5.1.1.1: The "Background" link & customization screen:

Exactly what part of the page am I customizing here?

Firstly, we need to clarify the specific area within the page template that these modifications affect. Your audio-book site has two vertical columns on the leftmost and rightmost sides of the screen when browsing the site, as shown below:

Fig. 2.5.1.1.2: The site background, affected by changes in this section:

What are the customization options available to me?

Knowing the specific part of the website page template that is affected by your customizations within the 'background' section, we can now take a look at the types of customization open to us:

Margin Color

You can choose the exact color you want as your background throughout the site, left and right of pages. You just need to click on the color picker button and a Color Picker window will pop-up. Then select the desired color and it will appear in the box situated on the left of the color picker button, along with the code or name of that specific color. Alternatively, you can type the Hexadecimal color value (if known) directly into the text box. Again, the color of the box will update immediately to confirm your color selection.

Fig. 2.5.1.1.3: The Color Picker window

Image upload

If you would rather use a tiled image as your site background you can upload your chosen graphic by:

The path to your selected graphic file will be displayed in the image upload field. When you click the "Preview" or "Full Screen Preview" buttons, your graphic will be automatically uploaded to the Spoken Network system (although the graphic will only become a public-facing modification to your live site when you click the "Apply Changes" button - until then you are only previewing how the changes will look).

If you change your mind and don't want to use an image anymore, select the "Remove Image" option from the Background customization screen. Then click on the "Preview" or "Full Screen Preview" buttons and the image will be removed from your website's background.

Canceling, Previewing and Applying my changes

It is important to note that the four buttons at the bottom of the preview screen are the same for every other option within the 'Skin Setup' menu. Their functions are as follows:

"Preview" Button: This button allows you to load your website in the preview screen. This is a great way to visualize how different colors, fonts and layouts will work together coherently on the page (or not, if you've chosen a poor mix of styles!). This button does NOT make changes to your 'live' site - it is only for use as a visual 'proof' of your proposed changes. Please note that all changes made to your site - even those in other customization sections - will be previewed on pressing this button.

"Full Screen Preview" Button: This button allows you to load a new pop-up window illustrating, in full preview mode, exactly how the changes you have just made will look when your page is made live.

"Close" Button: This button will close the "Skin Setup" page without saving any changes you may have just made. If, for example, you change your mind, you can simply abandon your proposed changes by clicking the "Close" button. Only clicking the "Apply Changes" button (details of which are below) will you commit your changes.

"Apply Changes" Button: This button saves any changes you might have made to any of the skin setup sections. When you click on the button, you will be presented two options/buttons, "Cancel" and "Generate Site", as seen below:

Fig. 2.5.1.1.4: The "Cancel" and "Generate Site" options that appear after clicking on the "Apply Changes" button:

If you click on the "Cancel" button, the system will reload the previous version of your website in preview mode, without making any changes to the website.

Instead, if you click on the "Generate Site" button, the system will save your proposed changes and then will display the website in full screen preview mode. For clarity, this button will make live all the changes you have made since you last pressed the "Generate Site" button. Your customers will see all of the changes you have made immediately.

Tip:

It is highly recommended that you make fully sure that the changes you have proposed appear exactly as you want, BEFORE committing the changes to the 'live' site (although you can of course edit the site again, and recommit additional changes, should you need to correct an error).