Common components

Almost every commercial-grade website 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 follow the recipes in this section, you’ll need the following items. (You can create a bare-bones website in Brightspot without any of these ingredients.)

  • 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

You can create a new site and make a few general settings by doing the following:

To create a site:

  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 Main.

    ../../../_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 toolbar that contains buttons for sharing web pages on social networking accounts, sending emails, and printing.

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

Sample action bar

To add an action bar to a site’s pages:

  1. From the Navigation menu, select Admin > Sites & Settings.

  2. 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.

  3. In Front-End, expand Action Bar.

  4. To create a default action bar, do the following:

    1. From the Default Action Bar list, select Set.
    2. Click add_circle_outline and select an action, such as a social networking share. Repeat to select additional actions. Your form looks similar to the following:
    ../../../_images/action-bar-fields.png
  5. To create a type-specific action bar, do the following:

    1. Under Type Specific Overrides, click add_circle_outline. A form appears.

    2. From the Types list, select the content types for which you are creating an action bar.

    3. Under Item, click add_circle_outline and select a social networking share. Your form looks similar to the following:

      ../../../_images/action-bar-type-specific.png
    4. Repeat steps a–c to create additional type-specific action bars.

  6. If you selected Facebook Share, you also need to set the app ID for that share:

    1. In Front-End, expand Facebook.
    2. Click Facebook Settings and select Set.
    3. Set App ID.
  7. Click Save.

Adding a favicon

Favicons are long associated with a website’s branding efforts. Most browsers display favicons in tabs, bookmarks, and history listings.

../../../_images/favicon.svg

To add a favicon to a site’s pages:

  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 Front-End, click the Favicon field and do one of the following.

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

    Your form looks similar to the following:

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

Elements in page structure

Each level in the Content hierarchy diagram includes an Overrides tab. This tab is where you define elements of page structure that are different from the parent’s page structure. The following list describes the fields in an Overrides tab pertaining to page structure.

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