Google Custom Search in Header

[Amin Sabet]

Amin Sabet submitted a new resource:

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...

Read more about this resource...

 

[AndreaMarucci]

It's not possible to replace the XF search box with the google one?

 

[Amin Sabet]

It is possible, but that's not what I wanted to do.

 

[viper357]

Thanks for this, is there a way to hide the search box in responsive view?

 

[Amin Sabet]

I believe it can be done using a media query, but I don't know how.

 

[Wildcat Media]

I don't see that it would be too difficult to locate this inside of the XenForo drop-down search box. I may try this when I have some spare time.

 

[Dan Hawkins]

Thanks for this, is there a way to hide the search box in responsive view?

The way to do this would be to place the code inside a div

<div class="no_mob_display">
dsgdfdhdh
</div>

Then in the style sheet (EXTRA.CSS) add

@media screen and(max-width:600px){
  .no_mob_display {
    visibility: hidden;
    clear: both;
    float: left;
    margin:10pxauto5px20px;
    width:28%;
    display: none;
  }
}

 

[Paul B]

There's an easier way than that - use one of the predefined classes listed at the bottom of the guide here: https://xenforo.com/community/resources/responsive-design.2193/

 

[Dan Hawkins]

There's an easier way than that - use one of the predefined classes listed at the bottom of the guide here: https://xenforo.com/community/resources/responsive-design.2193/

As if!!! - you have a guide for everything that helps multiple things! Awesome stuff Brogan

 

[viper357]

I put this into the ad_header template, don't know if it's the right way to do it but it works for me.

<xen:hook name="ad_header" />
<style type="text/css">
.topbanner {
float: right;
margin-top: 20px;
padding: 5px;
width: 75%;
max-width: 320px;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
.topbanner {
  display: none;
  }

}
</xen:if>
</style>
<div class="topbanner">
*** google stuff
</div>