Changing the Color of the Search Buttons

Concept

The appearance of the buttons on your site, including those to submit a search or form and to interact with the image viewer, 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, 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

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. Your colors may also be listed in a different format, such as rgb(0, 0, 0) or rgba(0, 0, 0, 0.5).

1. Sign in to admin.pastperfectonline.com.
2. Select the CSS tab.
3. Locate the .button-primary, .button-secondary, or .button-outline elements, depending on which you would like to change.
   
   • button-primary - Search button on Keyword Search and Advanced Search; left and right arrows on the image viewer; Submit button for the Email a Friend, Feedback, and Image Request Forms
   • button-secondary - Reset button on Advanced Search
   • button-outline - Refresh button on Random Images; buttons to view full record, image metadata, and open the Image Request Form in the image viewer; buttons to open the Email a Friend and Feedback Forms on record detail pages; button to acknowledge cookie notice
   
   
   
   
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 pound sign (#) and semicolon (;) before and after the hex code.
   • background-color - color of the button
   • border-color - color of the border around the button
   • color - color of the text of the button
   
   
   
   
5. To change the color of the button when you hover over it, locate the same element with:hover,:focus, e.g., .button-outline:hover, .button-outline:focus.
   
   
   
6. 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 pound sign (#) and semicolon (;) before and after the hex code.
   • background-color - color of the button
   • border-color - color of the border around the button
   • color - color of the text of the button
   
   
   
   
7. Click the Update Museum button at the top or bottom of your page to save the changes.
8. Click the Open Web Site link at the top of the page to view your changes.

References

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