[3.1] Board Logo im Header austauschen

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: phpBB Logo im Header austauschen

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;
}

definiert.

Dabei beschreibt:
  • ./images/site_logo.gif den Pfad zur Logo-Grafikdatei. Siehe CSS-Eigenschaft: background-image
  • padding-left die Breite der Grafik: 149px
  • padding-top die Höhe der Grafik: 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 so zu ändern:

Code: Alles auswählen

/* Global imageset items */
.imageset.site_logo {
   background-image: url("./images/header/logo.jpg");
   padding-left: 160px;
   padding-top: 20px;
}

Nach den Änderungen muss der Style-Cache geleert werden: Style-Cache 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">
            <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>


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: Style-Cache leeren

Zuletzt bearbeitet: 10.01.2016 11:50 von • Der Artikel wurde 9766 mal angeschaut.