Den Header habe ich jetzt ganz gut hinbekommen nur:
Mit der Searchbox im Bild/Logo - dem Titel über dem Wrap und ohne Beschreibung hat mir der Style eindeutig besser gefallen.
Ausserdem was passiert, wenn ein Forum langen Titel oder lange Beschreibung hat? Wäre es nicht besser, den Titel über dem Wrap? Dann jedoch bleibt die Frage: Wie bekommt man in der Mitte eine weisse Linie, wie in der Navbar sowie die Searchbox über der Linie und die Beschreibung unter der Linie.
Ich versuch auf jeden Fall weiter, den Header mit Searchbox im Bild hinzubekommen. Dann gibt es eben von dem Style zwei Varianten. Auch gut!
So sieht das Ganze jetzt aus:
[ externes Bild ] Danke Anke, Deine Header Version hat mich auf die Lösung gebracht. Danke Lehrling: Dein Video betreffend dem Erstellen eines eigenen Containers, war äusserst hilfreich!
Responsiv ist es in den Mobiltelefonen nur in der Landscape Ansicht! Logo-Bild voll - Navbar sowie top_modern sowie der Forenteil leider nicht ganz. Muss ich auch schauen, ob ich da drauf komme.
Wenn ich jetzt so das Foto anschaue, könnte wohl der Abstand von dem Top Container zum Bild etwas grösser sein - mal sehen.
Gut - 1px korrigiert - geschaut wie es mit längerem Titel und Beschreibung aussieht -
[ externes Bild ]
So sieht es aus, wenn der Titel über dem Wrap ist(fehlt nur noch die Linie dazwischen):
[ externes Bild ] Allerdings besteht bei dieser Variante das Problem, dass es doof aussieht, wenn jemand keine Beschreibung hat.
Ohne Beschreibung wäre der Header ganz gut so
[ externes Bild ]
top_modern.html
Code: Alles auswählen
<div class="top_modern" role="container">
<div class="inner">
<h1>{SITENAME}</h1>
<h5>{SITE_DESCRIPTION}</h5>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
<a id="top" class="top-anchor" accesskey="t"></a>
<!-- EVENT overall_header_searchbox_before -->
<div class="search">
<!-- 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 -->
</div>
<!-- EVENT overall_header_searchbox_after -->
</div>
</div>
style.css
Code: Alles auswählen
.top_modern {
background: #1F1F1F;/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #1f1f1f 0%, #1f1f1f 51%, #484848 75%, #939192 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #1f1f1f 0%,#1f1f1f 51%,#484848 75%,#939192 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #1f1f1f 0%,#1f1f1f 51%,#484848 75%,#939192 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f1f1f', endColorstr='#939192',GradientType=1 ); /* ie6-9 */
padding: 3px 10px;
border-bottom: 1px dashed #A9A9A9;
border-bottom-right-radius: 2px;
border-bottom-left-radius:2px;
border-top: 5px solid #000;
border-left: none;
border-right: none;
margin-top: -3px;
}
Jetzt muss ich weiter Daten aus der color.css in die korrekten Dateien übertragen. Habe gestern leider noch ein paar Schriftprobleme gefunden, das hat wieder Zeit benötigt. Klar könnte ich den Style so jetzt hochladen - aber es ist eben alles in der color.css und sollte schon zuerst korrekt übertragen werden.