Hiding custom user fields from the fullscreen signup page

Product Support

AI-generated summary

Richie wants to hide custom user fields from the new fullscreen signup page in Discourse, as they are currently visible despite being hidden in the old modal signup using CSS. Dax suggests using the .signup-fullpage class in CSS to target the fields, which works on standard setups. Richie initially has trouble applying it, as the CSS only works when added to the light mode theme, not dark mode. Moin explains that this is because the dark mode uses the same light theme but with a different color scheme, so the CSS must be applied to the correct theme. After clarifying the theme settings and confirming the issue, Richie resolves the problem by applying the CSS to the appropriate theme, acknowledging the helpful advice from both Dax and Moin Richie, dax, and Moin.

1

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:

Screenshot 2024-12-05 at 11.11.39
Screenshot 2024-12-05 at 11.11.391920×1544 106 KB

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

Screenshot 2024-12-05 at 11.18.44
Screenshot 2024-12-05 at 11.18.441986×2126 169 KB

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

2

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;
}
3

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

Screenshot 2024-12-05 at 16.47.43
Screenshot 2024-12-05 at 16.47.431264×432 44.3 KB

4

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

5

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:

signupfullpage

7

Hmm :thinking:

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

Screenshot 2024-12-09 at 20.31.50
Screenshot 2024-12-09 at 20.31.502670×1352 220 KB

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

Screenshot 2024-12-09 at 20.32.08
Screenshot 2024-12-09 at 20.32.082682×1332 217 KB

Is this a bug? (If so, I will fire up a new post in Contribute > 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 :slight_smile:

8

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?

9

Light.

Screenshot 2024-12-09 at 21.21.18
Screenshot 2024-12-09 at 21.21.18808×664 40.8 KB

Yes.

Screenshot 2024-12-09 at 21.21.09
Screenshot 2024-12-09 at 21.21.091606×302 10.7 KB

Yes, always :blush:

10

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.

11

Interesting insight, thanks @Moin :smiley:

And thanks again @dax for the css :smiley: