Hi I'm using a website template from marketplace and there are a couple of places that I can't seem to change the colour to match my brand colours. One is the header when hovering over the menu the hover colour is still the standard template colour and I can't see where to change this in the style section. Also on the footer the copyright section doesn't allow me to change the colour from the template colour to my brand colour. I was able to amend the text but not the background colour of the copyright section. Both the above appear in the Global editor. The final one is on my hero images I have a contact me button with an icon. I manage to change the icon to my brand colours including the cover colour but the actual contact me only changes to my brand colours when hover, otherwise it remains the template colour? Can anyone help?
If you're facing challenges in updating specific styles in your HubSpot template, here’s how you can try addressing the issue:
For the footer copyright section, click into the footer module via Content > Design Manager > Global Content, and locate the copyright area. While you may have edited the text, the background color might not have a direct option for customization. In such cases, you can use the browser’s developer tools to inspect the element and identify the class or ID controlling its style. Once identified, update the background color through your theme’s CSS file by adding a rule like for example: .footer-copyright { background-color: #YourBrandColor; }.
For the hero section button, go to Content > Design Manager and select the relevant template. Locate the button in the hero section, and check for style options to edit the default and hover colors. If no visual settings are available, you can modify the button’s colors through custom CSS. Add a rule like .hero-button { background-color: #YourBrandColor; color: #YourTextColor; } to set the default color and .hero-button:hover { background-color: #YourHoverColor; } for the hover state. These updates can be made within the Design Manager or under Advanced Options > Custom CSS.
To update the header menu hover color, start by checking your theme’s settings under Website > Themes > Edit Theme Settings. Look for the navigation or header menu section and update the hover state colors if options are available. If not, use custom CSS to override the default hover color by adding a rule like .hs-menu-item:hover { color: #YourBrandHoverColor; }.
If these steps do not fully resolve your issues, feel free to share more specific details about where you’re stuck, and I’ll be happy to assist further. If this helps, feel free to mark it as the solution ✔️ and give it an upvote 👍 !
It sounds like the issues you're facing are likely tied to CSS overrides or hardcoded styles in the template. For the menu hover color, check the stylesheet for :hover selectors related to the header menu and update them with your brand color. Similarly, for the footer copyright section, inspect the element using developer tools to locate the relevant CSS rule for the background color and override it. For the contact button in the hero section, ensure both the default and hover states are updated in the CSS. If you're using a global editor, it might not have direct access to these specific styles, so you may need to edit the CSS file directly or use custom CSS options if available in your template. Let me know if you need help finding or applying these changes!
If you're facing challenges in updating specific styles in your HubSpot template, here’s how you can try addressing the issue:
For the footer copyright section, click into the footer module via Content > Design Manager > Global Content, and locate the copyright area. While you may have edited the text, the background color might not have a direct option for customization. In such cases, you can use the browser’s developer tools to inspect the element and identify the class or ID controlling its style. Once identified, update the background color through your theme’s CSS file by adding a rule like for example: .footer-copyright { background-color: #YourBrandColor; }.
For the hero section button, go to Content > Design Manager and select the relevant template. Locate the button in the hero section, and check for style options to edit the default and hover colors. If no visual settings are available, you can modify the button’s colors through custom CSS. Add a rule like .hero-button { background-color: #YourBrandColor; color: #YourTextColor; } to set the default color and .hero-button:hover { background-color: #YourHoverColor; } for the hover state. These updates can be made within the Design Manager or under Advanced Options > Custom CSS.
To update the header menu hover color, start by checking your theme’s settings under Website > Themes > Edit Theme Settings. Look for the navigation or header menu section and update the hover state colors if options are available. If not, use custom CSS to override the default hover color by adding a rule like .hs-menu-item:hover { color: #YourBrandHoverColor; }.
If these steps do not fully resolve your issues, feel free to share more specific details about where you’re stuck, and I’ll be happy to assist further. If this helps, feel free to mark it as the solution ✔️ and give it an upvote 👍 !
