adsence search button pushed down

Hi guys, I am traing to implement Google search bar on a page with visual composer but the “search” button is pushed down no matter how i implement it. how can I make it be at the right?

Also I would like to get rid of the little grey lines if possible
Thanks again!

You would need to add CSS for the class being added by Google. Nothing to do with the theme.

You should look at the docs on styling the Google search elements. I just had to do this on our business site. Bit of a pain. Basically you have to create a class which sets the width of the search box, and then add that class to the box element for the search box.

It think this is because of the responsive setting of visual composer, naturally Google search has the button at the right and i also have the search box set to be short but VS is enlarging it to fit the whole column. Not sure i understand what you propose, can you explain in more detail?

Thanks a lot!

also do you know how to get rid of the gray lines that separate the columns?

1) you would need to look at rendered page, find the class for the box, then add to custom CSS with the !important tag. On our business site we were not using WP, but using Bootstrap 2, and so ran into same issue with the default form CSS. Took a bunch of tries to figure out how to get it to be short, and search button at right. If I had the trick for this theme handy, would totally share it.

2) I think you can change the lines for the theme from grey to white to “remove” them as the simplest fix.

I think what we ended up doing for the search box was setting a fixed width like 200px or something.

Thanks a lot, i am trying to do it, Looking forward to suggestions from the theme guys as well. maybe there is an easier way….

Well, since it’s not part of the theme, and the CSS classes are part of Google’s code; the only way to “over ride” that is by putting some kind of CSS in the custom CSS box. Kind of up to you to solve, but “official” support might offer to write code for you.

I identified the cclass as wpb_wrapper , I can manage to add a custom css for i am not sure what to add so the button is not pushed down….:( any ideas?

Thanks again for the help!

In our case, once we got rid of the width of the box, the button moved up to right. We might have removed the line break if one was added; been a couple of months since I suffered through that 🙂

I also gave up on the nice ‘overlay’ search results option and ended up with the “normal page of results with our logo” option. Trying to style the overlay results was almost impossible to sort out and Google’s docs are somewhat worthless.

Keep messing with it…
do you have link to a post/page where you’re using that? I might be able to take a peek once I deal with some client stuff.

this is the code we ended up with if curious;


<form class="form" action="https://www.google.com/cse" id="cse-search-box">
<fieldset>
<input type="hidden" name="cx" value="XXXXXXXX"/>
<input type="text" name="q" placeholder=" Search My Site Name Here" style="height:1.8em;width:10.0em;padding:0;margin:0;"/>
<button type="submit" name="sa" class="btn btn-primary disabled" value="Search">Search</button>
</fieldset>
</form>


as you can see, I think we gave up and finally just decided to hack the code by doing bad practice of putting the style inline. We’re using bootstrap 2 on our main business site, hence the existing classes for buttons.

Thank again! I am still trying to do it. this is my site i case you have time to take a look:

http://bnearme.com/fast-food-near-me/

I will keep playing with it in the mean while

You know. I think I get the stupid prize (face palm!).

For some reason I thought you were trying to implement Google’s custom search for YOUR site, and not the adsense affiliate search box.

Doh. Two totally different things entirely, even though your title for support CLEARLY says that.

Wow, that’s twice this week I was clueless on the reply. Definitely time for a vacation.

Sorry about that …. I have no clue how to style the affiliate/adsense box, as that loads from javascript provided by Google. Only way to do that with your own CSS is to view the page source, grab the rendered code and then hack that, and then place that on your page in place of their javascript.

Or, do what you were trying to do with the CSS you’ve found. Hitting F12 in Chrome and then looking at that code and styles might help you track that stupid box code down too.

Sorry I have my dunce cap on. I am really multi-tasking and popping in here while doing two things at once on two big 24-inch Apple LED Cinema displays.

Anyway… hope I at least stimulated the neurons, even if my solutions were completely unrelated to what you’re doing, other than being goofy Googleverse CSS.

hi, thanks again! No need to be upset. You helped me anyways. I hope the theme support give me a hand on this one because adsence code is ok and can’t be modified (becuase of TOS) , in my other sites work just fine. I am pretty sure this is happening because of visual composer.

anyways i will keep researching…..

S

hi Lucian, thanks a lot, that solved the issue of the button position, but there is two other issues

1) the border of the rectangle is lost and is hard to tell there is there a search , how can i make it visible again?

2) how do i get rid of this grey lines:
http://bnearme.com/wp-content/uploads/2014/12/capture-2.jpg

Thanks again!!!
s

Hi lucian! That did it, This is the reason I bought your theme, Your support absolutely kick ass!

Thanks again!!

S

one last questions. will this apllay to newspaper too? in case not, what i will need there?

Thanks!

hi there I added a new post today

http://bnearme.com/asian-restaurants-near-me/

and i see changes do not aplay to it, the other one is still ok, what can we do?

Thanks again!

Be sure to clear all your caching and reload page if it “suddenly” stopped working.

Also note the CSS provided looks like it applied to a post number specifically and not all pages/posts, .page-id-30 — so you obviously need to look at that for the actual page/post ID you just published. If your post you just published had ID of 76, then I don’t think the page id 30 would work.

Unless I’m mistaken on that 🙂

yes I am wandering how can a set it up to work for “all pages”, ideas?

Thanks!

Perfect! Thanks again for all your efforts!

Have a good day!