Using SiteStyles

From Documentation
Jump to: navigation, search

Using SiteStyles

SiteStyles are sets of thematic elements you can apply to your site. Some style elements are graphic, some include Flash effects, and others affect the appearance of text on your pages. In Style view, you use SiteStyles to create the look and feel of your entire site. NetObjects Fusion comes with a number of professionally designed SiteStyles that you can use to design your site.

You can use SiteStyles as they are or edit them. You can also create SiteStyles using your own artwork.

What Is a SiteStyle?

A SiteStyle is a collection of graphic and typographical elements you can apply to every page in your site to create its look and feel. Your site 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.

NetObjects Fusion includes three main SiteStyle sources:

Active SiteStyles

SiteStyles associated with a specific .nod file and are located in your User Sites folder. Active SiteStyles are included with your .nod file when exporting as a template and will not appear for newly created sites unless you add them from one of the SiteStyle sources.

If you remove an active style from the Active SiteStyles list, it will be removed from your User Sites folder. You can only make it active again by adding it from one of the SiteStyle sources. It is recommended that you add only those styles being used to your Active SiteStyles folder.

Local SiteStyles

SiteStyles included with NetObjects Fusion and are stored in your Styles folder. Local SiteStyles can be made Active at any time and every local SiteStyle is listed in the Style View for newly created sites. Local SiteStyles are not specific to a site and are not included with your .nod file when exporting as a template.

If you remove a style from the Local SiteStyles list, it will be completely removed from your system.

Legacy SiteStyles

These are a collection of the legacy SiteStyles that can be implemented as your site design.

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 panels in Page view. See Working with Banners and Navigation Bars.

Exploring Style View

Style view shows a list of SiteStyles available for the current site and the graphic and text elements of the selected SiteStyle. When you first launch NetObjects Fusion, you will see a list of default SiteStyle sources.

Active SiteStyles. These are SiteStyles associated with a specific .nod. Active SiteStyles are added to your user sites folder at \NetObjects Fusion\User Sites\Styles. If you export your site as a template, only the active styles will be included.

Note: It is recommended that you keep active only those styles currently being used.

Local SiteStyles. These are SiteStyles included with NetObjects Fusion. Local SiteStyles are not specific to one .nod file and can be made active at any time. The Local SiteStyles list displays the SiteStyles located in \NetObjects Fusion\Styles and are available for all .nod files.

Local SiteStyles within NetObjects Fusion contain a variety of new and exciting SiteStyles along with the high energy SiteStyles of previous versions.

Legacy SiteStyles. These are a collection of the legacy SiteStyles that can be downloaded and implemented as your site design.

Warning: Removing an Active SiteStyle or a Local SiteStyle will remove the style permanently. See Removing SiteStyles.

  • Click the Graphic tab to see the graphic and text elements of the currently selected SiteStyle.
  • Click the Selectors tab to display the CSS rules belonging to the selected SiteStyle in the Styles Tree.
  • Click the CSS Code tab to view the code used by the CSS file that is currently selected in the Styles Tree.
  • Click the Preview tab to view the SiteStyle elements as they would appear in a browser.

The Style Tree displays the NetObjects Fusion Styles and the external CSS files associated with the open site. Each NetObjects Fusion SiteStyle contains 3 categories on the Style Tree:

  • Banner
  • NavBars
  • Tables

Under each of these folders the names of the elements contained by that category are displayed.

Each NetObjects Fusion SiteStyle is composed of graphic and text style elements.

On the Graphic tab you see samples of the:

  • Banner. Image containing the banner text and color.
  • Flash Banner. Flash object containing the banner text and color that has a flash file attached to it.
  • Primary Navigation Bar. Images of navigation buttons as they appear and behave on the primary navigation bar.
  • Secondary Navigation Bar. Images of navigation buttons as they appear and behave on the secondary navigation bar.
  • Primary Buttons. Design of the primary buttons in regular, highlighted, regular rollover, and highlighted rollover states.
  • Secondary Buttons. Design of the secondary buttons in regular, highlighted, regular rollover, and highlighted rollover states.
  • Flash Buttons. Design of the Flash buttons.
  • Table Styles. Preview of the middle and border table regions as they appear in Page view.
  • Data List Icons. Bullet graphic displayed when you use a data object to create a data list.
  • Page Background. Color or image used as a background of the page.
  • Additional Page Elements. Images of additional page elements used in Decorator styles.
  • Styled Line. Image for lines placed with SiteStyle Line tool.
  • Body. Body text style that sets the overall text style for the entire site. The background of the Body is the same as the background shown on the Graphic tab.
  • Normal (P). Style for text that you type in normal paragraphs.
  • Text Object. Style for text that you type in text objects.
  • Text Navbar. Style used for text navigation bars.
  • Link. Text style and colors for text used for links. Changes made to the link style affect the Text Navbar style.
  • Unordered List. Image and text style for bullet lists.
  • Ordered List. Numbering and text style for numbered lists.
  • Headings. Text styles for H1 through H6 heads.

