Skip Navigation

[Resolved] how to style login form

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user would like to style the login form provided by Toolset.

Solution:
There is no way to customize the markup generated by the login form in order to style it. But we can use CSS.
The login form will generate markup similar to the following:

<form name="loginform" id="loginform" action="http://yourdomain.com/wp-login.php" method="post">
    <div class="wp-success"></div>
    <p class="login-username">
        <label for="user_login">Username or Email</label>
        <input type="text" name="log" id="user_login" class="input" value="" size="20">
    </p>
    <p class="login-password">
        <label for="user_pass">Password</label>
        <input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
    </p>
     
    <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me</label></p>
    <p class="login-submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In">
        <input type="hidden" name="redirect_to" value="http://yourdomain.com/account/" wfd-invisible="true">
    </p>
    <input type="hidden" name="wpv_login_form" value="on" wfd-invisible="true">
</form>

You can target each element with its CSS class or name attribute. Below some examples:

.login-username {/* style the username label and input */}
.login-username label {/* style the username label */}
.login-username input {/* style the username label */}
This support ticket is created 4 years, 6 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)

Tagged: 

This topic contains 2 replies, has 2 voices.

Last updated by fabioF-5 4 years, 6 months ago.

Assisted by: Jamal.

Author
Posts
#1622463
login.jpg

Hello
Tell us what you are trying to do?
I'm trying to style login form , css, and frontend
Is there any documentation that you are following?
I saw other issue like this but I don't find a way to edit because in back-end isn't possible to see module wpv-login-form.
Is there a similar example that we can see?

What is the link to your site?
link.kronomedia.it

#1622829

Hello and thank you for contacting the Toolset support.

There is now way to customize the markup generated by the form. But you can use CSS.
The login form will generate markup similar to the following:

<form name="loginform" id="loginform" action="<em><u>hidden link</u></em>" method="post">
	<div class="wp-success"></div>
	<p class="login-username">
		<label for="user_login">Username or Email</label>
		<input type="text" name="log" id="user_login" class="input" value="" size="20">
	</p>
	<p class="login-password">
		<label for="user_pass">Password</label>
		<input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
	</p>
	
	<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me</label></p>
	<p class="login-submit">
		<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In">
		<input type="hidden" name="redirect_to" value="<em><u>hidden link</u></em>" wfd-invisible="true">
	</p>
	<input type="hidden" name="wpv_login_form" value="on" wfd-invisible="true">
</form>

You can target each element with its CSS class or name attribute. Below some examples:

.login-username {/* style the username label and input */}
.login-username label {/* style the username label */}
.login-username input {/* style the username label */}

I hope this helps. Let me know if you have any questions.

#1624607

My issue is resolved now. Thank you!