Jump to content
House Price Crash Forum

Archived

This topic is now archived and is closed to further replies.

tinker

Google Custom Search Help

Recommended Posts

I know there are a few IT wizards on here, I do the odd community website. I've added a Google Custom search for searching of said website. My problem is the look of the search box. The bounding box is too big... how do I make it as small (height-wise) as the input box or make the bounding box transparent, in both cases so it disappears and doesn't obliterate the background header. Is there a css solution?

Search box.jpg

post-10429-0-05953400-1464382975_thumb.jpg

Share this post


Link to post
Share on other sites

Should be possible.

Have you uploaded the page somewhere?

If you can post or PM a link to that page I'll have a look at it.

Share this post


Link to post
Share on other sites

I know there are a few IT wizards on here, I do the odd community website. I've added a Google Custom search for searching of said website. My problem is the look of the search box. The bounding box is too big... how do I make it as small (height-wise) as the input box or make the bounding box transparent, in both cases so it disappears and doesn't obliterate the background header. Is there a css solution?

Yes of course, that's exactly what CSS is for. The dimensions of the box - and of everything else - are CSS properties.

Bear in mind that CSS is optional. One of the strengths of the web is that what you see doesn't have to be what I see. Makes it accessible to people who can't see at all, or have a text-only browser, or just a very different device to yours. Hence the separation of HTML (content/structure) from CSS (appearance/layout).

Yes, or css with javascript to manipulate the dom.

Javascript for this would add bloat and complexity for no advantage beyond deezyner ego.

Share this post


Link to post
Share on other sites

I can usually work with css but the google custom search box doesn't seem to be that css friendly.

This is all you get:

<script>
(function() {
var cx = '01101234567890:gowxxxxxxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
site id altererd
The css is done at cse.google; want to put some css in my website stylesheet to override it so minimise or make transparent the bounding box.

Share this post


Link to post
Share on other sites

Without looking at the actual page that contains it I can't give you the right answer, but I'd imagined that the way to go is one of these, in this order:

1. Within Google, see if there's a link to customise the output of your search box.

2. Use some custom CSS in your page to override the styles, which relies on knowing the class names, or

3. Add some JavaScript, for example on page load, to manipulate the styling of the element

The Google code you paste in causes the browser to make a call to Google which then returns the form to display.

This is why you can't see what the element names (like the bounding box and the input tag) aren't visible to you.

So you can't get the class names in order to be able to override them in your style sheet.

You can however right click and "Inspect" in, for instance Chrome, or in Internet Explorer press F12 to bring up the "Developer Tools" and then find out what the actual tag names/IDs/classes are then style them.

Answer 1 on this page refers to four styles though I can't say for certain, without looking, that those are indeed the class names to style.

http://stackoverflow.com/questions/20103263/google-custom-search-csev2-help-on-styling

A secondary option involves adding a line to disable the search box, so that you can code your own. That's the second answer on that page.

I did come across more elaborate answers involving hand coding the search box and the results, but those would be my last resort.

Share this post


Link to post
Share on other sites

Everyone here if fuggin clever. I just see the internet for shopping.

Share this post


Link to post
Share on other sites

Javascript for this would add bloat and complexity for no advantage beyond deezyner ego.

See DTMark's answer for why this may be necessary.

Share this post


Link to post
Share on other sites

My instinct is that JavaScript will be needed because any inline styles in the output from the Google script will override anything you put in your style sheet because of order of precedence rules.

Share this post


Link to post
Share on other sites

My instinct is that JavaScript will be needed because any inline styles in the output from the Google script will override anything you put in your style sheet because of order of precedence rules.

Don't know why they (Google) make the box so obtrusive, taking up so much space. I'd like one like the search at the top of the page. Functional and unobtrusive. Shouldn't have to need Javascript when it should be a styling thing!

Share this post


Link to post
Share on other sites

The styling becomes more difficult to effect because you paste in a script which then runs when the page renders in the browser - which goes and fetches the HTML from Google to insert; you don't control that.

This makes it very easy for novices to add to sites, and reduces support queries ("I added a form to my web page and it doesn't work").

It also means that should Google want to change the code at some point (an example: add a "language" drop down to implement multi-language search) they change it in one place and that then changes every website that uses it, rather than having to email every site owner to tell them that they need to make changes at their end and then, when they fail to do so, ending up with more support questions.

Share this post


Link to post
Share on other sites

If you don't like what Google do just create a form that posts to Google's server

<form method="http://www.google.com/custom'>http://www.google.com/custom" target="google_window">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif"
border="0" alt="Google">
</img></a><br/>
<input type="hidden" name="domains" value="www.XXXXXXX.com"></input>
<input type="text" name="q" size="20" maxlength="255" value=""></input>
<input type="hidden" name="sitesearch" value="www.XXXXXXX.com" checked="checked"></input>
<input type="submit" name="sa" value="Search"></input>
<input type="hidden" name="client" value="pub-5836935089356934"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="ISO-8859-1"></input>
<input type="hidden" name="oe" value="ISO-8859-1"></input>
<input type="hidden" name="safe" value="active"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;"></input>
<input type="hidden" name="hl" value="en"></input>
</form>

Share this post


Link to post
Share on other sites

If you don't like what Google do just create a form that posts to Google's server

Thanks, some of it is above my head but will have a play with it.

Share this post


Link to post
Share on other sites

Excellent topic.

I always enjoy watching a bunch of software geeks having a pissing-contest live on the t'internet...

;)

XYY

Share this post


Link to post
Share on other sites

Excellent topic.

I always enjoy watching a bunch of software geeks having a pissing-contest live on the t'internet...

;)

Damn. Never figured out how to do that. Is there some USB device I can pick up in pcworld to piss online?

(if you treat it as a game, I think davidg kind-of posted a spoiler yesterday. I expect googling the fields he uses would find actual documentation).

Share this post


Link to post
Share on other sites

Excellent topic.

I always enjoy watching a bunch of software geeks having a pissing-contest live on the t'internet...

;)

XYY

No it's willy waving....

My code is better than your code sort of thing......

Still I read the replies for learning value as I do a bit of coding. TBH the form makes more sense to me than a java/css solution. I can understand the code in the form.

If it was me I would be looking for a wordpress widget to solve it..

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • The Prime Minister stated that there were three Brexit options available to the UK:   102 members have voted

    1. 1. Which of the Prime Minister's options would you choose?


      • Leave with the negotiated deal
      • Remain
      • Leave with no deal

    Please sign in or register to vote in this poll. View topic


×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.