Hiding profile fields using CSS

Recently a client asked me to hide some of the profile fields on their site. Just hiding the field, or even setting the field to disabled is pretty easy, because of the field ID.

image_3.jpg

But in their case they did not only want the field hidden, they also wanted the associated label hidden as well. Since the label has not ID or even unique class name, I had to come up with something slightly different.

image_4.jpg

The one thing I did not want to do was edit the source code. I looked around the Moodle forums and come up with some posts that pointed me towards my eventual solution. It’s simple and allows me to hide any of the Optional profile fields I would like to hide, without editing the core code.

This allowed me to go from this

image_1.jpg

to this

image_2.jpg

using the following code

#id_moodle_additional_names,
#id_moodle_interests {
display: none;
}


fieldset#id_moodle_optional .fcontainer .form-group:nth-child(1) {
display: none;
}

fieldset#id_moodle_optional .fcontainer .form-group:nth-child(2) {
display: none;
}

fieldset#id_moodle_optional .fcontainer .form-group:nth-child(3) {
display: none;
}

fieldset#id_moodle_optional .fcontainer .form-group:nth-child(4) {
display: none;
}

fieldset#id_moodle_optional .fcontainer .form-group:nth-child(5) {
display: none;
}

fieldset#id_moodle_optional .fcontainer .form-group:nth-child(6) {
display: none;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *