Understanding Fusion Styles and Templates
Tutorial Sections
Standard version
|
|
The Style and Template features available in NetObjects Fusion can cause some confusion. For what it's worth, both terms are used by other applications in a somewhat similar context.
In Microsoft Word or Corel WordPerfect, for instance:
- A Style is a set of pre-defined formatting that you can apply to some text.
- A Template is a complete starting point for a new document that can contain macros, formatting styles, and boilerplate content (such as a logo graphic and the various address and signature blocks on a letter).
Within Fusion, there is even some confusion between Site Styles and Custom Text Styles and Photo Gallery Styles. Those are topics beyond the scope of this tutorial, but they are covered well by other gotFusion tutorials (see the links at the end).
- You can get custom-made Styles and Templates from the gotFusion or FusionBuilders Stores (and other sources).
- The key to understanding what to do with a custom Style or Template lies in knowing what Fusion Styles and Templates do.
top of page
What's the difference?
To best understand the difference between a style and a template in Fusion-talk, you need to know what each does in Fusion.
What's a NOF Style?
In a nutshell, anything you can set in Fusion's Style View is part of the style. All Styles have:
- A collection of graphics for Banner, NavBar Buttons, etc.
- A collection of text formatting definitions for standard HTML tags like <p>, <H1>, <ul>, etc.
Setting a different Site Style affects all pages in your site. A Site Style only affects the parts of the page that it can affect:
- Graphics, which are set in Style View, Graphic tab: your Banner, Primary and Secondary NavBar Buttons, Data List Icons, Background, and Site Style Line
- Text, which is set in Style View, Text Tab: Standard HTML tags, Body, Normal (P), Text Object, Text NavBar, Link, Unordered List, Ordered List, and Headings <H1> to <H6>
What's in a Fusion Style?
Let's open up a Style folder in Windows Explorer and have a look. We have:
- A file named display.css: This is A CSS definition file containing formatting commands that you see in style view
- A file named Index.html: This is an HTML file that renders the style's settings in Style View
- A file named Style.css: This is a CSS definition file that contains the settings from Style View, Text Tab.
- A file called Style.ssx: This is a proprietary NOF-generated file: do not attempt to edit it by hand. This file stores all the settings you can change in Style View!
- A folder named Images: This contains all the graphics you see in Style View, Graphics Tab. It may also contain other images that are not used in the style, or files with an extension of .BAK.
Using a Custom Style
Make sure the style you buy or download is in fact a NetObjects Fusion Site Style. (Hint: all the Styles in the gotFusion and Fusionbuilders Stores are specifically designed for NOF.)
Even if it isn't a Fusion Style, you can often use the graphic elements of styles for other web tools (such as FrontPage) to create your own custom Fusion style. See the Custom Style tutorial for more information.
Installing a custom style:
Unzip or extract the contents of the style to its own folder in x:\NetObjects Fusion\Styles.
If you want to apply the new style to your site:
- Open your site
- Switch to Style View
- On the menu, select Style, Synchronize Style List. The newly installed style should appear in the list.
- Set the new style for your site.
If the style does not appear after you Synchronize Style List, something went wrong when you extracted the style.
- There might be something wrong with the style (e.g. it may be missing a Style.ssx file)
- Perhaps the style was installed to the wrong folder: a common problem happens if the style is installed to
x:\NetObjects Fusion\Styles\stylename\stylename.
- Did all the required graphics get installed to the Images folder?
If you're still in doubt, ask about your problem in one of the gotFusion Newsgroups.
top of page
What's a Fusion Template?
- A Fusion Template contains all content in the Site from which the Template was Exported. This includes:
- Every page and all content on every page
- All the MasterBorders contained in the site (possibly including ones not in use)
- The Site Style used in the site (both graphics and text)
- All custom CSS text styles used in the site
- Hooks to Components used by the site (but not the components themselves)
A Template is also the best (and only) way to:
- Backup a Fusion site
- Move a Fusion site from one computer with NOF to another
- Store a default page layout with elements that are not part of the site Style.
Custom Templates from gotFusion or FusionBuilders Store (or other sources) contain at least one Fusion page with extra design elements that are not part of the Site Style. These might be additional graphics that surround the Banner and NavBar to give the site a customized look and feel.
top of page
How to adapt an existing site to use a custom template's page design
- From your current site, in Site View, Export Template
- File, New Site, From Template (choose the custom template you downloaded
- Name the site & click OK.
- File, Insert Template (the template you created in step 1). Important: When Fusion displays the Inserting MasterBorders dialog, be sure to choose the Create MasterBorders with new name option!
- Drag your site's home page above the template's home page.
- Move the template's home page off to the side of the site structure, and mark it "don't publish"
- Set your existing pages to use the template's Default MasterBorder.
- Your site pages will have "Inserted Default MasterBorder" (or your own MasterBorder that you were using in the old version of the site) instead of "Default MasterBorder."
- If necessary, create new MasterBorders based on the template's Default MasterBorder, and place any objects that were in your old site's custom MasterBorders into the new ones.
More information about Templates:
top of page
|