phpBB.de

Link zu diesem Artikel: Alles auswählen

[url=https://www.phpbb.de/kb/viewarticle?a=96]Knowledge Base - Board Logo im Header austauschen für phpBB 3.2.x[/url]

Dieser Artikel beschreibt, wie das Logo des phpBB-Boards in der phpBB-Version 3.2.x getauscht werden kann.

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\colours.css
mit dem CSS-Code:

Code: Alles auswählen

.site_logo {
	background-image: url("./images/site_logo.gif");
}

definiert. Dabei beschreibt ./images/site_logo.gif den Pfad zur Logo-Grafikdatei.

Höhe und Breite der Grafik werden im common.css (ebenfalls im Ordner theme) definiert.

Code: Alles auswählen

.site_logo {
	display: inline-block;
	width: 149px;
	height: 52px;
}

Beispiel:
Eine Grafik mit folgenden Eigenschaften soll eingetragen werden:

Dateiname: logo.jpg
Breite: 160px
Höhe: 20px
Pfad/Ordner: images/header

Dann ist der oben genannte Code im colours.css so zu ändern:

Code: Alles auswählen

.site_logo {
	background-image: url("./images/header/logo.jpg");
}

Und im common.css müssen die Maße der Grafik definiert werden:

Code: Alles auswählen

.site_logo {
	display: inline-block;
	width: 160px;
	height: 20px;
}

Nach den Änderungen muss der Style-Cache geleert werden: Den Cache manuell oder per Automatik leeren

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" 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>

Datei: \phpBB\styles\prosilver\theme\common.css

Code: Alles auswählen

.logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}

.logo:hover {
	text-decoration: none;
}

sowie:

Code: Alles auswählen

/* Site description and logo */
.site-description {
	float: left;
	width: 65%;
}

.site-description h1 {
	margin-right: 0;
}

Nach den Änderungen muss der Style-Cache geleert werden: Den Cache manuell oder per Automatik leeren