• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Google Custom Search in Header

Amin Sabet

Well-known member
#1
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...
 
#7
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

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

Then in the style sheet (EXTRA.CSS) add

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

viper357

Active member
#10
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. :p

Code:
<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>