Login Logo Colour Swap

[AenghasHP]

Hi,

I'm just putting the finishing touches on our HubSpot CMS login page and would like to change the currently white logo to our coloured version if possible. For context, we use the Helpful Hero Clean 6.1 theme.

Login page: https://amps.redunion.com.au/_hcms/mem/login

There are other pages like our access denied page where a coloured logo is visible. Normally, I think the theme that we have has a setting that allows you to set it as either a Standard setting (white logo) or Stick logo (the coloured logo). 

The problem is that because I've had to hard code the login page, the easy click option to change the colour isn't available. 

I believe there's also a header footer overides modules that we may be able to use as well to resolve the issue.

Any guidance would be much appreciated. 

[ChehakWadhdwa]

Hey @AenghasHP

In module display:none; property is added to coloured logo class and display:block; added to white logo, Just change the property coloured logo will show. You can add this code in css

.hhs-header-logo .logo-sticky {

display: block !important;

}

.logo-standard {

display: none !important;

}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[AenghasHP]

Thanks for your feedback, I implemented the code, but it changes the logo across the entire site. If possible, do you know whether it's possible to change only on the login page?

This is the HTML code at the beginning of the module that directs the module to the CSS (although I think the paths could be wrong anyway).

{% set template_css = "../../css/templates/system.css" %}
{% extends "../layouts/base.html" %}

{% block header %}
{% endblock %}

Is the solution perhaps to clone the global header CSS module and then redirect that particular page's module to the cloned CSS theme with the changes you suggested earlier?

[ChehakWadhdwa]

Hey @AenghasHP

You can add this code in system.css file so it will apply on system pages only and if you want this only in login page then you can create a module and add this css in that module.Then just add module in the login template. 

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[AenghasHP]

I just tried that then, but it looks like it changes the logo all over the website not only the system pages for some weird reason. Do you know why it would be doing that? I uploaded your code to the _system_pages.css file. The only thing I can think of is that that module might impact more than just the system pages.

I also tried to clone different modules and just change the settings for those, but I don't think that works as a solution because it then creates two global menus which creates other problems. 

Sure thing, one it solves the issue, happy to mark it as a solution. 

[ChehakWadhdwa · Accepted solution]

Hey @AenghasHP

Follow this step

1) Create a module and add the css code in it

2) Copy the module path and paste it in your login template and publish

copy module path code from here 

paste it in template and publish like this 

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[AenghasHP]

That's done the trick, thank you very much!