Search bar in header

[Luke]

Does anyone know of a way to get the custom google search bar in to the header of our network?

I have seen plenty of advice on how to get google analytics, slideshows and so on in there but none about the search bar!?

I have my logo on the left hand side of the pahe and would love a search bar on the right!!?

Please help!

Luke

[Eric Suesz]

You can use Google Custom Search, but I'm not sure that you can put it in the header area. Maybe someone can help you float it in the spot you'd like using CSS, but I'm not sure I could figure that out myself. 

[SweetPotato]

My guess would to put it in an instant ad box either above or below the header and then move that box about with some CSS

for example, using totally made up values and completely untested as I'm on my over-priced but warm to hold Apple tablet
......
#xg_ad_above_header{
position:relative;
top:20px;
Width:400px;
}

Below header is
#xg_ad_below_header

You get the idea.

Be warned, I think google custom search usings some script, and for some annoying reason Ning text editors have once again started wrapping code in text boxes in paragrapgh tags, giving you unwanted spacing issues. On my network at least.

Cheers

SP

[Luke]

Hi SP,

That works great thank you very much. The only problem I have now is that I have a space above the header!? Can I pad that somehow to narrow the gap?

Loving your work on the super duper tablet that starts with an i.

Luke

[SweetPotato]

Best bet to mitigate this would be some negative margin

[Luke]

I have tried that but I can only make the header thinner and cant bring the top of the header up the page?

This is the code which is obviously wrong!!

#xg_masthead {height:75px!important;}

[SweetPotato]

Is it live? What's your URL?

[Luke]

Which is exactly what you have put above....!... sorry.... I didn't read the last bit!

[Ron]

Hi Luke,

You can use the 'on the fly' version of Google Custom Search. Attached is a basic workaround which adds the feature in your Ning bar. Just insert the code in your Custom Code Box (My Network > Custom Code).

Screen cap below:

This should get you started.

[Ron]

..or use this code for the Ning jquery built-in if you're having trouble with the above attached.

Attachment: Google Custom Search (Ning bar)

[Emmanuel Ace]

This could be easily if Ning gives each added text box different "id" like Tabs

All you had to do in the custom css was

textboxid{

marging-top: whatever px;

display: inline;

}

[Luke]

Only using it in test network at the moment Here is a screen shot

Please ignore the horrific look of the site x

[Luke]

My site is called www.sogolfnet.com but it is a private network unfortunately!