Bite sized tutorials

Daily tutorials

1. Editing Text

2. Borders and Images

3. Moving and Resizing

4. Applying Mouseovers

5. Adding Flash

6. Templates

7. Backgrounds

8. Global Styles

9. Navigation

10. Forms

Button guide

Day 8 – Global Styles

Global styles are the default font settings for you website. Setting them in one place saves time as you do not have to change them in each text element. You can also create style templates to apply to sections of text. Global styles are normally set in the template as they apply to all the pages using that template. For this tutorial, open the template from the templates folder.

Step 1 - The global styles menu

Click Template -> Global Styles from the top menu. The global styles menu will now open. The picture below explains the elements of this menu.

Step 3 - Default Style

When the menu first opens, it starts with the default style and the 'all' option selected. If you set the style options (font, position, background, borders etc), this will apply to any piece of text on your pages. Select the font colour and style and click apply. Click save and view live site.

Step 2 - Change the header style

The options down the left hand side refer to the different types of 'tags' you can select on your page. (see pic 2 below). To change the header 1 style across the whole site, make sure default is selected and click H1. Set a background colour and click apply. Save the template and view your live pages.

Step 3 - Create a new template style

If you want some of your text to be in a particular style, but not all of it, you can create a template style. Click new, and give your template style a name. You will now see it appear in the drop down menu. Change the font styles as you wish and click apply.

Step 4 - Use a template style

To use a template style, create a new text box, open the text editor by clicking on the 'T' and start typing. Scroll over some text and select the style drop down box. You will see your style templates appear in the list. Select the style and click apply. To edit the style, open up the global styles menu again, select your style from the list and edit the options.

N.B. Remember that changing the global styles will apply to any of the styles on the website. Including elements that have already been created on your page.

Summary

You have learnt how to update the global styles on your website and how they help to achieve consistent look and feel. Play around with the different options to see how they affect your font styles. This Tutorial is Day 8 in a Series of 10 Tutorials designed to teach you the features of Webmanager. You can progress through these tutorials at your own pace. If you would like to jump to day 9 tutorial click here to progress.
http://www.webwam.co.uk/support/daily/navigation
If you would like to learn more about working with Global Styles. Visit our bitesize Tutorials:
http://www.webwam.co.uk/support/bitesized/index