Hiding User Fields on signup without deleting them

(Andy) #1

Hi all,

I have a forum that uses custom User Fields during the sign up process.

Is there a way that I can temporarily hide these so they don’t show up during the signup process? The only caveat is that I cannot lose this user data for existing users / profiles.

Alternatively, is it possible to set up a secondary sign up form that I can email to certain people which has different fields to my main sign up form?


(Andy) #2

I should have added, I can use CSS to hide all user fields, but I still want certain ones to show.

 #discourse-modal.create-account div.modal-body div.user-fields { 
   display: none;

(Christoph) #3

Here’s what I did to try and hide custom fields in the registration form:

Use the inspector (right-click -> inspect element, in Chrome and Firefox) and then highlight the part of the form that you want to hide, like this:

Then right click on the selected

section and select copy -> CSS selector

In this example we have #ember1303

I then added this to my custom CSS like this:

#ember1303 {
    display: none;

The only problem is: it doesn’t work. Or rather: it works at first but but the CSS selector seems to change every now and then so that this is not a permanent solution. I’m not sure when the ID changes, but presumably every time you rebuild the container or update Discourse.

As far as I understand the following post, the only way to make this permanent is by using a different way of identifying your element (n-th child), but I have not dug any further into this.

Customizing About page and other pages
(Andy) #4

Like this?

I’ve tried with and without the “discourse-modal.create-account div.modal-body div.user-fields” at the start.

As you can see, my CSS skills are fairly non existent.


(Christoph) #5

Without “discourse-modal.create-account div.modal-body div.user-fields”.

But I think you can scrap my whole approach because I just realized that the id apparently changes all the time, even when no updates have been done. :frowning:

(Christoph) #6

Okay, I dug a bit into this nth-child thing and the following seems to work for me:

.user-fields div:nth-child(6) {
display: none;

This hides the sixth custom field. So you need to replace the 6 with whatever field you want to hide.

Of course this is still not perfect because if you delete one of the user fields that comes before the hide one or if you re-arrange them in a different order, you will hide a different field. And if that happens to be a required user field, you are making it impossible for people to sign-up. So whenever you change something with your custom user-fields you need to be very aware that you have this CSS hack turned on.

(Régis Hanol) #7

Please, don’t ever use #emberXYZ as a CSS selector since they are added by ember and there’s no guarantee they will be the same the next time you use the application.