You simply put the changes in Custom CSS – if the theme does not have a custom CSS option, use a plugin to add custom CSS. A browser tool like Firebug should help you with the CSS to ADD to the custom CSS to make changes on your site (it makes no difference whether those are plugin styles or theme styles – they CAN be modified in custom CSS if you use the correct and specific enough CSS selectors).
Thanks for replying.
I am still a bit confused how the custom CSS section works. I understand that you can embed your own custom CSS into this section, but how would I go about customizing CSS code from a plugin? I would obviously have to copy and paste that code into the custom CSS area, right?
With that being said, the big issue that I am having is identifying which CSS file contains the button that I need to update/customize.
Thoughts?
Are you using a browser tool like Firebug? It shows you all the CSS code for any element on a page – no matter where that code is coming from – so then copy/paste that section of code to custom CSS and make the changes there.
If you are adding a new element or CSS selectors entirely, you would need to ADD the new CSS to custom CSS.
It’s not possible to be much more specific without seeing what you are trying to do on an actual site.
Below is the CSS code when I inspect the element on the Constant Contact form.
I’ve bolded the line that highlights the Submit button.
What do I do from here?
<div>
<input type="hidden" value="8" name="cc_newsletter[]"></input>
<input id="cc_referral_url" type="hidden" value="http%3A%2F%2Fjaymichael.co%2F" name="cc_referral_url"></input>
<input id="cc_redirect_url" type="hidden" value="" name="cc_redirect_url">
<strong></input><input class="button submit" type="submit" value="Sign Up" name="constant-contact-signup-submit"></strong>
</input><input type="hidden" value="constant_contact_api_widget-2" name="uniqueformid"></input>
</div>
It’s really not possible to help with CSS without seeing a live site.
Okay, now I can see the HTML code – and use that to find the CSS selectors for that element – this should work – you need to add the CSS styles for the button you’ve created – remove the red background color line – I just put that there to test/show that the code is working:
#constant-contact-signup input.submit {
background-color: red;
}
So I literally copy and paste this in to my Custom CSS and change the background-color to my url(www.jaymichael.co/image.png) ?
Yes, but you need to use the correct CSS for a background image –
http://www.w3schools.com/css/css_background.asp
Also make sure you use a valid (full) file path to that image.
#constant-contact-signup input.submit {
background-image:url('http://jaymichael.co/wp-content/uploads/2013/08/Sign-up.png');
}
I just tried this and it did not work. It did change the button, but not to the image I embedded.
Where did you put the CSS? I don’t see that on your site.
It’s there.
I copy and pasted the code (from above) and put it into the my Custom CSS section and clicked “Save Stylesheet.”
I can see it there … now I just need to figure out how to scale is appropriately
I have embedded the following code in, but it is not increase the size of the actually button … only the image:
#constant-contact-signup input.submit {
background-image: url('http://jaymichael.co/wp-content/uploads/2013/08/Sign-up.png');
background-size: 62px 22px;
background-repeat: no-repeat;
}
Plus, I don’t want it to be beveled. I want it to appear like the button on my Contact Page:
http://jaymichael.co/contact/#sthash.phM8obqq.dpbs
