QuickSearch in Header

Oxygen · 23-12-2015, 01:41 PM

QuickSearch in Header
Not my content; Don't come to me because of links not working.

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

*I wanted this for my forum to highlight the search engine and thought it might help someone. That's why I publish this.*

Put the code inEXTRA.css:

Code:
/* 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: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#176093), color-stop(39%,#60abf8), color-stop(80%,#ffffff)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #176093 0%,#60abf8 39%,#ffffff 80%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #176093 0%,#60abf8 39%,#ffffff 80%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #176093 0%,#60abf8 39%,#ffffff 80%); /* IE10+ */
 background: linear-gradient(to bottom, #176093 0%,#60abf8 39%,#ffffff 80%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#176093', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
 }
 .formPopup {
 background-color: transparent !important;
 }
 
 <xen:if is="@enableResponsive">
 @media (max-width:@maxResponsiveMediumWidth)
 {
 .Responsive #QuickSearch
 {
 top: -18px !important;
 }
 }
 </xen:if>
 /* END - QuickSearch in Header */

The result is:
[Image: b1815002d1ce60411c1404389ee018db.png]

... and when active:
[Image: c39e72be00f90a412bd9db2ab5fb7db7.png]

That's it.

To suit in your header just adjust the number here:

Code:
top: -103px !important;

QuickSearch in Header

Submitted by Oxygen, 23-12-2015, 01:41 PM, Thread ID: 16050