ShutterBug Online User Manual

chpt 6. customizing pages using templates

        Welcome Quickstart Guide Table of Contents 1. Introduction 2. Getting Started 3. Build Your Content 4. Preview & Test Your Site 5. Exporting Your Site & Web Hosts 6. Using Templates & Custom Pages 7. Create Your Own Design 8. ShutterBug Xtras: How To 9. The Theme Library 10. Add a Shopping Cart 11. Advanced HTML Options S1. Keyboard Shortcuts S2. Interface Changes in V2 S3. More Help Resources S4. Tips & Tricks IN. Quick Reference Index RN. Release Notes

Page 30

Chapter 6. Customizing Pages Using Templates

───────────────────────────────────────

ShutterBug's Layout window lets you customize almost anything and everything, from

the page elements of each template to entire themes. Each page uses a template -

changing a template will change all pages that use that same template. Adding a new

template for a page means you can customize any or all pages in your site, keeping

the changes made on one page independent from your other pages. ShutterBug's

template feature makes it easy, fast, and fun to customize your pages!

This section covers working with templates and shows you how to customize pages

independently by editing templates, and how to add, edit, copy, and delete templates

from the template drawer. The features discussed here are all performed in the Layout

window. Chapter 7 expands on further design aspects, discussing how to use the

layout tools to edit the Elements and Xtra boxes, and how to create a new design for

your whole site.

Rule of Thumb: If you change a template, the changes will be made across all

pages that use that template. If you want the changes to be independent of

other pages, be sure to add a new template to the page to make it independent,

BEFORE making any edits.

───────────────────────────────────────

Customizing Pages by Applying Different Templates to Each Page

Applying templates to different pages to customize them, works the same way in the

Layout window as it does in Preview mode. Adding a template to your current page will

make the layout of the page different from the rest of the pages in your site, giving it a

custom look. To apply templates to pages, follow these easy steps:

1.  From the Layout window, select the page you wish to customize from the pop up

page list located at the top left corner of the interface.

2.  Click the Select Template >  button to open the template drawer, which displays a

list of template titles. The titles are descriptive of the type of layout each template

contains.

3.  Click on a template to apply it to the current page open in the Layout window. This

action will not change any of your content or affect the other pages in your site. The

template will only be applied to the selected page, leaving your other pages

untouched.

4.  To view the other templates, simply click on each one to see what it looks like on

your page until you have found one you are satisfied with.

5.  To customize more pages, select the next page from the pop up page list and

choose a template, repeating Steps 1-4 for each page you want to change.

6.  As you move from page to page, the template drawer will highlight which template

is being used on which page.You can easily switch out templates on any page at

any time, by simply selecting a different template from the template drawer.

───────────────────────────────────────

Adding and Editing Templates

You don't have to stick to the templates that come packed with ShutterBug. You can

change anything you want on any of the templates to your own liking. You can even

get rid of them all if you don't like them and add your own custom-made creations to

the template drawer.

Adding New Templates to Your Website

If you create your own templates or require more templates than what is packed into

the selected theme, you will first need to add new templates to the template drawer.

You will also need to add new templates if you are using different Xtras on different

pages, to keep the Xtras unique to those pages only, keeping them separated from

your other pages. Adding templates also lets you experiment with different design

ideas and store them away in the drawer for later use if you don't get finished

modifying them in one session.

To add new templates, follow these steps:

1.  From the Layout window, select a page you wish to customize from the pop up

page list located at the top left corner of the interface.

2.  Click the Select Template >  button to open the template drawer. The bottom of the

template drawer contains an Add Template button ('+' ). Click the '+'  button to add

the template to the drawer.

3.  The template will be added to the drawer at the bottom of the existing list. Double-

click on the template title text to activate the text input field and give it a new name.

4.  You can add as many new templates as you like. Repeat the steps above to add

more templates as you need them.

5.  Follow the steps in the next section to begin editing the new templates.

Editing and Creating Custom-Made Templates

