Submit and Text Field Colors

[darkecho]

Hello,

I’ve been trying to change the colors of the submit buttons and text field but as it seems they’re somehow related to the theme color, also I was trying to set a “focus” option on the search or on other text fields from the contact form and change their styles as well but the changes doesn’t apply on the theme, any tip how can I modify them?

Thanks

Topic

[Jason Bobich]

Hello,

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

input, textarea { ... }
input:focus, textarea:focus { ... }
input[type="submit"]{ ... }
input[type="submit"]:hover { ... }

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[darkecho]

Yes that’s exactly what I was trying but with no results. I do the changes but I don’t know why they actually dont apply to the theme!

[Jason Bobich]

Can you please provide a link to what you’re doing?

[darkecho]

Hello, I don’t really have a link I can provide yet, but it seems that the colors are fixed from the chosen “Content Color” theme option. I’ve tried to change the colors.css but I see no changes. (I don’t work on the child theme)

Thanks

[Jason Bobich]

Yup, I have no way of knowing what you’ve setup on your site, which is why it’s always helpful to provide a link when asking for support.

The basic selectors I’ve pointed you to would assume you have the default light color style. However, to find what is effecting the area you want to change for your specific setup, you’d simply use your CSS inspector as I’ve instructed. This is how you can find any CSS edit you want to make.

In general, you shouldn’t ever be changing any files of the theme directly; there’s simply no need, and you’re setting your self up for problems if you ever want to update the theme in the future. If you find something in colors.css (for example) that you want to change, simply copy it to your Custom CSS option or your Child theme’s CSS and it will be overridden.

In this case, colors.css doesn’t actually get used; it’s the uncompressed version of colors.min.css, which is what gets used. I know you just want a quick fix, but I’d really just take a moment, read what I posted to you above, process it a bit, and also checkout the child theme video I linked you to.

Also, please remember that support does not include customizations. — http://support.themeblvd.com/help/#terms

[Author]

Replies