Using Component Suites

From Documentation
Jump to: navigation, search

Using Component Suites

When you add NetObjects Fusion Custom Components to your site, you create Component Suites for components that will be used together. For example, if you want to feature multiple guestbooks on a site each with its own Guestbook Admin area you would add each Guestbook component and its corresponding Guestbook Admin component as part of the same suite.

When you add a Custom Component to a page, you will be prompted to either create a new suite or to add the component as part of an existing suite.

Creating a new Component Suite

  1. In the dialog that appears when placing a component on a page, ensure that the New radio button is selected.
  2. Type a name for the Component Suite in the New Name text field.
  3. If you have already created a Profile for the components settings, select the profile you want to apply to the component in the Profile drop-down list.

If you have not yet created a profile for this Component Suite, you can do so when you configure the component settings. See Creating Component Profiles.

  1. Click OK to close the dialog.

Make the component part of an existing Component Suite

  1. In the dialog that appears when placing a component on a page, ensure that the Existing radio button is selected.
  2. Type a name for the Component Suite in the New Name text field.
  3. If you have already created a Profile for the components settings, select the profile you want to apply to the component the Profile drop-down list.

If you have not yet created a profile for this Component Suite, you can do so when you configure the component settings. See Creating Component Profiles.

  1. Click OK to close the dialog.

Creating Component Profiles

When you add NetObjects Fusion Custom Components to your site, you can save the component's general settings as a profile and then apply the profile to additional components that you add to your site.

For example, if you add the NOF Secure Site's Signup component to your site, you can save the general settings for that component as a profile. When you add additional NOF Secure Site components (e.g., Login, Logout, Secure Page) to the site, you can apply the saved profile to the components so that the additional NOF Secure Site components have the same general settings.

You can also create multiple setting profiles and apply them to components for specific purposes. For example, you can add multiple NOF Guestbook components to your site, and each guestbook can have its own Guestbook Admin settings so that you can allow specific users access to each Guestbook Admin.

Component profiles also make it easier to modify component settings. When you create a Custom Component profile, you can make changes to the profile settings, and these changes will be applied to each component that uses that profile.

You create component profiles when configuring a component's general settings.

To create a Custom Component profile:

  1. After adding a Custom Component to a page, click the General tab of the component dialog.
  2. Configure the settings for the component.
  3. Click Save Profile.

The Save Profile dialog appears.

  1. Enter a name for the profile in the Name field.
  2. Click Save to save the profile and close the Save Profile dialog.

You can remove existing component profiles by selecting the profile name in the profile list and clicking Remove. If the deleted profile is in use by a component, the Default settings profile will be used.

Using Style Sheets with Custom Components

You can customize the appearance of many NOF Custom Component design elements using CSS Styles. In component dialogs that offer a Style drop-down list, you can apply custom styles to specific page elements. You can also apply a style that is relative to the look and feel of your SiteStyle by selecting the SiteStyle option from the drop-down list.

More than one CSS name can be added and stored in the CSS drop-down box, but only the selected Style will be active.

The easiest way to add CSS rules to a NOF Custom Component is to select the SiteStyle definition from the Style drop-down list. The SiteStyle definition is the default CSS definition for the component. This definition is in agreement with the active SiteStyle.

You can create CSS definitions for the components from the Selectors tab in Style View. To add a CSS rule to a NOF Custom Component:

  1. Click on the Selectors tab. The Selectors View displays all the CSS rules, that belong to the selected style in the Styles Tree.
  2. In the Selectors view, right-click on the Selectors column and choose Add CSS rule.

The Add CSS rule dialog appears.

  1. Select Named Style and enter a name for the new style in the Name field.

The Components CSS rules have predefined structures. For example, for the Forms Handler Component, the CSS selector is .nof_formshandler, and if you want to customize the style for the News component, in the name field add ".nof_news_default". When you add a component CSS rule, you have to type the name of the component in the predefined structure: .nof_NameOfTheComponent_default. The Name of the component will be replaced by the name of the suite, and default by a word that differences the created CSS rule by other rules created for the same type of component.

  1. Choose the selector from the Selectors column.
  2. Review the selector in the Preview area.

Selecting a form element from the preview area, you can modify the associated CSS rule using the CSS Panels.

You cannot remove CSS rules in the Selectors View. To remove a CSS rule, go to CSS Code View and delete the content of the CSS rule from there or remove the CSS rule from the Manage Styles dialog.

Another way to add a CSS style to a NOF Custom Component.

  1. In Page view, click an area in the page Layout.
  2. Click the HTML button on the Layout Properties panel.

The Objects HTML dialog box appears.

  1. Place the cursor where you want to add the CSS code. For more details about the Object HTML dialog see Working with HTML Directly.
  2. Type <Style>.
  3. Click Insert File and locate the CSS file you want to use.
  4. Type </Style>.
  5. Click OK to close the Objects HTML dialog box.
  6. Open the component editor, then in the CSS field fill in the CSS class name you want to be applied.

Suppose that your css file contains a class named MyLabel, in the CSS field you have to fill in the name MyLabel. You can specify a different class for every label or text field element but this class must exist in the included CSS.

When you add the CSS style in NetObjects Fusion's Object HTML dialog, the CSS definition can be referenced in the Custom Component CSS drop-down menus.

You can also apply a CSS style with the following method:

  1. In Page View, from the Text menu, choose Manage Styles.

The Manage Styles dialog box appears.

The pane on the left lists the currently defined HTML tags styles.

The list of styles can include styles that are specific to the current page, the entire site or part of the Site Style. You can also create custom styles for the navigation bar, a text object, form labels, and so on, for the styles listed in the pane on the left.

  1. To create a new style, click New or Duplicate.

The New Text Style dialog box appears. The Duplicate Text Style dialog box is similar. Duplicating a style is a quick way to give it a different purpose. For example, you can duplicate the H1 style to H2, H3, and H4 headings and then edit them individually.

  1. In the Style type section, select:
  • Redefine HTML tag and choose a tag to edit from the drop down list.
  • Create custom style and type a name for the style in the field.
  1. Select a style scope for the new style:
  • Page specific. If you select this option the style will be available only for the current page. If you are redefining an existing tag, the original definition is still in force for the rest of the site. If you create a new style, it will not be available for any other page of the site.

This option works only if you select the page's layout color "transparent" in the Layout Properties window, on the Background tab.

  • Site wide. If you select this option the new style will not be available throughout the current site. If you are redefining an existing tag, all instances of this tag change throughout the site. For example, if you change the H1 font color to red and select Site wide, all the text with that style applied becomes red.
  1. Click OK.

The Text Format dialog appears. You can now set the attributes for each feature of the style.