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
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:
Step 4: Add the following to your EXTRA.css template:
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:
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
You must be registered for see links
and 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:
HTML:
<xen:hook name="ad_header" />
<div class="topbanner">
Your Custom Search code here
</div>Step 4: Add the following to your EXTRA.css template:
CSS:
.topbanner {
float: right;
width: 75%;
max-width: 320px;
}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:
You must be registered for see links