Tell us what you are trying to do?
I would like to be able to style the login form. to match the registration form on my site.
Registration Form with Correct Styling: hidden link
Login Form with No Styling: hidden link
I have 2 questions:
1. Where exactly would I place the CSS to style the Login Form?
2. Can you give me exact CSS to at least style the form to and buttons to be similar to the Registration Form above and I can make further modifications as needed?
Is there any documentation that you are following?
https://toolset.com/forums/topic/need-help-to-style-the-wpv-login-form-shortcode/
https://codex.wordpress.org/Customizing_the_Login_Form
https://toolset.com/forums/topic/wpv-login-form-dosent-use-same-css-as-other-cred-form/
https://toolset.com/forums/topic/wpv-login-form-styling/
What is the link to your site?
hidden link
We use the native WordPress LogIn for our Toolset Login ShortCodes.
Styling and alterations are hence made with the same exact methods as shown for the Core Login Form:
https://codex.wordpress.org/Customizing_the_Login_Form
For reference, I added details to a previous identical question, here:
https://toolset.com/forums/topic/change-login-forms-label/
To customize the error handling, there is as well a solved thread here: https://toolset.com/forums/topic/wpv_filter_override_auth_errors-creating-issue-for-success-messages/
CSS can be added anywhere on your site where it can apply, for example in your theme's CSS or a Content Template's CSS or Layout CSS, depending on where you need it.
We can unfortunately not provide CSS, HTML, JS or PHP that is ready to use. We generally can give examples of how to use our API and WordPress/PHP, CSS and HTML is something we do not actively support as it's required knowledge to use Toolset.
The main difference between hidden link and hidden link is that the first (Toolset Form) is using Bootstrap, while the WordPress login form does not.
That is the CSS you'd need to add to the Login form. You can usually use the Browser console to find CSS applied or find it in the source if required.
Hi Beda,
Since I have seen many people ask the same question about styling the following forms, I decided to just paste the CSS that I inserted into my child theme's style.css file for future reference. It is not perfect but it will give people a starting point because the wordpress links and other links provided are not too helpful for people who are not comfortable with CSS - particularly if they have no idea where to start.
This CSS code relates to styling the following wpv forms:
Form 1: [wpv-login-form]
Form 2: [wpv-forgot-password]
Form 3: [wpv-reset-password]
I was thinking that since Toolset relies so heavily on CSS styling, it would be great if the support centre had an area with css code snippets along with screen captures or links to the end result because sometimes seeing a working example and manipulating working code is easier than poring through generic documentation and hunting through code inspector.
If you see any errors your feedback would be greatly appreciated!
/* **************************************************************************** */
/* Form 1: wpv-login-form */
/* Style the wpv-login-form - to display items horizontally */
#loginform {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/* Add some margins for each label */
#loginform label {
margin: 5px 10px 5px 0;
}
/* Style the input fields */
#loginform input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {
#loginform input {
margin: 10px 0;
}
#loginform {
flex-direction: column;
align-items: stretch;
}
}
/* Form 2: wpv-forgot-password */
/* Style the wpv-forgot-password form */
#forgotpasswordform {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/* Add some margins for each label */
#forgotpasswordform label {
margin: 5px 10px 5px 0;
}
/* Style the input fields */
#forgotpasswordform input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {
#forgotpasswordform input {
margin: 10px 0;
}
#forgotpasswordform {
flex-direction: column;
align-items: stretch;
}
}
/* Form 3: wpv-reset-password */
/* Style the wpv-reset-password form - to display items horizontally */
#resetpasswordform {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/* Add some margins for each label */
#resetpasswordform label {
margin: 5px 10px 5px 0;
}
/* Style the input fields */
#resetpasswordform input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {
#resetpasswordform input {
margin: 10px 0;
}
#resetpasswordform {
flex-direction: column;
align-items: stretch;
}
}
/* WP Login Form Family Related Submit Button and Text Field Styling */
/* Submit Button Styles for Login, Lost, and Reset Password Forms */
#wp-submit {
padding: 10px 20px;
margin-bottom: 20px !important;
border-radius: 4px !important;
background-color: #0033A0 !important;
border: 1px solid #ddd;
color: white;
}
#wp-submit:hover {
background-color: #707070 !important;
}
/* Text Field Typing Colour */
#wp-submit input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
padding: 15px;
border: 1px solid #0060AC;
color: #0060AC;
background-color: #fff;
}
/* Password Mask Text Colour */
input.text:focus, input.title:focus, input[type=text]:focus, select:focus, textarea:focus {
color: #0060AC;
}
/* Form Input Placeholder Text Colour*/
#wp-submit::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #0060AC !important;
opacity: 1 !important; /* Firefox */
}
#wp-submit:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #0060AC !important;
}
#wp-submit::-ms-input-placeholder { /* Microsoft Edge */
color: #0060AC !important;
}
My issue is resolved now. Thank you!
Hey Andrew, this is great, thank you for sharing your solution with other users.
I'm fond of your idea to have a section with code examples also for styling.
You know we have hidden link, which is a place with many snippets related to functionality.
I'll ask our Support Management if there are plans to add something like a "Code snippets Live Editor", where we could share such styling examples, eventually.
I'll let you know in case I get some good news.
Related to the particular ShortCode I actually think maybe it'd be better if you suggest to our Product Management to allow more direct styling when inserting those ShortCodes?
You are right, Toolset lacks sometimes a bit of the "simplest", here and there. While you can create a powerful Query in minutes you then still need to spend a considerable amount of time on styling, something now in the Posts is solved with Gutenberg but not for searches, or such ShortCodes like the Login ShortCode.
You can reach our Product Management directly here https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/.
Thank you for sharing the solution you found, I saw no obvious errors in the CSS.
