phpBB.de

Link zu diesem Artikel: Alles auswählen

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

Dieser Artikel beschreibt, wie das Logo des phpBB-Boards in der phpBB-Version 3.3.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.svg ist im Ordner phpBB\styles\prosilver\theme\images gespeichert. Es handelt sich bei dieser Grafik um eine Vektorgrafik (die Endung .svg steht für scalable vector graphic, also zu Deutsch skalierbare Vektorgrafik). Die Grafik besteht nur aus dem weißen Schriftzug, weswegen man sie nur vor farbigem Hintergrund erkennen kann.

Damit das Logo vom phpBB-Board verwendet wird, ist die Grafikdatei site_logo.svg 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.svg");
}

definiert. Dabei beschreibt ./images/site_logo.svg 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 {
	background-repeat: no-repeat;
	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 {
	background-repeat: no-repeat;
	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