Editing templates is easy, using the tabbed interface in the Layout window to edit each

and every element in the template. You can stick to a few simple edits or perform a

complete redesign to make your own custom-made templates. Whenever you add and

edit an Element or Xtra box, you are adding it to the current template. This means all

pages that use the same template, will take on all the changes you make. You can

easily add more templates and edit each one to keep the changes independent.

Using the layout tools to edit and design templates requires some additional

knowledge from the next chapter, Chapter 7 - Create Your Own Design. We strongly

recommend reading through Chapter 7 to get the full picture of editing each element in

a template and creating entirely new themes. For the moment, the following steps will

help get you acquainted with the process of editing templates:

1.  From the Layout window, select the page you wish to customize from the pop up list

located at the top left corner of the interface.

2.  Click the Select Template >  button to open the template drawer. Apply a template

that is closest to the template you plan to have when you are done editing it. A

yellow message bar on the interface will let you know if any other pages are using

the selected template.

3.  Before making any edits to the template, decide if you want the changes to take

place across all pages that use this template, or only the current page. If you want

the changes to be applied to the current page only, you will first need to add the

current template to the template drawer to make it a new and independent

template.

4.  If you want the changes applied to all pages that use the selected template, then

you don't need to add it to the template drawer as a new template. All the pages

using the template will automatically take on any changes that you make.

5.  Use the Layout tools under the tabbed interface to edit the elements and layout of

the selected template. Make only a few edits or perform a complete overhaul, add

xtra boxes, move the elements around, change the colors, do anything you want to

the template. Your custom-made template will always be available from the

template

drawer to apply to other select pages in your site as well (until you delete it).

6.  To give the template a new name, double-click on the template title text to activate

the text input field, and enter the new title.

7.  Repeat Steps 2-6 to create and add more custom-made templates to your

template drawer.

───────────────────────────────────────

Managing Templates - Delete and Copy Templates

Deleting Templates

You can only delete templates that are not being used by any of the pages in your site.

ShutterBug keeps track of which templates are not being used, making it easy to

delete unused templates, without having to do a manual check yourself. You can

delete templates at any time while in the Layout window. You do not have to be on a

specific page or have a specific template selected in order to perform the operation.

To delete a template, click the Select Template >  button to open the template drawer.

Click the Delete... button at the bottom of the drawer interface. A panel will slide out

from the top of the main layout window as shown below. The panel will contain a list of

unused templates in your current site. Check the check boxes beside the templates

you would like to delete. Hit the OK button to delete the selected templates and return

back to the main Layout window. Hit the Cancel button to cancel the delete action and

return back to the main window.

Note: Do not select the template to be deleted by selecting it from the list in the

template drawer - doing so will inadvertently apply it to your page deeming it in use

and unavailable for deletion.

Copying Template Settings

If you have a customized page, but want some of the Elements or Xtra boxes to be

exactly the same as they are on some of your other pages, the Copy settings feature

makes it easy and quick to copy whichever elements you want, from one template to

another, whenever you want. You can copy settings to just one template, or copy

settings to multiple templates all at once. Follow these steps to copy template settings:

1.  From the Layout window, select the page that has the template you wish to copy

settings from; or select the template and apply it to your current page. You must

have the template with the settings to be copied, opened on the current page in

order to perform the copy action.

2.  Click the Select Template >  button to open the template drawer. Click the Copy...

button located at the bottom of the drawer interface.

3.  A panel will slide out from the top of the main layout window. From the element list

at the left, check off the elements and Xtras you would like to copy (copies the

element/xtra and all of its attributes) from the current template.

4.  Then go to the list on the right half of the panel. This list displays all of the

templates contained in your template drawer. From the list, check off the templates

that you wish to copy the settings to.

5.  Hit the OK button to copy the settings and return to the main Layout window. The

settings will be applied to both your current page and the template. Hit the Cancel

button to cancel the copy action and return back to the main window.

───────────────────────────────────────

◀ Prev Page   

Chapter 7 ▶

Created With...