XenForo Tutorials

QuickSearch in Header

Submitted by Oxygen, , Thread ID: 16050

Thread Closed
Oxygen
<div class="postbit-usertitle">
Prime
Level:
0
Reputation:
35
Posts:
608
Likes:
62
Credits:
1.47K
23-12-2015, 01:41 PM
#1
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;
[Image: UeTXrZ5.png]

Users browsing this thread: 1 Guest(s)