The name of the SiteStyle designer is listed above the graphic elements at the top of the view.

On the Selectors tab you see pre-defined CSS rules that correspond with SiteStyle elements such as Table Styles and Body tags. CSS Selectors are displayed in a column on the left and a preview of the selected CSS selector is displayed on the right. Each selector can be edited using any of the three CSS Inspectors: CSS Common, CSS Property Sheet and CSS Code Editor.

On the CSS Code tab you have full access to edit the CSS Rules assigned to the SiteStyle. The CSS Code editor allows you to modify existing CSS rules, check syntax as you type and import additional CSS styles. To find out more, see Working with CSS and SiteStyles.

To preview the Style Elements to see how they appear in a browser, click on the Preview tab.

Applying SiteStyles

By default, navigation banners, buttons, text, lists, and other site design elements 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 specify, 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 views bar.
    NetObjects Fusion adds the style to your Active SiteStyleslist and applies thestyle to your site.

When you go to Page view, you see the new style elements and text attributes on each page.

Combining SiteStyles and SiteStyle Elements

SiteStyles may be moved to a different SiteStyle list in the Style Tree, by dragging and dropping it to its destination folder.

You can combine style elements belonging to different SiteStyles to create your own unique SiteStyle. The style elements may be dragged and dropped from one SiteStyle to another. Prior to moving SiteStyle elements, you must un-check the Read-Only option from the destination style. See Removing the Read-Only Setting.

To move a SiteStyle to a different location:

  1. Select the SiteStyle name from the Style Tree list.
  2. Drag and drop it to its destination SiteStyles list inside the Styles Tree.

The SiteStyle name and its elements will now be visible in the new location on the Style Tree.

To move a SiteStyle element to a different SiteStyle:

  1. Select the SiteStyle element from the folder in which it resides.
  2. Drag and drop it to the destination SiteStyle folder.

Editing the SiteStyles Elements

A NetObjects SiteStyle is composed of both graphic and text elements that you can display and edit. NetObjects Fusion offers three views in which you can customize the SiteStyles to your preferences, each view having a increased level of complexity: Graphic View, Selectors View, and CSS Code View. You can customize the SiteStyles elements in each of these views.

If you are just beginning to work with CSS, use the Graphic View. This is a visual working area, where you can easily edit style elements using the CSS Panels. See Editing the Graphic Elements and Editing the Text Elements.

If you are already familiar with CSS, you can use the Selectors View to edit CSS rule belonging to the selected SiteStyle in the Styles Tree. Choose CSS selectors, preview and change them using the CSS Panels. See Working in the Selectors View.

If you have extensive CSS knowledge, use the CSS Code View. This view offers the capability of directly editing CSS code. See Working with the CSS Code View.

Editing the Graphic Elements of SiteStyles

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

You can also customize SiteStyle elements for some, but not all pages. See Editing Navigation Bars and Banners.

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. See Creating a SiteStyles.

Removing the Read Only Setting

All SiteStyles installed in your Active SiteStyles list are set to Read only. Before you can edit a SiteStyle, you must remove the Read only setting.

  1. In Style view, select the SiteStyle you want to edit from the list of SiteStyles.
  2. Click in the view so the Style Properties panel appears.
  3. Clear the Read only option on the Style Properties panel. If you don t remove the check mark, you cannot edit the selected SiteStyle.

Editing Banners and Buttons

