Overview

You want to adjust the colour of an element within your Classic AdvocateHub, such as a dropdown menu element and require guidance on how to identify and process the changes within the Branding settings of your Hub.

Information

This guide will focus on changing the colour of a dropdown menu using Chrome as our browser, but the guidance provided can help when making similar CSS changes within your AdvocateHub using other browsers. The steps provided apply to any non-elevated AdvocateHub.

1. Navigate to the Hub and locate the element that you want to adjust.
   1. In our example, a dropdown menu requires a colour change.
      
2. Right-click on the element and select Inspect to open the browser's developer tools.
   
   
3. Hover over the elements in the developer tools to identify the specific CSS class or ID that controls the dropdown menu's colour.
   
   
   1. Note: In our example, this is the "sub-nav-section" class shown.
      
4. Once the element is identified, we can test the proposed changes directly.
   
   1. Note: In our example, we want to change the hover colour, so we use the ":hover" option within the "Force element state" section of the Chrome Developer Tools window and apply the desired background colour value directly to test the change.
5. Navigate to the Hub Admin and select Settings > Advocate Program > Branding.
6. Verify there is no existing customization for the identified element selector.
   1. Search the branding settings for any reference to the CSS selector. You can similarly check for an external CSS sheet which might contain any custom CSS for the selector.
      
   2. If an existing reference is located, you can adjust it within the identified CSS block. Otherwise, a fresh CSS reference can be added.
7. Within the appropriate Custom JS/CSS Field (based on the location), add the changes to your CSS and Save.
   1. 
   2. Note: You may prefer to edit the CSS within an IDE external from the AdvocateHub Settings window if there have been many previous customizations, as shown above. This makes searching for and editing the desired changes far easier. They can then be copied back over.
8. Return to the AdvocateHub, refresh the page, and validate the changes are working as intended.
   

FAQ

How do I change the CSS of other elements in my custom CSS?

You can use the same steps above to identify the correct CSS selector that applies to the element and modify the appropriate properties to meet your needs. You can use online resources such as W3Schools to help with the changes.

What should I do if I cannot find the CSS rule in the admin view?

If the CSS rule is not visible in the admin view, you can just check for an external CSS sheet or copy the CSS code into a text editor for easier searching and editing.

How do I ensure the change is applied correctly?

After updating the CSS code, save the changes and refresh the hub to verify the change was applied correctly. It's also recommended to document the changes made in the CSS code with a comment for future reference. This is accomplished via the "/* */" decorators, as shown below.