Varinate 1.
Searchbox und Seitenname, über das Logo.
Seitenbeschreibung unter der Navbar.
öffne die
overall_header.html und suche dieses und schneide es aus.
Code: Alles auswählen
<!-- 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 -->
Füge dieses direkt unter
<div id="wrap" class="wrap"> wieder ein.
öffne die
commons.css und suche
Code: Alles auswählen
.wrap {
border: 1px solid transparent;
border-radius: 8px;
margin: 0 auto;
max-width: 1152px;
min-width: 625px;
padding: 15px;
}
und ändere
margin: 0 auto; in
margin: 23px auto;
öffne die
form.css und finde das.
Code: Alles auswählen
.search-header {
border-radius: 4px;
display: block;
float: right;
margin-right: 5px;
margin-top: 30px;
}
und ändere
margin-top: 30px; in
margin-top: -43px;
Nun sieht das ganze so aus.
- logo2.jpg (57.02 KiB) 17402 mal betrachtet
Hier trenne ich nun den Sitenname von der Seitenbeschreibung und füge den Seitenname auch über dem Logo ein.
Hierzu öffnet man die
overall_header.htm und sucht folgendes:
Code: Alles auswählen
<div class="site-description">
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
Das fügt man dann auch direkt unter
<div id="wrap" class="wrap"> ein, man löscht die Zeile
<p>{SITE_DESCRIPTION}</p>
Man geht dann in die
colours.css ändert dort beliebig den Farbcode. z.B.
#555555
Man öffnet die
common.css und sucht.
Code: Alles auswählen
h1 {
/* Forum name */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-right: 200px;
margin-top: 15px;
font-weight: bold;
font-size: 2em;
}
ändere
margin-top: 15px; in
margin-top: -43px;
Hier müsst ihr noch mal den Code in der common.css verändern
Code: Alles auswählen
.logo-image-wrapper {
background-repeat: no-repeat;
display: block;
margin: 0 auto;
position: relative;
width: 100%;
}
Füge dort hinter
margin: 0 auto; ein
margin: 0 auto -4px; ein.
Füge am Ende der
common.css dieses hinzu.
Code: Alles auswählen
h5 {
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 1.5em;
font-weight: normal;
margin: 0.3em 0;
text-align: center;
}
Code: Alles auswählen
@media (min-width: 701px) and (max-width: 1220px) {
body {
padding: 34px;
}
}
Jetzt müssen wir nur noch die Seitenbeschreibung unter bringen und ich setze diese unter der Navbar.
öffne die
overall_header.html suche dieses
<!-- EVENT overall_header_page_body_before --> und füge darüber
<h5>{SITE_DESCRIPTION}</h5> das ein.
Das ganze sieht nun so aus.
- logo3.jpg (77.8 KiB) 17402 mal betrachtet
Joyce&Luna
