Common Components

Almost every commercial-grade web site has the following components: header, footer, social-networking action bar, favicon, and page structure. The recipes in this section provide the details for creating these components.

Ingredients

To bake the recipes in this section, you’ll need the following ingredients. (You can experiment with Brightspot without any of these ingredients, resulting in a bare-bones appearance.)

  • A favicon, JPG or PNG format, minimum size 260×260.
  • Your domain name.
  • A web hosting plan, as well as the login credentials so you can upload files to the host directly from Brightspot.
  • The advertising you want to run on your site. Think about the sizes of ads embedded in the page, the size of ad windows that open from your page, and how to integrate with Google’s DoubleClick for Publishers (DFP).
  • Color theme.
  • Items to include in the header and footer.
  • Search engine optimization tags.
  • Integration with social networks.

If you’re creating a high-end site, you probably want to discuss these items with a web designer.

Creating a New Site

With this procedure you create a new site and make a few general settings.

  1. Prepare the Ingredients.

  2. Log into Brightspot.

  3. From the Navigation Menu, select Admin > Sites & Settings.

  4. In the Sites widget, click New Site, then click the Main tab.

    ../../../_images/new-site-main-tab.png
  5. Fill out the fields.

  6. Click Save.

Adding an Action Bar

An action bar (or share bar) is a floating toolbar that contains buttons for sharing web pages on your social networking accounts.

../../../_images/action-bar.png

The following procedure describes how to add social networks to an action bar.

  1. Acquire the app ID for each social network to which you will be posting links.
  2. From the Navigation Menu, select Admin > Sites & Settings.
  3. In the Sites widget, click the site for which you want to define an action bar. (If you click Global, you define the action bar at the highest level in the hierarchy, and it appears in all your published items.) The Edit Site widget appears.
  4. In the Social tab, make settings for each available social network.
  5. Click Save.

Adding a Favicon

Favicons are long associated with the branding effort of a web site. Most browsers display favicons in tabs, bookmarks, and history listings.

../../../_images/favicon.png
  1. Prepare your favicon in a graphic editor. The image should be a square 260w x 260h or larger. Save the image on your computer or on the Internet.

  2. From the Navigation Menu, select Admin > Sites & Settings.

  3. In the Sites widget, click the site for which you want to define a favicon. (If you click Global, you define the favicon at the highest level in the hierarchy, and it appears in all your published items.) The Edit Site widget appears.

  4. In the Main tab, from Favicon, do one of the following.

    • Select New URL, and in the text box paste the URL pointing to your graphic.

    • Select New Upload, and click Choose to select your graphic.

      ../../../_images/favicon-form.png
  5. Click Save.

Elements in Page Structure

Each level in the Content Hierarchy Diagram includes a Page Defaults or Page Overrides tab. This tab is where you define your pages’ structure. The following list describes the fields in those tabs.

  • Header
    • Logo: Logo to display in the header. The following options are available:
      • Inherit—Take from previous level in the content hierarchy.
      • None—No logo appears in the header.
      • Select—Logo is the selected image logo.
    • Hat: Static text to display in the header. The following options are available:
      • Inherit—Take from previous level in the content hierarchy.
      • None—No hat appears in the header.
      • Select—Hat is the selected rich-text hat asset.
    • Navigation: Navigation tool to display in the header. The following options are available:
      • Inherit—Take from previous level in the content hierarchy.
      • None—No navigation tool appears in the header.
      • Select—Navigation tool is the selected page navigation tool.
  • Footer
    • Footer: Footer to display on each page. The following options are available:
      • Inherit—Take from previous level in the content hierarchy.
      • None—No footer appears in the web pages.
      • Select—Footer is the selected page footer.
  • Module Placement
    • Above: Modules to display above the page’s main content. The following options are available:
      • Inherit—Take from previous level in the content hierarchy.
      • Add After—Adds a module after any other existing modules above the page’s main content.
      • Add Before—Adds a module before any other existing modules above the page’s main content.
      • None—No module appears above the page’s main content.
      • Replace—Replaces any existing modules above the page’s main content.
    • Aside: Modules to display next to the page’s main content. The following options are available:
      • Inherit—Take from previous level in the content hierarchy.
      • Add After—Adds a module after any other existing modules to the right of the page’s main content.
      • Add Before—Adds a module before any other existing modules to the right of the page’s main content.
      • None—No module appears to the right of the page’s main content.
      • Replace—Replaces any existing modules to the right of the page’s main content.
    • Below: Modules to display below the page’s main content. The following options are available:
      • Inherit—Take from previous level in the content hierarchy.
      • Add After—Adds a module after any other existing modules below the page’s main content.
      • Add Before—Adds a module before any other existing modules below the page’s main content.
      • None—No module appears below the page’s main content.
      • Replace—Replaces any existing modules below the page’s main content.