Changing the Color of the Navigation Buttons

Concept

The appearance of the navigation buttons that display along the top or left side of your PastPerfect Online site can be modified by making changes in the Custom CSS field of IMS. The default CSS includes properties to change the background color of the buttons, the border color around the buttons, and the color of the text. If you would like to make additional changes to the appearance of your buttons, contact our staff for assistance or work with your web designer.

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

If previous modifications have been made by PastPerfect staff or someone in your organization, the hex codes referenced in these steps may not be the same as the hex codes in your Custom CSS field.

1. Sign in to https://admin.pastperfectonline.com.
2. Select the CSS tab.
3. If the buttons on your site display along the top, locate the .topNav a element.
   
   
   
   If the buttons on your site display along the left side, locate the .leftNav a element.
   
   
   
   
4. To change the colors, replace the hex codes to the right of each property with the hex code of your choice. Be sure to leave the "#" and ";" before and after the hex code.
   
   • background-color - color of the buttons
   • border-color - color of the border around the buttons
   • color - color of the text of the buttons
   
   
   
   
5. Once you have made your changes, click the Update Museum button at the top or bottom of your page to save the changes.
6. Click the Open Web Site link at the top of the page to view your changes.
7. While viewing your site, you should see that the buttons, the border around them, and the text have changed color. You will also notice that when you hover over a button, the color changes.
   
   
   
   
8. To change the appearance of the buttons when you hover over them, close your browser, then return to the Interface Management Site and select the CSS tab. Some organizations change both the background color and the text color, while others decide to leave the background color unchanged and change only the color of the button text.
9. If the buttons on your site display along the top, locate the .topNav a:hover element.
   
   
   
   If the buttons on your site display along the left side, locate the .leftNav a:hover element.
   
   
   
   
10. If you want the button’s background color to change when a web visitor hovers or clicks on a button, select a different background color for .topNav a:hover than you did for .topNav a. To change the colors, replace the hex codes to the right of each property with the hex code of your choice. Be sure to leave the "#" and ";" before and after the hex code.
    
    • background-color - color of the buttons
    • border-color - color of the border around the buttons
    • color - color of the text of the buttons
    
    
    
    
11. Once you have made your changes, click the Update Museum button at the top or bottom of your page to save the changes.
12. Click the Open Web Site link at the top of the page to view your changes.
13. While viewing your site, hover over the navigation buttons to see the colors change.
    
    

Reference

• Accessing Your Interface Management Site (IMS)
• Making IMS Changes and Refreshing Your Site
• Interface Management Site - Site Tab
• Interface Management Site - CSS Tab
• HTML Color Picker