CMS Login Error Colouring

Develop, Build & Integrate CMS Development
, ,
1

Hi,

I’m trying to design our login process using the HubSpot private content CMS. Unfortunately, there’s no drag-and-drop available for people that are total newbies like me, so I’m doing my best to wrap my head around HTML and custom modules.

For context, we use the helpful hero clean 6.1 theme and they don’t offer any template module login HTML page.

Here is an example of a registration page that I have made.

https://amps.redunion.com.au/_hcms/mem/register

All of the system template pages rather annoyingly have the red bar on the top, which makes me think that the pages are erroring.

Any guidance on how to remove the red bar would be much appreciated. I think it could be a CSS issue as so far as the colouring goes.

The form information is also very oddly spaced. It’d be great to increase the spacing of that but I’m not sure how.

Lastly, on the login page (https://amps.redunion.com.au/_hcms/mem/login) the “Don’t have an account?Register here.” has no space. It’d be great to have a space.

Any advice would be much appreciated. There’s quite a bit to fix and I’m totally new to all of this. I’m used to the drag-and-drop style CMS but the module-based page coding is a little new to me.

Thanks for any help!

2

Hi @AenghasHP

First, these CSS can adjust the space between form fields.

.hs_cos_wrapper_type_member_register .hs-form-field + .hs-form-field {
 margin-top: 20px;
}

.hs_cos_wrapper_type_member_register .hs-submit {
 margin-top: 20px
}

But the problem is the red bar above the form. It might be a wrapper of form error message, but I have no idea why this is shown with empty text. Unfortunatelly, I can’t reproduce the same situation because Clean theme series from Helpful Hero needs to pay.

It’s easy to hide it with CSS like this:

.hs_cos_wrapper_type_member_register .hs-form-field > .hs-error-msgs {
 display: none;
}

But first of all, I strongly recommend you detect the cause why it is shown. You also could ask to Helpful Hero that why it is shown.

Hope this helps,

3

Thanks for the feedback. It still looks like when I paste the code into the module that it errors and defaults to the js and CSS of other modules. I’ll have to try and find out where they are, but I’m hoping that I don’t have to edit all forms and error pages. It’d be good if the changes that I’m trying to implement only needed to occur on the page’s actual module.

I’ve also reached out to Helpful Hero for some guidance.

4

I’ve had a play around and managed to fix those thank you!

One last potentially silly question, I’d like to change the logo on those system pages to a coloured version (it’s currently white), but looks like that might not be possible without changing the global header. I was wondering whether you had any suggestions on how to change the new module so that a coloured logo is able to be used instead?

I’m thinking the solution could be to clone the global header theme and redo the file path within the new system module to point to the new cloned theme, but was just after a little guidance if possible?

Any help would be much appreciated. Thanks.