Executive Pro – Help With Google Custom Search Box

[tcwiggins03]

If you look at this test page I set up http://theacnezone.com/test-3/ you can see the google custom search bar in my sidebar has inherited the "Search" button's styling from the Executive Pro theme, at least I assume that's correct, I'm pretty new to css and styling in general.

You can see that the button is showing up beneath the search box and to the left as opposed to in line with the search box and to the right.

This is what the default search box should look like

So my question is, how can I prevent the search button from inheriting the styling from the theme without messing up any of the other various buttons throughout my site that are also using the same styling as this search button?

[stinkykong]

I don't have a simple answer. You may be in for some research depending on exactly you want to replicate the example you offer here. I see a different background image inside the search box that you'll have to somehow change, if that's what you want. Currently you're this image from google which is more mono-chromatic.

http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif

Regarding other aspects such as the width of the searchbox which is currently 100% and other CSS, I would use a simple plugin called Zig Widget Class which adds the ability to add a custom class name to each widget box in your admin area. Come up with a new class of any name you choose such as 'google-my-site' and add rules to your style.css file such as

.google-my-site input, .google-my-site select, .google-my-site textarea { width: 70%}
.google-my-site input[type="submit"], .google-my-site button {width: 30%}

If you use tools such as Firebug for Firefox or Chrome's developer toolbox, you can right click on your page elements and see the rules that govern them...then recreate those rules with the custom class you created to make all the CSS changes you need.

---

Web Design by Websentia Web Services
http://websentia.com

[Author]

Posts