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, you will see colors are represented by a six-digit hex code/value. For help selecting a color and finding the hex code, see the HTML Color Picker link listed under Reference.

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 https://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.

    adding space

  9. To change the background color of the footer, type in the following: background-color:

    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:

    footer color text

  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:

    text align

  14. After the colon, type the following: center;

    center

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

    footer styling

Reference