As you can see towards the bottom of the page I included, the buttons on forms tend to blend in with the background. How can I style them? Specifically on the included page, it's the "Preview" button.
I'd like to make them larger and change the color to my branding style.
This worked for that specific button, but all buttons for the Job Manager and Gravity Forms have the same issue. Is there a way to change them across-the-board?
Specifics, I'm looking to update:
On the Job Manager side, the Edit Listing and Submit Listing buttons.
For Gravity Forms, the Next, Select Files, Previous and Submit buttons.
As you can see towards the bottom of the page I included, the buttons on forms tend to blend in with the background. How can I style them? Specifically on the included page, it's the "Preview" button.
I'd like to make them larger and change the color to my branding style.
Thank you
Hi,
Please add more this code to Customize > Custom CSS to do that:
.job-manager-form fieldset input.input-text { border: 1px solid #dedede; padding: 8px 12px; } .job-manager-form input[type="submit"]{ display: inline-block; border: none; padding: 8px 25px; background: #ff9117; cursor: pointer; font-size: 15px; text-transform: uppercase; color: #fff; font-weight: 500; }Change color code #ff9117 to any color code you want.
Best Regards,
PenciDesign
This worked for that specific button, but all buttons for the Job Manager and Gravity Forms have the same issue. Is there a way to change them across-the-board?
Specifics, I'm looking to update:
On the Job Manager side, the Edit Listing and Submit Listing buttons.
For Gravity Forms, the Next, Select Files, Previous and Submit buttons.
Hi,
Please try replace the code I sent you to this code:
.job-manager-form fieldset input.input-text { border: 1px solid #dedede; padding: 8px 12px; } .job-manager-form input[type="submit"], .job_listing_preview_title .button, .job_listing_preview_title .button{ display: inline-block;border:none; padding: 8px 25px; background: #ff9117; cursor: pointer; font-size: 15px; text-transform: uppercase; color: #fff; font-weight: 500; } ul.job-listing-meta.meta li { list-style: none !important; } .single_job_listing .meta li:before{ background: none !important; }Best Regards,
PenciDesign
This works for the Job Manager, but what about the Gravity Forms.
For Gravity Forms, the Next, Select Files, Previous and Submit buttons are all have the same issue.
Hi,
Can you show me a link for Gravity Forms issues?
Best Regards,
PenciDesign
Here's a link to a couple forms I use with the issue:
http://laxrecords.com/contact-me/player-of-the-week/
http://laxrecords.com/player-to-watch-submission/
You'll see the Next button at the bottom, but all the Gravity Forms buttons are the same. When you go to the next pages, you'll see those as well.
Hi,
Please try replace the code I sent you to this code:
.job-manager-form fieldset input.input-text, .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { border: 1px solid #dedede; padding: 8px 12px; } .job-manager-form input[type="submit"], .job_listing_preview_title .button, .job_listing_preview_title .button, .gform_wrapper .gform_page_footer .button.gform_next_button, .gform_wrapper .gform_page_footer .button.gform_previous_button, .gform_wrapper .gform_page_footer .button.gform_button, .gform_wrapper .gform_page_footer .button.gform_next_button{ display: inline-block;border:none; padding: 8px 25px; background: #ff9117; cursor: pointer; font-size: 15px; text-transform: uppercase; color: #fff; font-weight: 500; } ul.job-listing-meta.meta li { list-style: none !important; } .single_job_listing .meta li:before{ background: none !important; }Best Regards,
PenciDesign
This seems to have done the trick. Thank you!