Hiding custom user fields from the fullscreen signup page

[Richie (Richie Rich)]

Hi everyone.

Before we enable the new Introducing our new fullscreen signup and login pages (which is great!) we’ve spotted something that we’d like to customise.

In the current modal-based registration we use some CSS to hide all our custom User Fields in the modal.

.d-modal.create-account div[class*="user-field-"] {
    display: none;
}
.create-account .user-fields .user-field {
    padding-bottom: 20px;
}

This means our users are presented with the minimum amount of fields to register:

However, the new signup page is showing every single custom field we have, which by our own doing, is rather a lot

How can we apply some CSS changes to the new full screen sign up page, to hide all our custom user fields please?

[dax (Daniela)]

In the full page, you need to use the new .signup-fullpage class to target the elements inside it with CSS. Try with

.signup-fullpage div[class*="user-field-"] {
    display: none;
}

[Richie (Richie Rich)]

This didn’t work @dax , have I applied it correctly here?

[Richie (Richie Rich)]

@dax might there be another way for this to work?

[dax (Daniela)]

Are you perhaps using any special theme/theme-component? On my site, this CSS code

.signup-fullpage div[class*="user-field-"] {
    display: none;
}

works without any issues. To see it applied, you need to refresh the page. As you can see here, I have 2 different optional fields, and both are successfully hidden once the CSS is enabled and the page is refreshed:

[Richie (Richie Rich)]

Hmm

If I apply that code to the Dark mode css, it does not work:

If I apply the code to the Light mode, it then hides it in dark mode:

Is this a bug? (If so, I will fire up a new post in Bug ) or might it be something specific with my discourse?

Thanks @dax - this will be why it didn’t work first time as I only applied it to the dark mode

[Moin]

@Richie

Is this a bug? (If so, I will fire up a new post in Bug ) or might it be something specific with my discourse?

Which is the forum’s default theme? Did you configure the default dark mode color scheme id site setting? Did you try using a private browser window?

[Richie (Richie Rich)]

@Moin

Which is the forum’s default theme?

Light.

@Moin

Did you configure the default dark mode color scheme id site setting?

Yes.

@Moin

Did you try using a private browser window?

Yes, always

[Moin]

@Richie

Light

That’s the reason why you had to edit that theme. In dark mode, a different color scheme/ palette is applied, but it’s still the light theme.

[Richie (Richie Rich)]

Interesting insight, thanks @Moin

And thanks again @dax for the css