Google Custom Search in Header

Put a small Google Custom Search Bar in your header​

It took me a long time to get this how I wanted it, so I figured I'd post instructions here in case anyone was trying to do the same thing.

What I wanted was a small Google Custom Search bar in my header that would fit there without displacing my logo on any common display type (phone, tablet, desktop). I wanted this to supplement XenForo's search, not to replace it.

Please note that my settings are designed to work well with an 80px wide by 65px high small logo. If you use a bigger logo, you'll need to adjust the settings.

Here's how it looks:

Step 1: Go to cse.google.comand create a custom search for your website.

Step 2: Under the Look and feel -> Customize tab, set the Border color and Background color to match the color of your current header.

Then click Save & Get Code and cope the code provided.

Step 3: Paste that code into your ad_header template with div tags shown below:

You must log in to view
(4 lines)

Step 4: Add the following to your EXTRA.css template:

You must log in to view
(5 lines)

If your logo is more than 80px wide, you'll want to set your max-width and width lower than shown above, or it won't all fit on a 320px wide phone screen.

Step 5: In XenForo Style Properties: Header and Navigation, set Height of Header Logo to 65px. If your logo is more than 65px, increase accordingly, but don't set less than 65px, because the Google Search Bar needs this much space.

Live demo:www.mu-43.com

 

[SSD] New Posts 1.0

Simple Banned 1.0.1