Say, if I want the website buttons to resemble to attached picture shape what css would I have to enter?
Website - https://drkarenkassebaum.com/.
Hello @rkassebaum,
Thanks for writing to us.
In case you want to have contact from a button shape as you have mentioned I would suggest you please added this custom CSS code to the global CSS.
.field-wrap.submit-wrap.textbox-wrap input.ninja-forms-field.nf-element {
border-radius: 10px !important;
background-color: #007bff !important;
border: none !important;
color: #ffffff !important;
line-height: 2 !important;
}
.field-wrap.submit-wrap.textbox-wrap input.ninja-forms-field.nf-element:hover{
background-color: #000000 !important;
}
Please feel free to change the background color code and border-radius value as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.
Hope it helps.
Thanks
Thank you. One other quick question? If I wanted to remove the shadow on any wording what would I need to add? Appreciate your help!
One last question. I have a button on this page. https://drkarenkassebaum.com/member-login/. It is oval. What additional CSS would I need to enter to make it match what you gave me already. Thank you!
Say, the css I entered did adjust the buttons which is great. However, I noticed on a smart phone the check boxes for the forms also increased to a larger size. Is it possible to do some css for the checkboxes to put them back to a more normal size?
Hello @rkassebaum,
The .nf-element in the code targets the container of the button. This is why it has affected the checkboxes.
And your button on the member log-in page looks like an oval because it has no width. You can add minimum width element property to set a minimum width for your buttons.
Be advised that Custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.
Best Regards.
I did add the css below but it didn’t change the width of the login button.
.button {
min-width: 200px;
}
Hello @rkassebaum,
The .button is not the class of your button element. By default, the submit button element should be called out like this:
input[type=submit] {
/* Your styling here */
}
Best Regards.
I’ll give that a try. How can I reduce the size of the check boxes on the forms? I reached out to Ninja Forms and they were not able to assist. Frustrating. Any assistance would be greatly appreciated. Thank you.
I’ll give
Hey @rkassebaum,
Just want to let you know that my colleague was already given you a lot of custom CSS which is outside the scope of our theme support. If you wish to continue with custom CSS, I highly recommend checking our One services, where we answer questions outside the scope of our theme support.
Thank you for understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.