Using SiteStyles

SiteStyles are sets of thematic elements you can apply to your site. Some style elements are graphical and others affect the text colors on your pages. In Style view, you use SiteStyles to create the look and feel of your entire site. NetObjects Fusion comes with 55 professionally designed SiteStyles, and you can find additional SiteStyles in the \Extras folder on your installation CD. You can see examples of all the SiteStyles used in NetObjects Fusion versions 1.0 through 4.0 using the eFuse Stylizer.

You can use SiteStyles as they are or edit them. You can also create SiteStyles using your own artwork to give your site a distinctive look.

This chapter describes SiteStyles and how to use them, including:

• Applying SiteStyles
• Editing SiteStyles
• Creating SiteStyles
• Adding and removing SiteStyles
• Styles folder structure

What Is a SiteStyle?

A SiteStyle is a collection of graphical and typographical elements you can apply to every page in your site to create its look and feel. Your site's SiteStyle gives it a consistent look that survives variations introduced by your site visitor's browser. When you change the SiteStyle, NetObjects Fusion automatically updates every page in your site with the new look.

If you do not find a pre-built style that is appropriate for your site, you can create your own custom SiteStyle. Or, if a SiteStyle works for most, but not all, pages in your site, you can customize it for just a few pages. For even more flexibility—for example, to use more than one banner image in your site or to use a different image for each button in a navigation bar—you can use the Navigation Bar and Banner Properties palettes in Page view.

Style View

When you click the Style button on the control bar, NetObjects Fusion displays Style view. Style view shows a list of SiteStyles available for the current site and the elements of the selected SiteStyle.

Each NetObjects Fusion SiteStyle is composed of nine style elements:

• Banner. Image containing the banner text
• Primary Navigation Bar. Images for highlighted and non-highlighted navigation buttons and highlighted and non-highlighted rollover buttons
• Secondary Navigation Bar. A second set of images for highlighted and non-highlighted navigation buttons and highlighted and non-highlighted rollover buttons
• Data List Icons. Bullet graphic displayed when you use a data object to create a data list
• Normal Text Color. Color of text on the page
• Regular Link Color. Color of linked text on the page
• Visited Link Color. Color of linked text already explored by site visitor
• Background. Color or image used as a background of the page
• SiteStyle Line. Image for lines placed with SiteStyle Line tool

The SiteStyle designer is listed below the style elements.

Applying SiteStyles

By default, navigation banners and buttons obtain their images and text attributes from the SiteStyle assigned to the site. When you apply a SiteStyle, NetObjects Fusion automatically applies style elements throughout your site. For example, it replaces all the buttons in your navigation bars with images from the style you specified, while maintaining the relevant links.

To apply a SiteStyle:

1. In Style view, select a SiteStyle from the list of SiteStyles.
   
   The elements of the selected style appear.
    
2. Click the Set style button on the control bar.
   
   NetObjects Fusion applies the style to your site. The more pages in your site, the longer this takes. When complete, a message confirms that the style was applied and the name above the style list changes to the one you selected.
    
3. Click OK to acknowledge the message.

The next time you go to Page view, you see the new style elements and new text colors on each page.

Editing SiteStyles

You can edit any element of an existing style to customize it. For instance, if you like every element of a style except the banner, you can change just the banner image. The image for every banner in your site changes to the new image.

To customize SiteStyle elements for some, but not all pages, you do not edit the SiteStyle, you customize it just for those pages.

Note: When you edit a SiteStyle, every site that uses the SiteStyle is affected. Your \Styles folder stores only one copy of a SiteStyle. When you change it, the change appears in all sites that use that SiteStyle. If the style you want to change is used in other sites and you don't want them to be affected, create a new style from the original style's graphic elements and customize the new style. See "Creating a SiteStyle" below for more details. If you inadvertently change a style, you can find backups of style folders in the \Extras folder on the NetObjects Fusion CD.

Editing a Style Banner

1. In Style view, select the style you want to change and double-click the banner.
   
   The Banner dialog appears.
   
   
    
2. To change the banner's image, click Browse, select an image file, and click Open.
    
3. To change the appearance of text, click Text Settings and set text options as described in "Editing Text Settings for Buttons and Banners" below.
    
4. Click OK.

Editing Text Settings for Buttons and Banners

With SiteStyles, you can choose any font on your system for banner and button text. NetObjects Fusion dynamically generates image files for these banners and buttons using the font you specified for each element. This means that on buttons and banners, your site visitors see the fonts you select regardless of their browser or the fonts installed on their systems.

To format the text on navigation buttons and banners:

1. In Style view, double-click the banner or button image.
    
2. In the Banner, Primary Button, or Secondary Button dialog, click the Text Settings button.
   
   The Text Settings dialog appears.
   
   
    
