QuickSearch in Header

by Oxygen - 23-12-2015, 01:41 PM
<div class="postbit-usertitle">
Posts:
646
Joined:
Feb 2015
Likes:
50
Credits:
1,222
Reputation:
35
2 Years of Service
#1
OP
Posted: 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;

[Image: UeTXrZ5.png]
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)