3.1.: Board Logo im Header austauschen
Beschreibung: Dieser Artikel beschreibt, wie das Logo des phpBB-Boards in der phpBB-Version 3.1getauscht werden kann.
Kategorie: Styles und Templates
Link zu diesem Artikel: Alles auswählen
[url=https://www.phpbb.de/kb/viewarticle?a=27&sid=e506fbb26505da70a690bba381071965]Knowledge Base - 3.1.: Board Logo im Header austauschen[/url]
Dieser Artikel beschreibt, wie das Logo des phpBB-Boards in der phpBB-Version 3.1 getauscht werden kann.
Die Anleitung für phpBB 3.0-Foren ist hier zufinden: KB:logo30x
Ein Backup der Dateien, wird wie immer vorher empfohlen!
Änderungen des Standardverhaltens
(am Beispiel des Styles "prosilver")Das Logo
site_logo.gif
ist im Ordner phpBB\styles\prosilver\theme\images gespeichert. Damit das Logo vom phpBB-Board verwendet wird, ist die Grafikdatei
site_logo.gif
in der Datei: \phpBB\styles\prosilver\theme\imageset.css
mit dem CSS-Code:
Code: Alles auswählen
/* Global imageset items */
.imageset.site_logo {
background-image: url("./images/site_logo.gif");
padding-left: 149px;
padding-top: 52px;
}
Dabei beschreibt:
./images/site_logo.gif
den Pfad zur Logo-Grafikdatei. Siehe CSS-Eigenschaft: background-imagepadding-left
die Breite der Grafik: 149pxpadding-top
die Höhe der Grafik: 52px
Eine Grafik mit folgenden Eigenschaften soll eingetragen werden:
- Dateiname: logo.jpg
- Breite: 160px
- Höhe: 20px
- Pfad/Ordner: images/header
Code: Alles auswählen
/* Global imageset items */
.imageset.site_logo {
background-image: url("./images/header/logo.jpg");
padding-left: 160px;
padding-top: 20px;
}
Weitere Änderungsmöglichkeiten
Bei umfangreicheren Anpassungen, die das Logo betreffen, muss eventuell der HTML- oder CSS-Quelltext verändert werden. Dieser ist hier zu finden:Datei: phpBB\styles\prosilver\template\overall_header.html
Code: Alles auswählen
<div id="site-description">
<a href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
Code: Alles auswählen
.logo {
float: left;
width: auto;
padding: 10px 13px 0 10px;
}
.logo:hover {
text-decoration: none;
}
Code: Alles auswählen
/* Site description and logo */
#site-description {
float: left;
width: 65%;
}
#site-description h1 {
margin-right: 0;
}