QuickSearch in Header

[BassMan]

BassMan submitted a new resource:

QuickSearch in Header - Move QuickSearch to header and style it

Tiny little "guide" how to move QuickSearch to header and style it.

*I wanted this for my forum and thought it might help someone. That's why I publish this.*

Put the code in EXTRA.css:

/* START - QuickSearch in Header */
#QuickSearch {
top: -103px !important;
background-color: transparent !important;
}

#QuickSearch.active {
background: #176093; /* Old browsers */
background: -moz-linear-gradient(top,  #176093 0%, #60abf8 39%, #ffffff 80%); /* FF3.6+ */
background:...

Read more about this resource...

 

[DRE]

screenshot for mobile plze

 

[BassMan]

screenshot for mobile plze

Oh, I'm using responsive design, so nothing really changed there, except the active quicksearch is positioned in the middle of logo and down (in my mobile look). Looks ok to me.

 

[BassMan]

BassMan updated QuickSearch in Header with a new update entry:

Fix for responsive design

Now it pop-up quicksearch like here on XF, when viewing it on mobile.

Read the rest of this update entry...

 

[BassMan]

@DRE, I reconsider it and make it look like here on XF when viewing on mobile device.

 

[TsinJu]

Side Note: the !important Tag is not needed.

 

[BassMan]

Side Note: the !important Tag is not needed.

Thank you. Removed.

 

[Adam Howard]

@BassMan this works nicely.

 

[BassMan]

@BassMan this works nicely.

Thanks, Adam!

 

[viper357]

Thanks for this.

Is there a way to make the background transparent? See in the pic below the extra white bits on the left and right look a bit strange. Thanks.

 

[BassMan]

Forum URL would be a great help so I can check the code on your forum.

 

[viper357]

Forum URL would be a great help so I can check the code on your forum.

http://www.marineaquariumsa.com/

 

[BassMan]

Add this to your EXTRA.css template:

#QuickSearch .formPopup {
  background-color: transparent !important;
}

 

[viper357]

Excellent, works great. Thank you.