3. Edit the settings.
   
   Because the font you choose here will be converted into a graphic, you can use any font on your system and be assured it will still appear correctly for your site visitor.
    
4. When you finish adjusting the text, click OK.

After you close the banner or button dialog, the banner or button text appears with its new options in Site view.

Editing a Navigation Bar

Each SiteStyle includes a primary navigation bar and a secondary navigation bar. The two navigation bars differ only in the style of the button images. You can set the navigation bars in your site to display either style of navigation bar. For example, top-level pages can display the primary buttons while lower-level pages display the secondary buttons.

Each navigation bar contains images for regular and highlighted buttons. Highlighted buttons appear in button navigation bars to show which page a visitor is currently viewing. You can turn highlighting on and off in the Navigation Bar Properties palette in Page view. Highlighting is turned on by default.

Each regular or highlighted button can also have an image for a rollover button. Site visitors see the rollover button image when they move the mouse pointer over a button. Move your mouse pointer over the navigation bar samples to see how the rollover images appear. You can turn rollover buttons on and off in the Navigation Bar Properties palette in Page view.

To edit a navigation bar:

1. In Style view, select the style you want to change and double-click the Primary or Secondary Navigation Bar.

The Primary Button or Secondary Button dialog appears, depending on which navigation bar you are editing.

2. To select a different button image:

• Choose a regular button image by clicking the Regular Browse button, selecting an image file, and clicking Open.
• Choose a regular rollover button image by clicking the Regular Rollover Browse button, selecting an image file, and clicking Open. For best results, use an image that is the same size as the regular button image.
• Choose a highlighted button image by clicking the Highlighted Browse button, selecting an image file, and clicking Open.
• Choose a highlighted rollover button image by clicking the Highlighted Rollover Browse button, selecting an image file, and clicking Open. For best results, use an image that is the same size as the highlighted button image.

3. Choose text options by clicking the appropriate Text Settings button.

The Text Settings dialog appears, where you can set text options.

4. When finished, click OK in the Text Settings dialog and then click OK in the Primary or Secondary Button dialog.

Editing a Data List Icon

Data list icons appear when you use the Data List tool to create a data list in Page view. For information about "Data Publishing," click here.

1. In Style view, select the style you want to change and double-click a Data List icon.
   
   The Picture File Open dialog appears.
    
2. Select an image file.
    
3. Click Open.

Editing Text Colors

You can set the colors for normal text, links, and visited links. These colors apply only to text created with the Text tool in Page view and to text navigation bars. They do not apply to text on buttons, banners, or other images. To edit the default font and font size, choose Edit/Preferences. The normal text color is automatically applied to all text you add to text boxes in Page view. You can override the default color by formatting the text in Page view.

The regular link color is applied to all text you link; the visited link color appears after your site visitor follows the link. You do not see this color in Page view. Link colors show site visitors where links are located, and browsers keep track of which links were followed. Choose different colors for ordinary text, links, and visited links so site visitors know at a glance which links they visited. If color consistency is more important than this detail, assign identical colors to regular and visited links.

To edit a text color:

1. In Style view, select the style you want to change and double-click the text label you want to edit. Choose:

• Normal Text Color to change the default text color for the site.
• Regular Link Color to change the color of links in the site.
• Visited Link Color to change the color of visited links in the site.

2. In the Color Picker, select a color and click OK. It is recommend that you select a web safe color so the color will look correct for your site visitor.

Editing a Style Background

1. In Style view, select the style you want to change and double-click the word Background.

The Background Style dialog appears.

2.  Select:

• None to use the default background color set in the browser's preferences.
• Color to use a solid-color background. White is the default. To choose a different color, click the Color button and select from the Color Picker.
• Picture to use an image file as a background. Browsers tile the image across the page. Click Browse, select an image file, and click Open.

3. Click OK.

Editing the SiteStyle Line

You can use a variety of horizontal page-wide images to separate pages into sections. You insert these lines in Page view using the SiteStyle Line tool.

1. In Site view, select the style you want to change and double-click the SiteStyle Line.
   
   The Picture File Open dialog appears.
    
2. Select an image file.
    
3. Click Open.

Creating a SiteStyle

You can create original styles to give your site a unique look. When you create a new SiteStyle, each element is saved into its own subfolder in the style's folder in the NetObjects Fusion \Styles folder. See "Styles Folder Structure" below for more information.

When you create your own SiteStyle, keep these points in mind:

• When you use an animated .gif for a style image, only the first frame of the animation displays on the image.
• Text labels for buttons and banners are placed on top of images. If you want the label to appear below the image, leave space above or below the image when you create it in your image editing application.
• If you plan to use your SiteStyle on a page with a background color or image, and you want the background to show through your image, use your image editing application to set transparency in your image.

To create a SiteStyle:

