Password Page Logo + Footer

AenghasHP · ‎Oct 30, 2022

Hi,

I'm trying to put the finishing touches on this page: https://npaq.redunion.com.au/_hcms/mem/reset/

Ideally, I'd like the logo to be a little larger and the footer to stay at the base of the page (it seems like the page content is too small to have the footer appear at the bottom, at least on my PC).

Any help on how to do this would be much appreciated.

jonchim · ‎Nov 3, 2022

hey @AenghasHP, you'll need to set a width and max-width with !importants unless you're able to define a width in the theme settings. I think you should be able to do it in the global settings for your theme. If not the css below should control the size of the logo, just change the pixels to the size you need.

.hhs-header-logo img {
    width: 280px !important;
    max-width: 280px !important;
}

Jon Chim
VP of Design & Development
Hypha HubSpot Development

Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

Jnix284 · ‎Oct 31, 2022

Hi @AenghasHP and thanks @Jaycee_Lewis ,

It looks like you're using Clean theme - I would reach out to Kevin directly @HelpfulHero for these questions to make sure that none of your changes will have an impact on other pages/content.

I hesitate to make recomendations for modifying the templates (or global elements like the header/footer) before understanding what can be done within the theme settings directly.

As for the reason the footer isn't at the bottom, that will depend largely on your monitor size and resolution. I have found that a lot of system pages and pages with minimal content will render blank/white space below the footer because the browser is filling the window.

If my reply answered your question please mark it as a solution to make it easier for others to find.

AenghasHP · ‎Oct 31, 2022

Normally they don't provide advice for these types of system pages because I've coded them myself. Would it perhaps be the case that if I were to alter the logo size on another page that it would increase its size on the system pages too?

Re the footer, it's odd that our other pages (hosted on HubSpot) don't seem to have the same problem though, surely there must be a way to set the height of the page to be 100%?

jonchim · ‎Nov 1, 2022

hey @AenghasHP ,

For the logo size you should be able to do something like this with the css

a#hs-link-global_footer_ img {
    width: 200px !important;
}

For the footer, I believe because the way the main template is built the footer is inside the <body> the only way to do it would be setting the position of the footer to fixed or absolute which is not ideal if someone sized their browser window very short the footer would cover the password reset. Another option would be to apply a margin/padding to the footer specifically on that page

.footer {
    position: fixed;
    width: 100%;
    bottom: 0;
}

Jon Chim
VP of Design & Development
Hypha HubSpot Development

Did my post help answer your query? Help the Community by marking it as a solution

AenghasHP · ‎Nov 2, 2022

I guess it's not the end of the world if the footer doesn't fill the page, I should have clarified re the logo though, I actually am trying to re-size the header logo, not the footer, do you know how to do this?

jonchim · ‎Nov 3, 2022

hey @AenghasHP, you'll need to set a width and max-width with !importants unless you're able to define a width in the theme settings. I think you should be able to do it in the global settings for your theme. If not the css below should control the size of the logo, just change the pixels to the size you need.

.hhs-header-logo img {
    width: 280px !important;
    max-width: 280px !important;
}

Jon Chim
VP of Design & Development
Hypha HubSpot Development

Did my post help answer your query? Help the Community by marking it as a solution

Jaycee_Lewis · ‎Oct 31, 2022

Hi, @AenghasHP 👋 Thanks for reaching out! Hey, @Jnix284 @jonchim @mangelet, do you have any quick hits you can share with @AenghasHP?

Thank you very much! — Jaycee

Jaycee Lewis

Developer Community Manager

Community | HubSpot

CMS Development