With SiteStyles, you can choose any font on your system for banner and button text and any image for the banner or button background. NetObjects Fusion dynamically generates image files for these banners and buttons using the font and images you specify 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.

  1. In Style view, select the style you want to change from the list of SiteStyles and clear the Read only option.
  2. Click the End Caps check box to add graphical End Caps at both ends of the navigation bar.
  3. Click the Section Titles check box to add buttons to the navigation bar that can be used to divide it into sections.
  4. On the Graphic tab, click the banner or button state you want to edit.

The Properties panel appears for the banner or selected button state.

  1. Select the font face, size, and style for the text.
  2. Click Color and select a color from the Color Picker.
  3. Select a matte color when using a transparent button or banner. A matte color is used to help blend the text with a background.
  4. To position the text on the banner or button, set the Horizontal and Vertical positions.

If horizontal button position is set to Left or Right, or vertical position is set to Top or Bottom, you can use the Offset option to move the text label on the button in small increments. As you change the offset, you can see the text move on the button in Style view.

  1. To rotate the text, click the up or down rotation buttons. Click Right angles to limit the rotation to 90-degree increments. If you clear the Right angles box, clicking the rotation buttons increments the rotation angle and rotates the text. You can also type a number in the box.
  2. Select an option for multi-line alignment if the banner or button text is more than one line.
  3. To select a new image, click Browse, and choose a file in the Picture File Open dialog.

Each button state has its own Properties panel, so you can vary the images used on a navigation bar. For example, you can choose a happy face for the primary highlighted button and a neutral face for the primary regular button. The Properties panel shows the current image.

  1. To select a new image, click Browse, and select a file in the Picture File Open dialog.

You can select images from your site assets or from any directory on your hard disk. For best results, use an image that is the same size as the button or banner.

The images on the Style view Graphic tab reflect changes you make on the panels. When you finish editing the buttons, check the rollover behavior using the navigation bar samples. To view how the changes will appear in a browser, click on the Preview tab.

Adding Banners and Buttons

You can add new Flash, image, or text banners and buttons in Style view. These SiteStyle elements can vary across pages and elements of different styles can be used to give your page a different look and feel.

To create new banners and buttons:

  1. In Style view, with the Graphic tab selected, select the style you want to add a banner or button set to.
    • If adding a new banner, click on the Banner Properties tab.
    • If adding a new button set, click on the Primary, Secondary, or Flash Navigation Button Set Sample.

The Banner or NavBar Sample Properties panel appears, depending on which SiteStyle element you select.

  1. Select Flash, Image, or Text as the type of banner or button set to be added.
  2. Click Add Banner to add a new Banner, or click Add New Set to add a new button set.

Adding End Caps and Section Title Buttons

You can customize the SiteStyle navigation button sets by adding end caps and section title buttons.

End caps are graphical elements that can be added both before the first button and after the last button of a navigation bar. End caps can be static elements in the navigation bar, or you can choose to link them to their adjoining navigation button. For example, an end cap that appears before the Home page button can function as an extension of the button and serve as a link to the Home page when a user clicks on it.

Section title buttons are static buttons that can be placed between other buttons in the navigation bar, and they are used to divide the navigation bar into sections. You can add text to the section buttons so that they serve as "headings" for groups of pages in the navigation bar.

Adding End Caps to a Button Set

To add end caps to a button set:

  1. In Style view, with the Graphic tab selected, select the style you want to add end caps to.
  2. Click on the Primary or Secondary Navigation Bar button set.

The NavBar Sample Properties panel appears.

  1. In the NavBar Sample Properties panel, check the End Caps check box.

The end cap buttons for each button state appear below the button set.

  1. Click an end cap button in the NavBar sample to select it.
  2. Click Browse in the Button Properties panel.

The Picture File Open dialog appears.

  1. Navigate to the folder containing the image you want to use for the end cap.
  2. Click Open.

The default end cap will be replaced by the selected image in the NavBar Sample.

  1. Repeat steps 4 through 7 to add end caps for each button state in the navigation bar button set.

End caps created in Style view can be applied to a navigation bar on the Navigation Bar Properties panel in Page view. See Setting Button Navigation Bar Properties.

Adding Section Titles to a Button Set

To add section titles to a button set:

  1. In Style view, with the Graphic tab selected, select the style you want to add section titles to.
  2. Click on the Primary or Secondary Navigation Bar button set.

The NavBar Sample Properties panel appears.

  1. In the NavBar Sample Properties panel, check the Section Titles check box. Section title buttons for both regular and regular rollover button states appear below the button set.
  2. Modify the appearance of a section title button by selecting it and changing its settings in the Button Properties panel.

