[Resolved] Style forms

[Author]

Posts

[FranklinD4690]

How do I stuy the impout fields on these forms?

hidden link
hidden link
hidden link

as you can see I able to chnge the class in some of them and they look better but I lose the "success message" on the forgot password form for example.

How can I fix that?

[Christian Cox]

Hello, it depends on which style you are trying to apply and whether or not your theme applies other styles you must override with more specific selectors. I don't recommend changing the classes that are applied to the inputs, I recommend overriding those styles as needed with more specific selectors. Is there a specific style you want to apply that you are having trouble with? I can provide some assistance on a case-by-case basis if you tell me which input and which style you want to adjust. Thanks!

[FranklinD4690]

I want all the forms to style to look like the register form.
See attachements.
Also have the abiliy to change the Labels, Names, Messages on those forms.
somethinsg like the expert mode?
can I create those forms the same way?
Or how do I change the style?

[Waqar]

Hi,

Thank you for sharing these details.

To change the labels/text in Toolset's login, forgotten password, and password reset forms, you can use the respective filters, as explained in this reply:
https://toolset.com/forums/topic/there-is-inconsistency-about-labels-of-login-forms/#post-1709869

Unfortunately, there is no easy way to insert custom classes to the input element of these forms, but you can use custom CSS code to apply the unified styles as needed.

For example, you can include the following custom CSS code in your website globally, to make the input fields and buttons in the forgot password form and the reset password form, to show the same as the ones in the registration form:

form[name="forgotpasswordform"] input[type="text"],
form[name="resetpasswordform"] input[type="password"] {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
outline: 0;
}

form[name="forgotpasswordform"] input[type="submit"],
form[name="resetpasswordform"] input[type="submit"] {
color: #ffffff;
border-color: #367bb7;
background-color: #367bb7;
padding: 14px 20px;
font-size: 16px;
line-height: 1.33;
border-radius: 4px;
font-weight: normal;
margin: 3px 0;
min-width: 80px;
transition: all 0.4s ease-in-out 0s;
display: inline-block;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
user-select: none;
}

form[name="forgotpasswordform"] input[type="submit"]:hover,
form[name="forgotpasswordform"] input[type="submit"]:focus,
form[name="resetpasswordform"] input[type="submit"]:hover,
form[name="resetpasswordform"] input[type="submit"]:focus {
background-color: rgba(54,123,183, 0.7);
}

form[name="forgotpasswordform"] input[type="submit"]:active,
form[name="resetpasswordform"] input[type="submit"]:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

Tip: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

regards,
Waqar

[FranklinD4690]

That worked. What abou the login page form?

hidden link

[FranklinD4690]

Thank you I will try this and will update you in a couple of weeks.

[Waqar]

Thanks for the update and glad that it worked.

For the inclusion of the login form, you can update the custom CSS code slightly to:

form[name="forgotpasswordform"] input[type="text"],
form[name="resetpasswordform"] input[type="password"],
form[name="loginform"] input[type="text"],
form[name="loginform"] input[type="password"] {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
outline: 0;
}
 
form[name="forgotpasswordform"] input[type="submit"],
form[name="resetpasswordform"] input[type="submit"],
form[name="loginform"] input[type="submit"] {
color: #ffffff;
border-color: #367bb7;
background-color: #367bb7;
padding: 14px 20px;
font-size: 16px;
line-height: 1.33;
border-radius: 4px;
font-weight: normal;
margin: 3px 0;
min-width: 80px;
transition: all 0.4s ease-in-out 0s;
display: inline-block;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
user-select: none;
}
 
form[name="forgotpasswordform"] input[type="submit"]:hover,
form[name="forgotpasswordform"] input[type="submit"]:focus,
form[name="resetpasswordform"] input[type="submit"]:hover,
form[name="resetpasswordform"] input[type="submit"]:focus,
form[name="loginform"] input[type="submit"]:hover,
form[name="loginform"] input[type="submit"]:focus {
background-color: rgba(54,123,183, 0.7);
}
 
form[name="forgotpasswordform"] input[type="submit"]:active,
form[name="resetpasswordform"] input[type="submit"]:active,
form[name="loginform"] input[type="submit"]:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

Please let me know if you have any follow-up questions, related to this ticket.

For a new question or concern, you're welcome to start a new ticket.