Hi, bevor du Anpassungen vornimmst, sichere bitte deine jeweiligen Verzeichnisse. Die von dir angedachte Formatierung wird nicht zweifelsfrei funktionieren, da die responsiven/adaptiven Layouts relevant sind. Um eine referenzierte Hintergrundgrafik zu verlinken, würde ich momentan jenen Weg gehen, der in dem Design oberhalb des Logos eine Linkmöglichkeit für die referenzierte Hintergrundgrafik ermöglicht. Teste bitte: Evtl. helfen dir jene Ansätze weiter.
CSS: honouradditional.css
Bitte suche:
Code: Alles auswählen
.honourheaderbar {
background-color: #000;
background-image: url("./images/panel.gif");
background-position: center top;
background-repeat: repeat;
color: #CCC076;
}
und ersetze mit:
Code: Alles auswählen
.honourheaderbar {
background-color: #000;
background-image: url("./images/panel.gif");
background-position: center top;
background-repeat: repeat;
color: #CCC076;
margin-top: -180px;
}
.honourheaderbar2 span {
display: none;
}
.honourheaderbar2 a {
display: block;
background-image: url("./images/panel.gif");
background-repeat: repeat;
height: 250px;
background-attachment: scroll;
background-position: top;
}
@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
.honourheaderbar2 span {
display: block;
text-align: center;
}
.honourheaderbar2 a {
background-image: none;
height: 20px;
display: block;
}
.honourheaderbar {
margin-top: -1px;
}
}
HTML: overall_header.html
Suche:
und füge danach in einer neuen Zeile ein:
Code: Alles auswählen
<!-- Anfang background-image (referenzierte Hintergrundgrafik) verlinken -->
<div class="honourheaderbar2">
<h4>
<a href="https://www.deinedomain.tld/" title="Test: referenzierte Hintergrundgrafik verlinkt"><span>Dein Text passend zum Link</span></a>
</h4>
</div>
<!-- Ende background-image (referenzierte Hintergrundgrafik) verlinken -->
Vergiss bitte nicht, das Title-Attribut inhaltlich anzupassen (es muss zweckmäßiger Weise vorhanden sein). Ein kurzer Text innerhalb von span muss auch erfasst sein, da dieser in den kleinen Auflösungen anstatt der Grafik oberhalb ausgegeben wird.
=========
Möchtest du zusätzlich kleinere Grafiken ausgeben, kann dies m.E. nur gelingen, wenn relative und absolute positioniert wird. Das CSS sieht nun in
Kombination der Zusammenfassung wie folgt aus:
Vgl. bitte #mysmallbutton-onheader und das HTML, indem ich für die Testzwecke einfach nur bereits vorhandene Grafiken verwendete, die ein Größe von 39x39px haben.
Code: Alles auswählen
.honourheaderbar {
background-color: #000;
background-image: url("./images/panel.gif");
background-position: center top;
position: relative;
background-repeat: repeat;
color: #CCC076;
margin-top: -180px;
}
.honourheaderbar2 span {
display: none;
}
.honourheaderbar2 a {
display: block;
background-image: url("./images/panel.gif");
background-repeat: repeat;
height: 250px;
background-attachment: scroll;
background-position: top;
}
@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
.honourheaderbar2 span {
display: block;
text-align: center;
}
.honourheaderbar2 a {
background-image: none;
height: 20px;
display: block;
}
.honourheaderbar {
margin-top: -1px;
}
}
#mysmallbutton-onheader {
top: 38px;
height: 40px;
margin: 0 auto;
position: absolute;
right: 12px;
}
HTML:
Suche bitte:
und ersetze mit:
Code: Alles auswählen
<div class="honourheaderbar">
<a href="{U_INDEX}" class="logoimagelink" title="{L_INDEX}"><img src="{T_THEME_PATH}/images/site_logo.jpg" alt="" /></a>
<div id="mysmallbutton-onheader">
<div>
<a href="https://www.deinedomain.tld/"><img src="{T_THEME_PATH}/images/sticky_read.png" alt="Bla"></a>
<a href="https://www.deinedomain.tld/"><img src="{T_THEME_PATH}/images/sticky_unread.png" alt="Blabla"></a>
<a href="https://www.deinedomain.tld/"><img src="{T_THEME_PATH}/images/sticky_read_locked.png" alt="Blubb"></a>
</div>
</div>
</div>
Beachte bitte bei der Wahl deiner Grafiken die Größe und das responsive/adaptive Layout. Vertretbare Kompromisse muss man wahrscheinlich - je Konzept - eingehen.
=========
Für den Fall, dass du weitere Links ausgeben möchtest, kannst du diese in der overall_header.html erfassen: Beispiel(!)
Suche
und füge danach ein:
Code: Alles auswählen
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<div class="navbar">
<ul class="linklist">
<li class="rightside small-icon icon-pages"><a href="#" title="">Link</a></li>
<li class="rightside small-icon icon-pages"><a href="#" title="">Link</a></li>
<li class="rightside small-icon icon-pages"><a href="#" title="">Link</a></li>
<li class="rightside small-icon icon-pages"><a href="#" title="">Link</a></li>
</ul>
</div>
<!-- ENDIF -->
Passe die IF-Statements darin noch an, befülle die Platzhalter und Title-Attribute, gib deinen Linktext entsprechend deiner Wünsche aus.
Hoffentlich habe ich jetzt nichts vergessen.
Ergebnisse: Zwei bildliche Nachweise, wie es sodann ausschauen könnte.
Code: Alles auswählen
http://www.ongray-design.de/screenshots/honsomelinks260217.jpg
Code: Alles auswählen
http://www.ongray-design.de/screenshots/honsomelinkssmallresolutionexample260217.jpg
BTW: Das Style ist auch bereits für phpBB-3.1.10 vorhanden. Hat je alle Updates erfahren und ich empfehle dir, die aktuelle Version zu nutzen.
Beste Grüße
