Skip Navigation

[Resolved] CSS code for styling user form

This support ticket is created 4 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 - - 9:00 – 13:00
14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 - - 14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

This topic contains 3 replies, has 2 voices.

Last updated by Jamal 4 years, 2 months ago.

Assisted by: Jamal.

Author
Posts
#1814529

Tell us what you are trying to do?
Style a user form. Sometning like this:
div[data-item_name="textfield-wpcf-health-card-number"] {
float: right;
width: 45%;
margin-right: 20px;
}
I need to replace the custom field name with username, first name, last name, user email, etc. These fields are not custom fields. What are the field names/ IDs for these WP user fields? Where can I get a list of these field names to use it in place of custom field name in the example "textfield-wpcf-health-card-number" and would that work?

What is the link to your site?
shoppingmp.com

Thanks,

#1814725

Hello and thank you for contacting the Toolset support.

I am not really sure to understand what you are looking for! Please correct me if I am wrong.
Are you looking to style the default user fields(username, first name, password), not the custom user fields, right?

I believe that the default user fields follow WordPress naming. Check the second code example on this doc https://developer.wordpress.org/reference/functions/get_user_by/
- user_login
- user_pass
- user_nicename
- user_email
- display_name

First name and last name are stored as user meta and are:
- first_name
- last_name

But would suggest that you switch the form to expert mode and you wrap the cred_field shortcode inside of your own selectors. Something like

<div class="my-username-selector">
		[cred_field field='user_login' class='form-control' output='bootstrap']
      </div>

Then access it in your styles using:

.my-username-selector>div{
  /* Style here */
}

Please note that there is no way to change the name and attributes of the div wrapping the field from Toolset.

If I did not understand, please provide a more detailed example of what you have and what you would like to achieve.

#1815095

Hi,
Thank you for the information. This is exactly what I am looking for, so thanks!

How can I change label position of any field including those user_login and other fields above?

Thanks,

New threads created by Jamal and linked to this one are listed below:

https://toolset.com/forums/topic/change-label-position-in-a-toolset-form/

#1816221

Awesome! Would you please mark this ticket as resolved?

For support rules, we are able to handle only one issue at a time. This helps us to bring you a better service and also helps other users to find all the information here exposed. For that reason, I have created another ticket for your last question.