Code: Select all
<div class="headerbar" role="banner">
<!-- EVENT overall_header_headerbar_before -->
<div class="inner">
<div id="site-description" class="site-description">
<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
<!-- EVENT overall_header_searchbox_before -->
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box" class="search-box search-header" role="search">
<form action="{U_SEARCH}" method="get" id="search">
<fieldset>
<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
<button class="button button-search" type="submit" title="{L_SEARCH}">
<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
</button>
<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
</a>
{S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
<!-- EVENT overall_header_searchbox_after -->
</div>
<!-- EVENT overall_header_headerbar_after -->
</div>
Code: Select all
<div id="wrap" class="wrap">
Then to move the searchbar to the navigation you can use this extension https://www.phpbb.com/customise/db/exte ... ar_search/ or in the same file find
Code: Select all
<!-- EVENT overall_header_searchbox_before -->
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box" class="search-box search-header" role="search">
<form action="{U_SEARCH}" method="get" id="search">
<fieldset>
<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
<button class="button button-search" type="submit" title="{L_SEARCH}">
<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
</button>
<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
</a>
{S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
<!-- EVENT overall_header_searchbox_after -->
Code: Select all
<li class="rightside responsive-search">
Now to make it look how it should you need edit this css files:
For the header/images
open colours.css
find
Code: Select all
.headerbar, .forumbg {
background-color: #12A3EB;
background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
background-repeat: repeat-x;
}
Code: Select all
.headerbar, .forumbg {
height: 129px;
background-position: bottom right, top left;
background-repeat: no-repeat, no-repeat;
background-image: url(./images/love_right.png), url(./images/love_left.png);
max-width: 1152px;
margin: auto;
}
Now open common.css and find
Code: Select all
.headerbar {
margin-bottom: 4px;
padding: 5px;
border-radius: 7px;
}
Code: Select all
.headerbar {
margin-bottom: 4px;
padding: 15px;
border-radius: 7px;
}
open colours.css find
Code: Select all
.wrap {
background-color: #FFF;
border-color: #E6E9ED;
}
Code: Select all
.wrap {
background-color: #FFF;
border-color: #E6E9ED;
-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
-moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
box-shadow: 0px 0px 10px 0px rgba(50, 50, 150, 0.20);
}
Code: Select all
.wrap {
border: 1px solid transparent;
border-radius: 8px;
margin: 0 auto;
max-width: 1152px;
min-width: 625px;
padding: 15px;
}
Code: Select all
.wrap {
border: 1px solid transparent;
border-radius: 0 0 8px 8px;
margin: -5px auto;
max-width: 1152px;
min-width: 625px;
padding: 15px;
}
That should be it for the extra header you need to tell what you want to be in there