I am using theme x.
I am using the theme’s default forms for register / login (theme x, icon). As you can see its not looking good at all. How do I change the box of the fields (username, password, first name etc.) and the button itself? Its a bit thin. I know this is css but not sure how to do it with the theme. Also how do I change the font for these fields?
I will provde urls so you can see.
Hi there,
Yes, you will need to write some custom CSS in order to style the form element’s further.
Would you mind specifying how do you want the form fields to look like? Although we won’t be able to provide the full custom CSS, we can provide some suggestions to get your started.
Thank you!
Thank you for you reply. I will send examples in a secure note.
sent in a secure note.
Hi there,
Please try this code in the Global CSS:
select, textarea, input[type="text"], input[type="username"], input[type="password"], input[type="Your Name"], input[type="account email"], input[type="Payment Email"], input[type="email"], input[type="enter the text of the captcha"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
line-height: normal;
min-height: 30px;
padding: 7px 15px;
margin: 0!important;
box-shadow: none!important;
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
-o-box-shadow: none!important;
background-color: #ffffff !important;
border: 1px solid #c7c7c7;
border-color: #c7c7c7;
border-radius: 50px !important;
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px !important;
-o-border-radius: 50px !important;
color: #242424;
font-family: Helvetica, sans-serif, 'Trebuchet MS';
font-size: 14px;
font-weight: normal;
font-style: normal;
text-decoration: none;
height: 33px;
}
label {
font-weight: bold;
color: #919191;
font-family: Helvetica, sans-serif, 'Trebuchet MS';
font-size: 16px;
cursor: pointer;
margin: 0px !important;
line-height: 28px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
As for the button, you can set it’s styling in X > Theme Options > Buttons.
Hope this helps.
Thank you so much!!! This is almost perfect. I am not sure which part to edit, I need the text itself (like username, password) to be bolder as well as the pill itself to be bolder where the user writes his name, password etc.Also to making the writing section longer. I did have a look in buttons but I could not find where to make the buttons thicker.
Hi There,
On the CSS code provided by Jade above, you’ll see font-weight: bold; under the label {} block, please update that to font-weight: bold !important;
Also, on the CSS code provided above you’ll see font-weight: normal; please update that to font-weight: bold;
Again on the CSS code provided above, under height: 33px;, please add width: 50%; or adjust the 50% how long do you want the field to be.
You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial
Hope it helps,
Cheers!
Thank you for your reply. I implemented the above, there are 2 issues with the above:
The button is too thin, how to I make it bolder?
The apply button for the coupon doesnt seem to change, how do I fix it?
Thank in advance.
Hi There,
Please also add this custom CSS:
button#rcp_apply_discount {
line-height: normal;
min-height: 30px;
padding: 7px 15px;
margin: 0!important;
box-shadow: none!important;
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
-o-box-shadow: none!important;
background-color: #ffffff !important;
border: 1px solid #c7c7c7;
border-color: rgb(14,125,162);
border-radius: 50px !important;
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px !important;
-o-border-radius: 50px !important;
color: rgb(14,125,162);
font-family: Helvetica, sans-serif, 'Trebuchet MS';
font-size: 14px;
font-weight: normal;
font-style: normal;
text-decoration: none;
height: 40px;
}
input#rcp_submit {
padding: 15px 25px;
}
Hope it helps 
Thank you for your help, that fixed it! I still have the issue with the default theme’s button. I make it bolder in the apply button but I dont know how to do it for all the default theme;s buttons. Pleas help.
Hi @Bark201,
In that case, please change that CSS to this
input[type="submit"], button, .x-btn {
padding: 15px 25px;
line-height: normal;
min-height: 30px;
padding: 7px 15px;
margin: 0!important;
box-shadow: none!important;
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
-o-box-shadow: none!important;
background-color: #ffffff !important;
border: 1px solid #c7c7c7;
border-color: rgb(14,125,162);
border-radius: 50px !important;
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px !important;
-o-border-radius: 50px !important;
color: rgb(14,125,162);
font-family: Helvetica,sans-serif,'Trebuchet MS';
font-size: 16px;
font-weight: bold;
font-style: normal;
text-decoration: none;
height: 40px;
text-shadow: none;
}
As for the password message, please add this CSS as well
#rcp_password_strength_meter {
max-width: 735px;
}
Thanks!
Thank you, the password strength was fixed. The register button was also fixed but the text ‘register’ in side the button dropped down. How do I center the text inside the button? I really appreciate all your help with this.
Hello @Bark201,
To center the text in the submit button, please make use of this code:
p#rcp_submit_wrap input#rcp_submit {
padding: 10px 25px;
}
Please let us know how it goes.
Thank you for all your help and support, that issue was resolved.
You’re welcome!
We’re glad we were able to help you out.
I noticed something was affected by that above codes. I am using the buttons for mobile menu and look what happened (secure note). Please help.
Please read the above first.
This script caused this issue:
input[type=“submit”], button, .x-btn {
padding: 15px 25px;
line-height: normal;
min-height: 30px;
padding: 7px 15px;
margin: 0!important;
box-shadow: none!important;
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
-o-box-shadow: none!important;
background-color: #ffffff !important;
border: 1px solid #c7c7c7;
border-color: rgb(14,125,162);
border-radius: 50px !important;
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px !important;
-o-border-radius: 50px !important;
color: rgb(14,125,162);
font-family: Helvetica,sans-serif,‘Trebuchet MS’;
font-size: 16px;
font-weight: bold;
font-style: normal;
text-decoration: none;
height: 40px;
text-shadow: none;
}
I removed the button from the script and now its working but the apply button is the registration page is back to what it was and not like the rest of the buttons (pill).
Hi There,
Here is the custom CSS for the apply button:
body button#rcp_apply_discount {
line-height: normal;
min-height: 30px;
padding: 7px 15px;
margin: 0!important;
box-shadow: none!important;
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
-o-box-shadow: none!important;
background-color: #ffffff !important;
border: 1px solid #c7c7c7;
border-color: rgb(14,125,162);
border-radius: 50px !important;
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px !important;
-o-border-radius: 50px !important;
color: rgb(14,125,162);
font-family: Helvetica, sans-serif, 'Trebuchet MS';
font-size: 14px;
font-weight: normal;
font-style: normal;
text-decoration: none;
height: 40px;
}
To make all the buttons bolder, please add this custom CSS:
body input[type="submit"],
body .x-btn,
body button {
padding: 15px 25px !important;
}
Let us know how it goes!
Thank you very much for all your help, i helped me a lot!! There is one last thing I am stuck with (css again). I am trying to lift a certain section of the page higher (padding I guess) and it wont budget. I am sending a url and a screenshot in a secure note. Thank you again for all your help with this.
Hi,
To make it higher, you can add the code below in Theme Options > CSS
#mm_checkout_form .mm_right_column h5 {
margin-top:0;
}
Hope that helps