[Resolved] CSS code for styling user form

[Author]

Posts

[sheriefS]

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,

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

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.

[sheriefS]

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/

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

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.