Section titles added to a button set in Style view can be applied when creating custom navigation bars. See Creating a Custom Navigation Bar.

Duplicating Banners and Buttons

To duplicate existing banners and buttons:

  1. In Style view, with the Graphic tab selected, select the banner or button set you want to duplicate.
    • If adding a new banner, click on the Banner Properties tab.
    • If adding a new button set, click on Primary, Secondary, or Flash Navigation Button Set Sample.
  1. The Banner or NavBar Sample Properties panel appears, depending on which SiteStyle element you select.
  2. Type a name for the new Banner or Button Set.
  3. Click Duplicate.

Editing a Navigation Bar

In addition to editing button text and images, you can change the navigation bar borders and spacing between buttons.

To edit the borders and spacing of a navigation bar:

  1. In Style view, with the Graphic tab selected, select the style you want to change and click the Primary or Secondary Navigation Bar Sample.

The Primary or Secondary NavBar Sample Properties panel appears, depending on which navigation bar you select.

  1. Click the End Caps check box to add graphical End Caps at both ends of the navigation bar.

End caps must first be added to the SiteStyle in Style view. Adding End Caps and Section Title Buttons.

  1. Click the Section Titles check box to add buttons to the navigation bar that can be used to divide it into sections.

Section titles must first be added to the SiteStyle in Style view. See Adding End Caps and Section Title Buttons.

  1. Click the Border up and down buttons or enter the value directly to change the thickness of the border around the navigation bar.
  2. Click the Spacing up and down buttons to change the amount of space between the buttons.

Editing a Table Style

Table Styles can be used to match the look and feel of your table to your SiteStyle. You can create a table style in Style view, then apply the table style in Page view using the Table Properties panel.

  1. In Style view, with the Graphic tab selected, select the style you want to edit a table style for.

The Table Style Properties panel appears showing the name and format of the current selected table style.

  1. Format the table style. See Setting Table Styles.
    • Click Duplicate to create a duplicate of the table style selected.
    • Click Clear to delete all formatting associated with the selected table style.

When you edit a table style, every site that uses the table style is affected. If the table style you want to change is used in other sites and you don't want them to be affected, create a new table style from the original table style.

Editing a Data List Icon

Data list icons appear when you use the Data List tool to create a data list in Page view. See Data Publishing.

  1. In Style view, with the Graphic tab selected, select the style you want to change and click a Data List icon.

The Bullet Properties panel appears showing the name of the current data list icon image.

  1. Click Browse, select a new image in the Picture File Open dialog, and click Open.

Editing a Style Background

  1. In Style view, with the Graphic tab selected, select the style you want to change and click the Edit Page background box.

The Page Background Properties panel appears.

  1. In the color field, select:
    • Automatic to use the default background color set in the browser.
    • Transparent to let the image or color of a style underneath the background show through. For example, if the site's paragraph text has a background color, setting the page background color to transparent lets the paragraph background color show through.
    • Color to use a solid color background. To choose a different color, click the Color button and select from the Color Picker.
  2. In the Image field, select:
    • Automatic to use the default image set in the browser.
    • None to use a background with no image.
    • Background.gif to use the SiteStyle background.
    • Browse to select an image for the background.

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, as described in Adding a SiteStyle Line.

  1. In Style view, with the Graphic tab selected, select the style you want to change and click the SiteStyle Line.

The Line Properties panel appears.

  1. Click Browse, select a new image in the Picture File Open dialog, and click Open.

Editing the Text Elements of SiteStyles

You can edit any text element of an existing SiteStyle to customize it. For instance, if you change the Heading 3 text style, the changes appear throughout your site wherever that style is applied.

To customize style elements for some, but not all pages, you do not edit the SiteStyle, you edit the text in Page view. See Designing with Text.

When you edit a SiteStyle's text elements, every site that uses the SiteStyle is affected. If the changes apply to text elements set to Automatic, the changes flow through to the other sites.

To edit the text elements of a SiteStyle, you must first remove its Read only setting. See Removing the Read Only Setting.

  1. In Style view, select a SiteStyle from the list of styles.
  2. Click the Graphic tab. The Graphic View is displayed, containing the style's graphic and text elements.
  3. Scroll down until the text section is displayed on the screen.
  4. Click a text element to select it.

