Styling the Footer

Concept

The footer appears at the bottom of each page of your PastPerfect Online site. Changes or additions to the information in the footer, as well as styling for individual lines of text, are made in the Header/Footer tab. Changes to the overall appearance of the footer are made in the CSS tab of the Interface Management Site.

In the Custom CSS field, colors are often represented by a pound sign (#) followed by a six-digit hex code/value. For help selecting a color and finding the hex code, see the HTML Color Picker link listed in References.

Warning: Making changes to the CSS will alter the appearance of your site, and if done incorrectly could cause the site to lose all styling.

Task

  1. Sign in to admin.pastperfectonline.com.
  2. Select the Header/Footer tab.
  3. Add or change the information in the Footer Text field.
  4. Click the Update Museum button at the top or bottom of the page. Then click the Open Web Site link at the top.
  5. Without any styling, the footer will have black text, aligned to the left, and a white background.

    original footer

  6. Return to the Interface Management Site and select the CSS tab.
  7. Locate the footer element. Without any properties between the brackets, the footer has no styling.

    footer element

  8. Place your cursor after the "footer {" and press the Enter key on your keyboard to start a new line.
  9. To change the background color of the footer, type in the following:
    background-color:
  10. After the colon, type a pound sign (#), followed by the six-digit hex code for the color you want to use, followed by a semicolon (;).

    adding color

  11. Press Enter on your keyboard to start another line and type the following:
    color:
  12. After the colon, type a pound sign (#), followed by the six-digit hex code for the color you want to use for the text of the footer, followed by a semicolon (;).

    adding color

  13. By default, the contents of the footer will be left aligned. To change to a center alignment, press Enter on your keyboard to start another line and type the following:
    text-align: center;

    center

  14. Click the Update Museum button at the top or bottom of your page to save the changes.
  15. Click the Open Web Site link at the top of the page to view your changes.

    footer styling

References