1. Create or collect images for your banner, buttons, lines, icons, and background.
   
   Use an image creation application to create the images. To be included in a published site they must be in .gif, .jpg, or .png format. If you use an image in .bmp, .pcx, .pct, or .fpx format, NetObjects Fusion can convert a copy of the image to .gif or .jpg for you.
   
   
    
2. In Style view, click the New button on the control bar.
   
   The New Style dialog appears.
   
   
    
3. Enter a name for your new SiteStyle and click OK.
   
   NetObjects Fusion displays placeholders that indicate where you click to define the image for each element. It also displays default text colors.
   
   NetObjects Fusion creates a new folder in the \Styles folder to contain the style elements. For details, refer to "Styles Folder Structure" below.
    
4. Define each style element by double-clicking it as described above in "Editing SiteStyles."
   
   As you define each element, its image appears in Style view.
   
   
5. Click Set style to apply the new style to your site.

Your custom SiteStyle images and settings are applied to your site.

Managing SiteStyles

You can add new styles to the list of available styles, such as those you obtain from your colleagues or those you create on your own. You can also remove styles and synchronize the list with the style folders currently in your \Styles folder. SiteStyles are stored in folders labeled with the style name. Because NetObjects Fusion stores a list of SiteStyles with each site file, you must add new styles you obtain to your site's style list before you can use them.

If you create a new site from a template, your new site contains the same style list as the site from which the template was made. If you import a template into your current site, style names that were in the template's style list are added to your site's style list. Templates created in NetObjects Fusion include the \Style folder for the template's style. Templates created in earlier versions of NetObjects Fusion do not include the style and you must manually copy the style to your \Styles folder to use it.

Adding a SiteStyle

You can add a style from any NetObjects Fusion style folder on your hard drive, CD-ROM, or LAN. The Add Style To List command on the Style menu makes a complete copy of the added style's folder in your NetObjects Fusion \Styles folder. See "Styles Folder Structure" below for details.

Note: When you add a style, it appears in the list of styles for the current site only. To see the style in another site, choose Style/Update Styles list. This causes NetObjects Fusion to look for all Styles in the style folder and display them in your current style list.

To add a SiteStyle to the style list:

1. In Style view, from the Style menu, choose Add Style To List.
   
   The Open dialog appears.
    
2. Navigate to the style folder of the style you want to import and select its .ssf file.
    
3. Click Open.

NetObjects Fusion adds the style name to the style list.

Adding All Available SiteStyles

To synchronize your style list with the styles in your \Styles folder:

• In Style view, from the Style menu, choose Update Styles List.

NetObjects Fusion updates the Style list of the active site to match the contents of the \Styles folder, adding and removing styles as necessary.

Removing SiteStyles

You can remove a style from the list of styles in the current site. You cannot remove the currently applied style. When you remove a SiteStyle, its name is removed from the current site only. Its style folder and the associated image files are not deleted, and it is not removed from any other sites.

To remove a style from the list:

1. In Style view, select the style you want to remove.
    
2. From the Style menu, choose Remove Style From List.
    
3. Click Yes to confirm.

The style disappears from the style list of the open site. It remains in the NetObjects Fusion \Styles folder.

Styles Folder Structure

Each SiteStyle stores the images it uses in a special folder structure in the NetObjects Fusion \Styles folder.

NetObjects Fusion uses this folder structure to organize and label SiteStyle elements so you can easily locate parts of a style. When you assign an image to a SiteStyle element in Style view, NetObjects Fusion automatically copies the file to the appropriate folder within the \Styles folder. You can give a style element any name you want, but NetObjects Fusion style images generally have the name of the style and element, such as DaisyBanner.gif or DaisyLine.gif.

When you select a new image for a style element, NetObjects Fusion copies it into the appropriate folder for the SiteStyle. If you're editing an existing SiteStyle, the new image replaces the file previously assigned to that element. NetObjects Fusion copies the new image to the folder, but doesn't overwrite the old file unless the new and old files have identical names.

For example, suppose you want to modify the Corporate SiteStyle to change the highlighted button color. First, use an image editing application to open CorpPrimHi.gif and change the button's color. Give the new image file any name you like. Then in Style view, edit the Primary Navigation Bar highlighted button and choose the edited image. The image file you select is copied to the \Primary Buttons Highlighted folder in the NetObjects Fusion \Styles\Corporate folder. If the new image file has the same name as the original file, the original is overwritten. Every site you create or open on your machine that uses the Corporate style uses this file for highlighted primary buttons.

This applies to all style elements that you can base on images: Background, Banner, Primary Navigation Bar, Secondary Navigation Bar, SiteStyle Line, and Data List Icon. This also occurs when you replace the image for a single instance of a button or banner.

For complete documentation, please click here.

NETOBJECTS
FUSION
DOCUMENTATION

Site View

Page View

Site Styles

Stylizer

Assets

Publish