The text styles associated with lists are List, Ordered <OL>, List, Bulleted <UL>, and List Item <LI>. Selecting the type of bullet character or numbering automatically selects the proper text style from the ordered or bulleted list. Changing the <LI> style affects both types of lists.

Using the CSS panels, edit the properties of the selected text element. The changes will be visible on the Graphic View. For more information, see Working with CSS and SiteStyles.

A Note about the Body and Normal (P) Text Styles

If you do not assign a font to the Body or Normal (P) text elements and leave their text styles set to Automatic, the browser's proportional and fixed width font settings are passed through to the SiteStyle for the Body text and Normal (P) text. Consequently, if you leave the settings as Automatic, Body and Normal (P) text appear in Page view as they do in the browser. All text styles in the site are affected by these settings. This helps you with overall page design because you can see exactly how the fonts look based on the browser settings. Note that the Body and Normal (P) fonts are not generated when you publish your site. They are derived from the site visitor's browser settings.

If you change the text settings applied to the Body text element, some settings might not affect the body text on your pages. The inherited settings depend on the HTML output method you use when publishing your site. The following table shows which settings are affected:

Text Attribute HTML 4.01 with Tables
font Y
font style Y
size N
color Y
position N
case N
decoration N
small caps N

Creating a SiteStyle

You can create original styles to give your site a unique look. When you create a new SiteStyle, each graphic element is saved in the \Images folder within the style's folder in the NetObjects\NetObjects Fusion\Styles folder. See Styles Folder Structure.

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 in the image.
  • Text labels for buttons and banners are placed on the images. If you want the label to appear above or 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, make sure you set the background to Automatic or Transparent.

When you create a new SiteStyle, you can start with an existing SiteStyle as a template or a blank SiteStyle. So, before you create a new SiteStyle, select an appropriate SiteStyle as your starting point.

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.

  1. In Style view, highlight Active SiteStyles in the SiteStyles list.

New Blank SiteStyles must be added to your Active SiteStyles list.

  1. Click the New Style button on the views bar or right-click on Active SiteStyles and click New Blank SiteStyle.
  2. Enter a name for your new SiteStyle and press Enter.

Your new style is added to the list of Active SiteStyles and is selected. NetObjects Fusion also creates a folder in the \Styles folder to contain the style elements. See Styles Folder Structure. The Read only option is cleared automatically so you can edit the style.

  1. Edit each graphic and text element as described in Editing the Graphic Elements of SiteStyles and Editing the Text Elements of SiteStyles.

The original SiteStyle the one you based your new design on is not affected by your edits.

  1. Click the Set Style button to apply the new style to your site. Your custom SiteStyle images and settings are applied to your site.

To create a SiteStyle using an existing template:

  1. In Style view, highlight a style in the SiteStyles list.
  2. Go to the Style menu and select Duplicate SiteStyle.
  3. Enter a name for your new SiteStyle and press Enter.

The elements in the view look just like the style you selected as the basis for your new style.

The original SiteStyle - the one you based your new design on - is not affected by your edits.

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 un-used styles from your \Styles folder. SiteStyles are stored in folders labeled with the style name. Text styles and graphic styles are stored separately, and new text styles do not automatically transfer to a new site.

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 include the \Style folder for the template's style.

Adding a SiteStyle

You can add a style from any NetObjects Fusion style folder on your hard disk drive, CD-ROM, or LAN and you can also download online styles. Whenever you add a SiteStyle, NetObjects Fusion adds a complete copy of the style's folder to your \NetObjects Fusion\Styles folder. See Styles Folder Structure.

You add styles by first adding a SiteStyle Source in the Style view. A SiteStyle Source is the location where additional styles are stored. Any SiteStyle found at this location will then be available in the Style view. SiteStyles from earlier versions of NetObjects Fusion do not include all style elements available in NetObjects Fusion. If you import an older style, you must update the style to be compatible with the new features. For example, NetObjects Fusion version 3.0 and earlier did not have the rollover style for buttons. Thus, if your style is from version 3.0 you must assign button rollover styles before the navigation bars can display rollovers.


Add a Local SiteStyle

  1. In Style view, from the Style menu, choose Add SiteStyles Source.

The Add SiteStyles Source dialog appears.

  1. Select Local SiteStyles as the Source Type and click Next.
  2. Enter a name for your new Local SiteStyles source.

This is the name that will appear in the Style view.

  1. Type in the path or navigate to the style folder containing the styles you want to add. The path entered must include the folder where the SiteStyles are stored. For example, if your computer stores its styles in a folder called "Mountain Bikes", the path will look similar to \SiteStyles\Mountain Bikes.

If you do not specify the folder where the styles are located, all of the directory contents will be displayed in Style view. Click Test to verify the path entered is valid.

  1. Click Test to verify the path is valid.
  2. Click Finish.

NetObjects Fusion adds the style name to the style list.

Add a SiteStyle from CD

  1. In Style view, from the Style menu, choose Add SiteStyles Source.

The Add SiteStyles Source dialog appears.

  1. Select CD SiteStyles as the Source Type and click Next.
  2. Enter a name for your new CD SiteStyles source.

This is the name that will appear in the Style view.

  1. Type in the path or navigate to the styles folder located on your CD. The path entered must include the folder where the SiteStyles are stored. For example, if your SiteStyles CD stores its styles in a folder called "Mountain Bikes", the path will look similar to \SiteStyles CD\Mountain Bikes.

If you do not specify the folder where the styles are located, all of the CD contents will be displayed in Style view. Click on Find Source to have NetObjects Fusion do an automatic search for the styles or click Test to verify the path entered is valid.

  1. Click Test to verify the path is valid.
  2. Click Finish.

NetObjects Fusion adds the style name to the style list.

Add a SiteStyle from a Network

To add a SiteStyle from a network:

  1. In Style view, from the Style menu, choose Add SiteStyles Source.

The Add SiteStyles Source dialog appears.

  1. Select Network SiteStyles as the Source Type and click Next.
  2. Enter a name for your new Network SiteStyles source.

This is the name that will appear in the Style view.

  1. Type in the path or navigate to the styles folder located on your network. The path entered must include the folder where the SiteStyles are stored. For example, if your network stores its styles in a folder called "Mountain Bikes", the path will look similar to\SiteStyles\Mountain Bikes.
  2. Click Test to verify the path is valid.
  3. Click Finish.

NetObjects Fusion adds the style name to the style list.

SiteStyles from Imported Sites

If you import a site built with a previous version of NetObjects Fusion, you may notice several additional or duplicate SiteStyles added to your Style view. Previous versions of NetObjects Fusion associated each style in the SiteStyles list with a site .nod. As a result, all of the SiteStyles included in your template are considered active and imported into your Active SiteStyles list.

The first time you open the Style view after importing a site, you can select which, if any, of the additional or duplicate SiteStyles to remove. The current set SiteStyle cannot be removed.

Removing SiteStyles

You can remove a style from the list of styles in Style View. You cannot remove the currently applied style. When you remove a SiteStyle, its style folder and the associated image files are permanently deleted.

  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.

Remove Unused Active SiteStyles.

  1. From the Style Menu, select Remove Unused Active SiteStyles.

The Remove Unused Active Site Styles dialog appears.

  1. Select the unused SiteStyles you want to remove.
  2. Click Remove.

Styles Folder Structure

Each SiteStyle stores its images, text styles, and graphic styles in a special folder structurein the C:\Documents and Settings\All Users\Documents\NetObjects Fusion folder. Images are stored in the \Images folder. Text styles are defined in Style.css and graphic styles in Style.ssx.

When you select a new image for a style element, NetObjects Fusion copies it into the appropriate folder for the SiteStyle. If you are 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 Halo - Blue SiteStyle to change the highlighted button color. First, open p_Highlighted.jpg in the C:\Documents and Settings\All Users\Documents\NetObjects Fusion\Legacy Styles\Halo - Blue\Images folder and use an image editing application to change the button's color. Give the new image file any name you like. Then in Style view, edit the Highlighted Primary Button and choose the edited image. The image file you select is copied to the \Images folder in the C:\Documents and Settings\All Users\Documents\NetObjects Fusion\Legacy Styles\Halo - Blue 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 Halo - Blue style uses this file for highlighted primary buttons.

This applies to all style elements that you can base on images. This also occurs when you replace the image for a single instance of a button or banner. See Changing a Navigation Bar Button Image and Changing a Banner's Image.