CINXE.COM

<!DOCTYPE html> <html dir="ltr" lang="de"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>phpBB.de - Knowledge Base - Einen Style für phpBB 3.2/3.3 modifizieren und erstellen</title> <link rel="alternate" type="application/atom+xml" title="Feed - phpBB.de" href="/feed?sid=cd35e42af512afb6a8875a20042b12ef"> <link rel="alternate" type="application/atom+xml" title="Feed - Neuigkeiten" href="/feed/news?sid=cd35e42af512afb6a8875a20042b12ef"> <link rel="alternate" type="application/atom+xml" title="Feed - Neue Themen" href="/feed/topics?sid=cd35e42af512afb6a8875a20042b12ef"> <link rel="alternate" type="application/atom+xml" title="Feed - Aktive Themen" href="/feed/topics_active?sid=cd35e42af512afb6a8875a20042b12ef">  <link href="./../community/assets/css/font-awesome.min.css?assets_version=280" rel="stylesheet"> <link href="./../community/styles/prosilver/theme/stylesheet.css?assets_version=280" rel="stylesheet" /> <link href="./../community/styles/phpBBdev1/theme/stylesheet.css?assets_version=280" rel="stylesheet"> <link href="./../community/styles/phpBBdev1/theme/de/stylesheet.css?assets_version=280" rel="stylesheet"> <link href="./../community/styles/phpBBdev1/theme/images/favicon/mask-icon.svg?assets_version=280" rel="mask-icon" color="#3E647B" />  <link href="./../community/ext/kinerity/knowledgebase/styles/prosilver/theme/knowledgebase_controller.css?assets_version=280" rel="stylesheet" media="screen"> <link href="./../community/ext/phpbbde/pastebin/styles/prosilver/theme/pastebin.css?assets_version=280" rel="stylesheet" media="screen"> <link href="./../community/ext/rmcgirr83/contactadmin/styles/prosilver/theme/imageset.css?assets_version=280" rel="stylesheet" media="screen"> </head> <body id="phpbb" class="nojs notouch section-app/kb/viewarticle ltr "> <div id="wrap" class="wrap"> <a id="top" class="top-anchor" accesskey="t"></a> <div id="page-header"> <div class="headerbar" role="banner"> <div class="inner"> <div id="site-description" class="site-description"> <a id="logo" class="logo" href="./../" title="Startseite"> <span class="site_logo"></span> </a> <h1>phpBB.de</h1> <p>phpBB.de - Die deutsche phpBB-Community</p> <p class="skiplink"><a href="#start_here">Zum Inhalt</a></p> </div> <div id="search-box" class="search-box search-header" role="search"> <form action="./../community/search.php?sid=cd35e42af512afb6a8875a20042b12ef" method="get" id="search"> <fieldset> <input name="keywords" id="keywords" type="search" maxlength="128" title="Suche nach Wörtern" class="inputbox search tiny" size="20" value="" placeholder="Suche…" /> <button class="button button-search" type="submit" title="Suche"> <i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">Suche</span> </button> <a href="./../community/search.php?sid=cd35e42af512afb6a8875a20042b12ef" class="button button-search-end" title="Erweiterte Suche"> <i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">Erweiterte Suche</span> </a> <input type="hidden" name="sid" value="cd35e42af512afb6a8875a20042b12ef" /> </fieldset> </form> </div> <div id="phpbbde_navigation" class="phpbbde_navigation"> <div class="menu-button"> <a href="#" id="navi-toggle" title="Menü anzeigen">Menü</a> </div> <ul id="mainnavi" class="mainnavi"> <li class="mainnavi-title">phpBB.de - Navigation</li> <li class="navi-button but-about"> <a href="./../phpbbde/?sid=cd35e42af512afb6a8875a20042b12ef"><span class="subnavi-toggle"></span>Über uns</a> <ul class="subnavi"> <li><a href="./../phpbbde/chronik/?sid=cd35e42af512afb6a8875a20042b12ef">phpBB.de-Chronik <span>Die Geschichte von phpBB.de in Wort und Bild</span></a></li> <li><a href="./../phpbbde/team/?sid=cd35e42af512afb6a8875a20042b12ef">Das Team <span>Erfahre mehr über das Team hinter phpBB.de</span></a></li> <li><a href="./../phpbbde/fragen/?sid=cd35e42af512afb6a8875a20042b12ef">Fragen an das Team <span>Ihr habt gefragt, wir haben geantwortet</span></a></li> <li><a href="/contactadmin?sid=cd35e42af512afb6a8875a20042b12ef">Kontaktformular <span>Formular zur Kontaktaufnahme mit dem phpBB.de-Team</span></a></li> <li><a href="./../phpbbde/impressum/?sid=cd35e42af512afb6a8875a20042b12ef">Impressum <span>Das phpBB.de-Impressum</span></a></li> </ul> </li> <li class="navi-button but-phpbb"> <a href="./../infos/?sid=cd35e42af512afb6a8875a20042b12ef"><span class="subnavi-toggle"></span>phpBB</a> <ul class="subnavi"> <li><a href="./../infos/?sid=cd35e42af512afb6a8875a20042b12ef">Infos über phpBB <span>Erfahre mehr über phpBB</span></a></li> <li><a href="./../infos/tour/?sid=cd35e42af512afb6a8875a20042b12ef">Die phpBB-Tour <span>Was ist phpBB und wo bekomme ich es?</span></a></li> <li><a href="./../infos/features/?sid=cd35e42af512afb6a8875a20042b12ef">Feature-Vergleich <span>Lerne alle Features kennen, die dir phpBB bietet</span></a></li> <li><a href="./../infos/anpassen/?sid=cd35e42af512afb6a8875a20042b12ef">phpBB anpassen <span>Nutze Erweiterungen und Styles, um phpBB deinen Wünschen anzupassen</span></a></li> <li><a href="./../infos/entwickler/3.3/?sid=cd35e42af512afb6a8875a20042b12ef">Informationen für Entwickler <span>phpBB-Projektarchiv, nützliche Links, ...</span></a></li> <li><a href="./../xref/3.3/?sid=cd35e42af512afb6a8875a20042b12ef">Cross-Referenz 3.3 <span>Cross-Referenz des phpBB-Quellcodes</span></a></li> </ul> </li> <li class="navi-button but-downloads"> <a href="./../downloads/?sid=cd35e42af512afb6a8875a20042b12ef"><span class="subnavi-toggle"></span>Downloads</a> <ul class="subnavi"> <li><a href="./../downloads/pakete/?sid=cd35e42af512afb6a8875a20042b12ef">phpBB-Pakete <span>Die aktuellen dt. Komplett- und Updatepakete von phpBB</span></a></li> <li><a href="./../downloads/sprachpakete/?sid=cd35e42af512afb6a8875a20042b12ef">Sprachpakete <span>Die aktuellen deutschen Sprachdateien für phpBB</span></a></li> <li><a href="./../downloads/entwicklung/?sid=cd35e42af512afb6a8875a20042b12ef">Entwicklung <span>Entwickler-Downloads</span></a></li> </ul> </li> <li class="navi-button but-docu"> <a href="./../support/?sid=cd35e42af512afb6a8875a20042b12ef"><span class="subnavi-toggle"> </span>Support</a> <ul class="subnavi"> <li><a href="./../support/doku/quickstart/3.3/?sid=cd35e42af512afb6a8875a20042b12ef">Schnelleinstieg <span>Erklärt dir die Einrichtung deines phpBB Boards</span></a></li> <li><a href="https://www.phpbb.de/help/faq">Häufig gestellte Fragen <span>Häufige Fragen im Zusammenhang mit der Nutzung von phpBB</span></a></li> <li><a href="./../kb/index?sid=cd35e42af512afb6a8875a20042b12ef">Knowledge Base <span>Unsere Wissensdatenbank mit vielen und hilfreichen Artikeln</span></a></li> <li><a href="./../support/videos/?sid=cd35e42af512afb6a8875a20042b12ef">Videos <span>Unsere Supportvideos erklären Funktionen von phpBB</span></a></li> <li><a href="./../support/doku/?sid=cd35e42af512afb6a8875a20042b12ef">Dokumentation <span>Hier findest Du Dokumentationen zu phpBB</span></a></li> <li><a href="./../support/doku/perror/?sid=cd35e42af512afb6a8875a20042b12ef">MySQL-Fehlercodes <span>Mysql Fehlercodes dokumentiert</span></a></li> <li><a href="./../support/doku/htpasswd/?sid=cd35e42af512afb6a8875a20042b12ef">.htpasswd-Generator <span>Einfach zu bedienener Generator für .htpasswd Dateien</span></a></li> </ul> </li> <li class="navi-button but-community"> <a href="./../community/?sid=cd35e42af512afb6a8875a20042b12ef"><span class="subnavi-toggle"> </span>Community</a> <ul class="subnavi"> <li><a href="./../community/viewforum.php?f=145&sid=cd35e42af512afb6a8875a20042b12ef">Supportforen <span>Hilfe bei der Installation und Benutzung</span></a></li> <li><a href="./../community/viewforum.php?f=104&sid=cd35e42af512afb6a8875a20042b12ef">Communityforen<span>Allgemeine Diskussionen und phpBB-Usergroups</span></a></li> <li><a href="./../community/viewforum.php?f=148&sid=cd35e42af512afb6a8875a20042b12ef">Extension-Foren<span>Auf der Suche nach einer Extension? Fragen zu einer Extension?</span></a></li> <li><a href="./../community/viewforum.php?f=152&sid=cd35e42af512afb6a8875a20042b12ef">Styleforen<span>Du suchst einen neuen Style oder hast Probleme mit einem Style?</span></a></li> <li><a href="./../kb/knigge?sid=cd35e42af512afb6a8875a20042b12ef">Der kleine phpBB.de-Knigge <span>Eine kleine Liste von wichtigen Regeln auf phpBB.de</span></a></li> <li><a href="./../phpbbde/chat/?sid=cd35e42af512afb6a8875a20042b12ef">Discord / Chat <span>Besuche den Discord-Server oder den Chat auf Freenode</span></a></li> </ul> </li> </ul> </div> </div> </div> <div class="navbar" role="navigation"> <div class="inner"> <ul id="nav-main" class="nav-main linklist" role="menubar"> <li id="quick-links" class="quick-links dropdown-container responsive-menu" data-skip-responsive="true"> <a href="#" class="dropdown-trigger"> <i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>Schnellzugriff</span> </a> <div class="dropdown"> <div class="pointer"><div class="pointer-inner"></div></div> <ul class="dropdown-contents" role="menu"> <li class="separator"></li> <li> <a href="./../community/search.php?search_id=unanswered&sid=cd35e42af512afb6a8875a20042b12ef" role="menuitem"> <i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>Unbeantwortete Themen</span> </a> </li> <li> <a href="./../community/search.php?search_id=active_topics&sid=cd35e42af512afb6a8875a20042b12ef" role="menuitem"> <i class="icon fa-file-o fa-fw icon-blue" aria-hidden="true"></i><span>Aktive Themen</span> </a> </li> <li class="separator"></li> <li> <a href="./../community/search.php?sid=cd35e42af512afb6a8875a20042b12ef" role="menuitem"> <i class="icon fa-search fa-fw" aria-hidden="true"></i><span>Suche</span> </a> </li> <li class="separator"></li> <li> <a href="./../phpbbde/team.php?sid=cd35e42af512afb6a8875a20042b12ef" role="menuitem"> <i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>Das Team</span> </a> </li> <li class="separator"></li> </ul> </div> </li> <li data-skip-responsive="true"> <a href="./../help/faq?sid=cd35e42af512afb6a8875a20042b12ef" rel="help" title="Häufig gestellte Fragen" role="menuitem"> <i class="icon fa-question-circle fa-fw" aria-hidden="true"></i><span>FAQ</span> </a> </li> <li data-last-responsive="true"><a href="/pastebin/?sid=cd35e42af512afb6a8875a20042b12ef" title="Pastebin"><i class="icon fa-clipboard fa-fw" aria-hidden="true"></i><span>Pastebin</span></a></li> <li class="rightside" data-skip-responsive="true"> <a href="./../community/ucp.php?mode=login&redirect=..%2Fapp.php%2Fkb%2Fviewarticle%3Fa%3D26&sid=cd35e42af512afb6a8875a20042b12ef" title="Anmelden" accesskey="x" role="menuitem"> <i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>Anmelden</span> </a> </li> <li class="rightside" data-skip-responsive="true"> <a href="./../community/ucp.php?mode=register&sid=cd35e42af512afb6a8875a20042b12ef" role="menuitem"> <i class="icon fa-pencil-square-o fa-fw" aria-hidden="true"></i><span>Registrieren</span> </a> </li> </ul> <ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar"> <li class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList"> <span class="crumb" itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope><a itemprop="item" href="./../" data-navbar-reference="home"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span itemprop="name">Startseite</span></a><meta itemprop="position" content="1" /></span> <span class="crumb" itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope><a itemprop="item" href="./../community/index.php?sid=cd35e42af512afb6a8875a20042b12ef" accesskey="h" data-navbar-reference="index"><span itemprop="name">Community</span></a><meta itemprop="position" content="2" /></span> <span class="crumb" itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope><a itemprop="item" href="/kb/index?sid=cd35e42af512afb6a8875a20042b12ef"><span itemprop="name">Knowledge Base</span></a><meta itemprop="position" content="3" /></span> </li> <li class="rightside responsive-search"> <a href="./../community/search.php?sid=cd35e42af512afb6a8875a20042b12ef" title="Zeigt die erweiterten Suchoptionen an" role="menuitem"> <i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">Suche</span> </a> </li> </ul> </div> </div> </div> <a id="start_here" class="anchor"></a> <div id="page-body" class="page-body" role="main"> <div id="p26" class="post bg1"> <div class="inner"> <div class="article-body"> <div class="postbody"> <div id="post_content26"> <h2 class="article-title"><a href="/kb/viewarticle?a=26&sid=cd35e42af512afb6a8875a20042b12ef">Einen Style für phpBB 3.2/3.3 modifizieren und erstellen</a></h2> <p class="article-meta"><strong>Geschrieben von:</strong> <a href="./../community/memberlist.php?mode=viewprofile&u=28811&sid=cd35e42af512afb6a8875a20042b12ef" style="color: #BA0303;" class="username-coloured">Crizzo</a><br> <strong>Veröffentlicht am:</strong> 10.02.2020 11:49<br /> <strong>zuletzt geändert:</strong> 04.11.2021 13:26<br> <strong>zuletzt geändert von:</strong> <a href="./../community/memberlist.php?mode=viewprofile&u=28811&sid=cd35e42af512afb6a8875a20042b12ef" style="color: #BA0303;" class="username-coloured">Crizzo</a><br> <strong>Zugriffe:</strong> 12255</p> <p class="article-description"><strong>Beschreibung:</strong> Dieser Artikel gibt grundlegende und fortgeschrittene Informationen, die euch beim Erstellen und Modifizieren eines phpBB Styles helfen.</p> <p class="article-categories"><strong>Kategorie:</strong> <a href="/kb/index?c=13&sid=cd35e42af512afb6a8875a20042b12ef">Styles und Templates</a></p> <div class="content"> <div class="codebox"> <p>Link zu diesem Artikel: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p> <code>[url=https://www.phpbb.de/kb/viewarticle?a=26&sid=cd35e42af512afb6a8875a20042b12ef]Knowledge Base - Einen Style für phpBB 3.2/3.3 modifizieren und erstellen[/url]</code> </div> <hr> Dieser Artikel gibt grundlegende und fortgeschrittene Informationen, die euch beim Erstellen und Modifizieren eines phpBB 3.1 Styles helfen. <br> <div class="note note-red"><strong class="text-strong">Warnung:</strong> Dieser Artikel ist für phpBB >=3.1. Es lässt sich nicht auf ältere Versionen von phpBB (wie 3.0) anwenden.</div> <div class="note note-blue"><strong class="text-strong">Hinweis:</strong> Um diesen Artikel in seiner Gänze verstehen zu können, sind zumindest grundlegende Kenntnisse in HTML und CSS notwendig. Auf der Suche nach Tutorials zu diesen Sprachen empfehlen wir euch diesen Artikel: <a href="https://www.phpbb.de/kb/viewarticle?a=61" class="postlink">Wo finde ich Scripte & Tutorials?</a> </div> <div class="note note-green"><strong class="text-strong">Profi-Tipp:</strong> In unserer Rubrik <a href="https://www.phpbb.de/community/viewforum.php?f=154" class="postlink">3.1.x Styles in Entwicklung</a> könnt ihr euch anschauen, wie erfahrene Style-Autoren und Einsteiger ihre Styles für phpBB 3.1 aufbauen.</div> <h4><a name="filestructure"></a>Dateistruktur</h4> Jeder phpBB 3.1 Style hat die gleiche grundlegende Dateistruktur. So befindet sich jeder Style im Ordner <code class="inline">styles/</code> in seinem eigenen Ordner <code class="inline">stylename</code>. Der Inhalt des Ordner sieht beispielsweise so aus: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code>template/ overall_header.html eigene-js-datei.js theme/ images/ logo.png stylesheet.css style.cfg</code></pre></div> Wir empfehlen euch beim Neuerstellen eueres Styles diese Struktur unbedingt einzuhalten. Das vermeidet grundsätzliche Probleme bei denen Dateien und Ordner eures Styles nicht gefunden werden können. <br> <h4><a name="preparation"></a>Vorbereitungen</h4> <div class="note note-red"><strong class="text-strong">Warnung:</strong> Wie immer gilt: bitte erstellt vor allen Änderungen an Dateien ein Backup (Sicherheitskopie) der jeweiligen Dateien und der Datenbank. Das erspart euch unnötigen Ärger und Zeit bei der langwierigen Fehlersuche, wenn ihr euch eine Datei zerstört habt.</div> <h5>Basis Style auswählen</h5> Es besteht theoretisch die Möglichkeit einen Style komplett von Grund auf neu zu erstellen. Davon raten wir Einsteigern und auch fortgeschrittenen Style-Autoren ab. Denn in den allermeisten Fällen muss man nicht alle Style-Dateien verändern, um einen eigenen Style zu erstellen. Deshalb verwenden wir als Grundlage <strong class="text-strong">prosilver</strong>. <br> <br> Dieser Style bietet eine gute Grundlage, enthält alle neuen Features von phpBB 3.1 und verwendet die neusten HTML- und CSS-Elemente. Zudem wurde er schon ausgiebig getestet. Mit seiner Basis stellt ihr zusätzlich sicher, dass alle <strong class="text-strong">Template-Events</strong> an der richtigen Stelle sind und somit alle Erweiterungen (Extensions) funktionieren. <a href="https://www.phpbb.de/kb/create31style#template-events" class="postlink">Mehr zu Template-Events</a> gibt es später in diesem Artikel. <br> <h5>Ein Grundgerüst erstellen</h5> Zuerst muss die Dateistruktur nach dem oben genannten Vorbild erstellt werden. Sobald die Ordner: template, theme und theme/images erstellt sind, sowie die Datei <code class="inline">style.cfg</code> existiert, kann es losgehen. <br> <div class="note note-yellow"><strong class="text-strong">Info:</strong> Am besten liest du den Artikel erst ganz durch, bevor du dich ans Erstellen deines eigenen Styles machst.</div> <div class="note note-green"><strong class="text-strong">Profi-Tipp:</strong> Vorhandenes Styles zu bearbeiten ist aus mehreren Gründen keine gute Idee und auch nicht notwendig. Du kannst eine Kopie des Styles anfertigen und dessen <code class="inline">style.cfg</code> anpassen, so dass er Inhalte vom Original-Style erbt. Dadurch musst du nur Dateien bearbeiten, die du auch verändern willst, was dir enorm viel Zeit spart.</div> <h4><a name="stylecfg"></a>Style.cfg</h4> Dies ist die wichtigste Datei eines Styles. In ihr stehen alle wichtigen Informationen, die dein phpBB Board benötigt, um den Style zu installieren und ob weitere Styles für die Installation notwendig sind. <br> In der Regel sieht die <code class="inline">style.cfg</code> so aus: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code># # phpBB Style Configuration File # # This file is part of the phpBB Forum Software package. # # @copyright (c) phpBB Limited <https://www.phpbb.com> # @license GNU General Public License, version 2 (GPL-2.0) # # For full copyright and license information, please see # the docs/CREDITS.txt file. # # At the left is the name, please do not change this # At the right the value is entered # # Values get trimmed, if you want to add a space in front or at the end of # the value, then enclose the value with single or double quotes. # Single and double quotes do not need to be escaped. # # # General Information about this style name = prosilver copyright = © phpBB Limited, 2007 style_version = 3.1.0 phpbb_version = 3.1.0 # Defining a different template bitfield # template_bitfield = lNg= # Parent style # Set value to empty or to this style's name if this style does not have a parent style parent = prosilver</code></pre></div> Das Meiste in dieser Datei erklärt sich von selbst. Einen besonderen Blick wert sind die Werte für <code class="inline">name</code>, <code class="inline">style_version</code> und <code class="inline">phpbb_version</code> sowie <code class="inline">parent</code>. Letzterer gibt an, ob dieser Style von einem anderen Style erbt, also einen Basistyle besitzt. <br> <br> Soll nun unser neuer Style den Namen "eigener Style" tragen und von <strong class="text-strong">prosilver</strong> Dateien erben, dann sind diese beiden Zeilen notwendig: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code>name = eigener Style parent = prosilver</code></pre></div> Anstelle von <strong class="text-strong">prosilver</strong> kann der Style auch von einem anderen Style Dateien erben z. B. <strong class="text-strong">prosilver Special Edition</strong>. Damit sehen diese beiden Zeilen so aus: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code>name = eigener Style parent = prosilver Special Edition</code></pre></div> Dieser Style wiederum erbt Dateien von <strong class="text-strong">prosilver</strong>. Deshalb sieht die Erbreihenfolge im Administrations-Bereich (ACP), nachdem ihr den neuen Style <strong class="text-strong">eigener Style</strong> installiert habt, so aus: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code>prosilver prosilver Special Edition eigener Style</code></pre></div> <h4><a name="notwelemente"></a>Notwendige Elemente</h4> Jede Webseite benötigt verschiedene Elemente, damit sie richtig funktioniert. Diese Elemente sind in den HTML- und CSS-Spezifikationen definiert. <br> <br> Neben diesen Elementen brauchen phpBB 3.1-Styles verschiedene Code-Elemente, damit sie richtig funktionieren. <br> <br> Wenn du deinen Style auf Basis eines guten und funktionierenden Styles aufbaust, dann wird dieser Style alle diese Code-Elemente schon mitbringen. Da diese Elemente allerdings sehr wichtig sind, wollen wir an dieser Stelle nicht darauf verzichten, sie zu erwähnen.<br> <div class="note note-blue"><strong class="text-strong">Hinweis:</strong> Für weitere Informationen wie diese Code Snippets von Styles und Erweiterungen verwendet werden, schau dir die "Eine Erweiterung schreiben"-Seite oder die Development Wiki Seite <a href="https://wiki.phpbb.com/New_Template_Commands_in_3.1" class="postlink">New Template Commands in 3.1</a> an.</div> <h5>{$STYLESHEETS}</h5> Das phpBB 3.1-Erweiterungssystem erlaubt es Erweiterungen, eigene (externe) CSS-Dateien zu ergänzen. Sie nutzen dafür den Code: <code class="inline"></code> im Template. <br> <br> Dieser Code ergänzt eine bestimmte CSS-Datei in der Reihe von Dateien, die mit dem Element <code class="inline">{$STYLESHEETS}</code> im Template geladen wird. Deshalb werden viele Erweiterungen nicht funktionieren, wenn du dieses Code-Element nicht in deinem Style verwendest. <br> <div class="note note-yellow"><strong class="text-strong">Info:</strong> <code class="inline">{$STYLESHEETS}</code> sollte gegen Ende des <code class="inline"><head></code>-Elements in der Template-Datei <strong class="text-strong">overall_header.html</strong> verwendet werden. Am besten direkt vor <code class="inline"></head></code>.</div> <h5>{$SCRIPTS}</h5> <code class="inline">{$SCRIPTS}</code> funktioniert fast genauso wie das Code-Element <code class="inline">{$STYLESHEETS}</code>, aber es ist für JavaScript gedacht, der von Erweiterungen deinem phpBB Board ergänzt wird. Dazu nutzen Autoren von Erweiterungen den Code: <code class="inline"></code>. Wie bei <code class="inline">{$STYLESHEETS}</code> ist der <code class="inline">{$SCRIPTS}</code> notwendig, damit Erweiterungen weiterhin funktionieren.<br> <div class="note note-yellow"><strong class="text-strong">Info:</strong> <code class="inline">{$SCRIPTS}</code> sollte gegen Ende der Template-Datei <strong class="text-strong">overall_footer.html</strong> verwendet werden. Am besten direkt vor <code class="inline"></body></code>.</div> <h5>jQuery</h5> Ab Version phpBB 3.1 ist <strong class="text-strong">jQuery</strong> standardmäßig im Komplettpaket enthalten. jQuery ist für viele Style-Autoren sehr nützlich. Von vielen Erweiterungen wird angenommen, dass es vorhanden und aktiviert ist. <br> <br> Deshalb sollte dein Style <span style="text-decoration:underline">immer</span> den Code enthalten, der jQuery in dein Template einbindet. Wenn du den folgenden Code in deiner Template-Datei <strong class="text-strong">overall_footer.html</strong> findest, gehst du auf Nummer sicher: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code><script src="{T_JQUERY_LINK}"></script> <script>window.jQuery || document.write(unescape('%3Cscript src="{T_ASSETS_PATH}/javascript/jquery.min.js?assets_version={T_ASSETS_VERSION}" type="text/javascript"%3E%3C/script%3E'));</script></code></pre></div> <div class="note note-yellow"><strong class="text-strong">Info:</strong> Dieser jQuery-Code sollte am besten das erste Script sein, was im Footer geladen wird. Auf jeden Fall <span style="text-decoration:underline">muss</span> er <span style="text-decoration:underline">vor</span> <code class="inline">{$SCRIPTS}</code> eingebunden werden.</div> <h4><a name="templatesyntaxvariables"></a>Template-Syntax und Variablen</h4> phpBB 3.1 besitzt eine mächtige Template-Engine, welche es dir erlaubt, an verschiedenen Stellen im Code die Seitenausgabe zu bearbeiten und zu ergänzen.<br> <br> Für weitere Informationen, wie du die verschiedenen Template-Elemente und Bedingungen verwenden kannst, schau dir bitte das <strong class="text-strong">Development Wiki</strong> an. Bis jetzt gibt es noch keine phpBB 3.1 spezifischen Inhalte, aber einige Seiten sind trotzdem geeignet: <ul><li><a href="https://wiki.phpbb.com/Tutorial.Template_syntax" class="postlink">Template Syntax Tutorial</a></li> <li><a href="https://wiki.phpbb.com/Category:Template_Variables" class="postlink">Katalog von verfügbaren Template Variablen</a></li> <li><a href="https://wiki.phpbb.com/Category:Template_Variables" class="postlink">[url=https://wiki.phpbb.com/Category:Template_Variables]Allgemein Template Fehler</a></li></ul> <h4><a name="template-events"></a>Template-Events</h4> Seit der Einführung des Extension-Systems in phpBB 3.1 können Erweiterungen Code einfügen, ohne dass das Template bearbeitet werden muss. Dies macht die Installation, das Aktualisieren und das Entfernen von Funktionen auf Style-Ebene deutlich einfacher.<br> <br> Viele Erweiterungen werden <strong class="text-strong">Template-Events</strong> nutzen, um Funktionen zu phpBB zu ergänzen. Sie nutzen dabei den Template-Code: <code class="inline"></code>. Wenn dein Style beliebt und oft genutzt werden soll, dann solltest du versuchen möglichst viele der <strong class="text-strong">Template-Events</strong> in deinem Style zu übernehmen. <br> <br> Da <strong class="text-strong">prosilver</strong> weiterhin der Standard-Style für phpBB 3.1 ist, werden die meisten Erweiterungen für <strong class="text-strong">prosilver</strong> und damit für dessen Template-Events entwickelt. Deshalb wird das Einbinden dieser Template-Events in nahezu der gleichen Position sicherstellen, dass die meisten und zukünftige Erweiterungen mit deinem Style funktionieren.<br> <div class="note note-yellow"><strong class="text-strong">Info:</strong> Eine umfassende Liste aller Template-Events, die in prosilver 3.1.x (und subsilver2) verwendet werden, kann im Development Wiki <a href="https://wiki.phpbb.com/Event_List#Template_Events" class="postlink">Event List</a> nachgelesen werden.</div> <div class="note note-green"><strong class="text-strong">Profi-Tipp:</strong> Anstelle alle Template Events an korrekter Stelle in deinem Style einzubauen, empfiehlt sich wieder einmal der Einsatz der Template-Vererbung.</div> <h4><a name="templateinherit"></a>Template-Vererbung</h4> Die Template-Vererbung ist so ziemlich die nützlichste Funktion für Style-Autoren der phpBB Template-Engine.<br> <br> Wenn du deinen Style auf Basis eines Existierenden aufbaust und nur ein paar Template-Dateien verändern willst, must du nicht alle Template-Dateien kopieren. Dies würde dafür sorgen, dass du sehr viele komplett identische Template-Dateien in deinem Board hast. Es wäre zudem sehr aufwändig alle Änderungen in die Dateien einzupflegen, wenn der Basisstyle (parent) ein Update erfährt.<br> <br> Um die Template-Vererbung (<em class="text-italics">template inheritance</em>) zu aktivieren, muss nur eine Zeile in der <a href="https://www.phpbb.de/kb/create31style#stylecfg" class="postlink"><strong class="text-strong">style.cfg</strong></a> ergänzt werden. <br> <br> Wenn du in deinem Style einen "parent", also einen Basisstyle, definierst, wird die Template-Engine fehlende Dateien bei diesem Basisstyle suchen und verwenden, sofern deinem Style diese Dateien fehlen. <br> <br> Grundsätzlich bedeutet das, dass phpBB versucht, eine Datei im Ordner <code class="inline">template</code> deines Styles zu finden. Wenn die Datei dort nicht gefunden wird, wird in jedem <code class="inline">template</code>-Ordner der Basisstyles (parent-Styles) gesucht. Dieser Prozess kann mehrere Ebenen tief sein. So kannst du deinen Style als Kind von einem Kind von einem Kind von einem Basisstyle aufbauen, wie die Äste von einem Baum (deshalb "Style-Tree").<br> <div class="note note-yellow"><strong class="text-strong">Info:</strong> Mit der Einführung von Template-Events wurde die Template-Vererbung deutlich mächtiger. Wir empfehlen deshalb den Einsatz der Template-Vererbung so häufig wie möglich.</div> <h5>Beispiel</h5> Viele Styles beginnen mit dem Modifizieren von vorhandenen Styles (wie z. B. prosilver), weil das Erstellen eines neuen Styles ganz von Vorne ein sehr zeitaufwendiges Unterfangen ist. Das folgende Beispiel zeigt, wie einfach und nützlich die Template-Vererbung sein kann.<br> <br> Beispiel: "<em class="text-italics">Ich will den Kopf des Board und die Index-Seite von Style "X" bearbeiten, wie mache ich das?</em>"<br> <br> Das erste was du bedenken musst: du willst <em class="text-italics">jetzt</em> nur zwei Dinge ändern. Nach der Zeit willst du vielleicht mehr und mehr Dinge verändern. Deshalb wäre es am besten, wenn du einen Kind-Style von Style "X" erstellst (im Beispiel Style "Y" genannt). <ol style="list-style-type:decimal"><li>Erstelle das Grundgerüst für Style "Y"</li> <li>Erstelle eine <code class="inline">style.cfg</code> für Style "Y" mit "X" als Basisstyle</li> <li>Kopiere <strong class="text-strong">overall_header.html</strong> und <strong class="text-strong">index_body.html</strong> von <code class="inline">styles/x/template</code> nach <code class="inline">styles/y/template</code>.</li> <li>Verändere diese beiden Dateien nach deinen Bedürfnissen.</li> <li>Lade Style "Y" hoch und installiere ihn im Administrations-Bereich.</li></ol> Ist das alles? Nicht ganz. Du wirst bemerkt haben, dass keine Theme-Dateien (CSS und Grafiken) geladen werden. Im nächsten Kapitel wird dieses Problem besprochen.<br> <h4><a name="themeinherit"></a>Theme-"Vererbung"</h4> Das größte Hindernis für die meisten Style-Autoren ist die Tatsache, dass die Vererbung nur bei Template-Dateien funktioniert und nicht bei den CSS-Dateien. Die Frage ist also, wie man Template-Vererbung und zusätzlich die Vererbung der Theme-Dateien des Vorgänger-Styles umsetzen kann?<br> <br> Dazu gibt es mehere Wege und der beste Weg hängt davon ab, ob du viele maßgebliche Änderungen an den CSS-Dateien vornehmen willst oder nicht. Wir werden versuchen diese unterschiedlichen Wege zu erklären und die Vor- und Nachteile aufzuzählen.<br> <div class="note note-yellow"><strong class="text-strong">Info:</strong> Theme-Dateien können nicht genauso wie Template-Dateien vererbt werden. Es gibt kein automatisches System. Die Theme-"Vererbung" sollte mehr so verstanden werden: "Lade Theme-Dateien von anderen Styles mit manuellen Anweisungen".</div> <h5>Methode 1: Kopieren & Einfügen von allen Theme-Dateien</h5> Die einfachste (und vermutlich meist missbräuchlich verwendete) Methode ist: einfach alle Theme-Dateien (d.h. das komplette <code class="inline">theme/</code>-Verzeichnis) von dem Vorgänger-Style zum Kind-Style <code class="inline">theme/</code>-Verzeichnis zu kopieren und die verschiedenen CSS-Dateien dort seinen Bedürfnissen anzupassen.<br> <span style="color:#00BF00">Vorteile:</span> <ul><li>Einfaches Verändern</li> <li>Benötigt keine Template-Modifikationen</li></ul> <span style="color:#FF0000">Nachteile:</span> <ul><li>Schlechte Wartbarkeit</li> <li>Potenzielle Probleme beim Aktualisieren von mehreren Vorgänger-Styles</li> <li>Doppelte Theme-Dateien im Board</li></ul> <h5>Methode 2: @import-Regel mit relativem Pfad</h5> Wenn du nur wenige Veränderungen an den CSS-Dateien der Vorgänger-Styles machen willst, möchtest du nicht alle CSS-Dateien kopieren und so deinen Style mit doppelten Dateien vollstopfen. Du kopierst nur die CSS-Dateien, die du auch verändern willst in dein <code class="inline">theme</code>-Verzeichnis. <br> <br> In deiner neuen <code class="inline">stylesheet.css</code> kann du folgenden Code einbinden, um die anderen CSS-Dateien zu laden: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code>@import url("../../prosilver/theme/common.css"); @import url("../../prosilver/theme/links.css"); @import url("../../prosilver/theme/content.css"); @import url("../../prosilver/theme/buttons.css"); @import url("../../prosilver/theme/cp.css"); @import url("../../prosilver/theme/forms.css"); @import url("colours.css"); @import url("imageset.css");</code></pre></div> Das lädt alle prosilver CSS-Dateien, außer die <code class="inline">colours.css</code> und <code class="inline">imageset.css</code>, aus dem <code class="inline">theme</code>-Verzeichnis von <strong class="text-strong">prosilver</strong>. Die letzteren beiden werden aus dem <code class="inline">theme/</code>-Verzeichnis deines neuen Styles geladen, die du von <strong class="text-strong">prosilver</strong> kopiert und deinen Bedürfnissen angepasst hast. <br> <br> <span style="color:#00BF00">Vorteile:</span> <ul><li>Keine doppelten CSS-Dateien</li> <li>Keine Anpassung von Template-Dateien erforderlich</li></ul> <span style="color:#FF0000">Nachteile:</span> <ul><li>@import-Regeln mit relativem Pfad sind schlechter Stil (wenn möglich immer vermeiden)</li> <li>Benötigt weiterhin Kopien aller CSS-Dateien, die nicht in der <code class="inline">stylesheet.css</code> eingebunden werden (responsive.css, /de/stylesheet.css, usw.)</li></ul> <h5>Methode 3: Mehrfach überschreibende stylesheets.css im <head></h5> Anstatt die kopierten CSS-Dateien zu bearbeiten, kann man auch neue CSS-Regeln schreiben und damit die CSS-Regeln der CSS-Dateien des Vorgängers überschreiben (Stichwort: CSS-Spezifität und Kaskade). <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code><link href="{ROOT_PATH}styles/prosilver/theme/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" /> <link href="{T_STYLESHEET_LINK}" rel="stylesheet" /></code></pre></div> <div class="note note-blue"><strong class="text-strong">Notiz:</strong> phpBB nutzt <code class="inline">{T_ASSETS_VERSION}</code> als rudimentäre Art der Browser-Cache-Kontrolle.</div> <div class="note note-yellow"><strong class="text-strong">Hinweis:</strong> Obwohl <code class="inline">{T_SUPER_TEMPLATE_NAME}</code> immer noch unterstützt wird, schreitet es nur eine Ebenen im Style-Baum nach oben. Deshalb ist es nicht für komplexe Vererbungssituationen geeignet.</div> Dieser Code lädt zuerst die <code class="inline">stylesheet.css</code> von <strong class="text-strong">prosilver</strong> und alle CSS-Dateien, die davon per <code class="inline">@import</code> eingebunden werden. Danach wird die <code class="inline">stylesheet.css</code> deines eigenen Styles geladen. Du kannst wiederum in deiner <code class="inline">stylesheet.css</code> die <code class="inline">@import</code>-Funktion nutzen und so deine CSS-Regeln auf mehrere Dateien aufteilen oder eben alle CSS-Regeln in die <code class="inline">stylesheet.css</code> eintragen.<br> <div class="note note-yellow"><strong class="text-strong">Hinweis:</strong> Wir raten davon ab, sowohl <code class="inline">@import</code>-Regeln als auch CSS-Regeln in der gleichen Datei zu verwenden.</div> Die gleiche Methode kann verwendet werden, um anderen CSS-Dateien direkt von Basisstyles (parent-Styles) zu laden, ohne sie duplizieren zu müssen (wie z. B. responsive.css, print.css, bidi.css, usw.). Wenn du die CSS-Datei für die Sprachvariablen laden möchtest, kannst du folgendes Code-Snippet nutzen: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code><link href="{ROOT_PATH}styles/prosilver/theme/{T_THEME_LANG_NAME}/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" /></code></pre></div> <span style="color:#00BF00">Vorteile:</span> <ul><li>Keine @import-Regeln mit relativem Pfad</li> <li>Möglichkeit, eine Doppelung zu verhindern</li></ul> <span style="color:#FF0000">Nachteile:</span> <ul><li>Keine genaue Kontrolle darüber, welche Teile der Vorgänger <code class="inline">stylesheet.css</code> eingebunden oder nicht eingebunden werden.</li></ul> <h5>Methode 4:</h5> Diese Methode funktioniert genauso wie Methode 3, aber anstelle die <code class="inline">stylesheet.css</code> des Basisstyles (prosilver) zu laden, werden die einzelnen CSS-Dateien direkt geladen, ohne die <code class="inline">@import</code>-Regel zu benutzen. Dies ermöglicht es, besser zu kontrollieren welche Datei eingebunden werden und welche nicht. <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code><link href="{ROOT_PATH}styles/prosilver/theme/common.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" /> <link href="{ROOT_PATH}styles/prosilver/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" /> <link href="{ROOT_PATH}styles/prosilver/theme/content.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" /> <link href="{ROOT_PATH}styles/prosilver/theme/buttons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" /> <link href="{ROOT_PATH}styles/prosilver/theme/cp.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" /> <link href="{ROOT_PATH}styles/prosilver/theme/forms.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" /> <link href="{T_STYLESHEET_LINK}" rel="stylesheet" /> <link href="{ROOT_PATH}styles/prosilver/theme/{T_THEME_LANG_NAME}/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" /></code></pre></div> Leicht ersichtlich ist, dass die <code class="inline">colours.css</code> und <code class="inline">imageset.css</code> nicht eingebunden wird, da wir da unsere eigenen CSS-Regeln verwenden wollen (die wir in einer eigenen <code class="inline">stylesheet.css</code> definieren) anstelle der von <strong class="text-strong">prosilver</strong>. <br> <br> <span style="color:#00BF00">Vorteile:</span> <ul><li>Vollständige Kontrolle darüber, welche CSS-Dateien eingebunden werden und in welcher Reihenfolge</li> <li>Keine Verwendung von <code class="inline">@import</code></li> <li>Ermöglicht keinerlei Doppelung zu verwenden</li></ul> <span style="color:#FF0000">Nachteile:</span> <ul><li>Komplexe Header Template-Datei</li></ul> <h5>Welche Methode soll ich verwenden?</h5> Das hängt davon ab, wie viele Veränderungen du vornehmen möchtest. Vom technischen und wartungsfreundlichem Standpunkt aus betrachtet, empfehlen wir Methode 3, wenn du relativ wenige Änderungen an den CSS-Regeln vornehmen möchtest. Bei vielen Anpassungen dagegen Methode 4. <br> <div class="note note-green"><strong class="text-strong">Profi-Tipp:</strong> Wenn du die Serverlast von CSS-Dateiübertragungen reduzieren willst, kannst du die Anzahl der CSS-Dateien verringern und alle CSS-Regeln in eine einzelne CSS-Datei schreiben. Die Umsetzung ist allerdings nicht für Anfänger geeignet und benötigt einen komplexeren Workflow (was den Umfang dieses Artikel übersteigt).</div> <h4><a name="extensionstyling"></a>Erweiterungen gestalten</h4> Dieser Abschnitt ist vollständig optional. Aber wenn die Nutzer deines Styles vermutlich verschiedene (beliebte) Erweiterungen (Extensions) nutzen, kannst du deinem Style CSS-Regeln ergänzen, die diese Erweiterungen unterstützen. <br> <br> Das ist besonders dann nützlich, wenn dein Style ein unkonventionelles Layout nutzt oder wesentliche Änderungen an den CSS- und Bilddateien besitzt, die Erweiterungen mit eigenem Style hässlich oder deplatziert aussehen lassen.<br> <br> Viele Erweiterungen mit Benutzeroberfläche werden ihr Stylesheet mit <code class="inline"></code> einbinden, so dass diese Datei in der <code class="inline">{$STYLESHEETS}</code>-Variable im <code class="inline"><head></code> ergänzt wird (wie <a href="https://www.phpbb.de/kb/create31style#notwelemente" class="postlink">hier</a> beschrieben).<br> <br> Da in vielen Styles <code class="inline">{$STYLESHEETS}</code> <span style="text-decoration:underline">nach</span> <code class="inline"><link href="{T_STYLESHEET_LINK}" /></code> eingebunden wird, werden die CSS-Regeln des Styles durch die CSS-Regeln der Erweiterungen überschrieben (wie beabsichtigt). <br> <br> Damit stehen Style-Autoren vor einem Problem. Es ist nicht möglich, CSS-Regeln für Erweiterungen in der Style eigenen <code class="inline">stylesheet.css</code> einzubinden, da sie überschrieben werden würden. Das kann umgangen werden, wenn man gemäß der <a href="http://www.w3.org/TR/css3-selectors/#specificity" class="postlink">CSS-Spezifität</a> stärkere Selektoren oder die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_%21important_exception" class="postlink">!important</a>-Eigenschaft verwendet, aber das ist keine elegante Lösung. <br> <br> Deshalb könnten wir einfach die Lade-Reihenfolge umdrehen, die deine erweiterungspezifischen CSS-Regeln einbindet. Der einfachste Weg, um dies zu tun, ist alle CSS-Regeln für die Gestaltung von Erweiterungen in eine eigene CSS-Datei zu verschieben (z. B.: <code class="inline">/theme/extensions.css</code>). <br> <br> Danach binden wir diese CSS-Datei im <code class="inline"><head></code> des Templates <span style="text-decoration:underline">nach</span> <code class="inline">{$STYLESHEETS}</code> ein. <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code>{$STYLESHEETS} <link href="{T_THEME_PATH}/extensions.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" /></code></pre></div> Mit dieser Methode wird sichergestellt, dass deine eigenen CSS-Regeln nach denen der Erweiterung geladen werden und diese so überschreiben.<br> <div class="note note-green"><strong class="text-strong">Profi-Tipp:</strong> Wenn (und nur dann) du einen sehr beliebten Style hast und eine bestimmte Erweiterung verschiedene Template-Dateien verwendet, die nicht gut mit deinem Style funktionieren, solltest du den Autor der Erweiterung kontaktieren. Wenn er/sie zustimmt, kannst du ihm eine spezielle Template-Datei für seine Erweiterung zur Verfügung stellen (ggf. via Github oder ähnlich).</div> <h4><a name="update30styleto31"></a>3.0.x Style zu 3.1.x aktualisieren</h4> Da das Meiste der Template-Engine von phpBB 3.1.x abwärtskompatibel zu 3.0.x ist, sollte es nicht so schwer sein, einen veralteten Style auf die Version 3.1.x zu aktualisieren.<br> <br> Um das Meiste aus den verfügbaren Funktionen zu machen, schlagen wir einen Blick auf die Seite <a href="https://wiki.phpbb.com/Template_Engine_Changes_in_3.1" class="postlink">Template Engine Changes in 3.1</a> des Development Wikis vor. Kombiniert mit den Informationen aus dem Wiki und diesem Artikel, sollte das Aktualisieren des Styles möglich sein (auch wenn es einen großen Aufwand darstellen mag).<br> <h4><a name="tippstricks"></a>Tipps & Tricks</h4> <h5>prosilver CSS-Klassen nachahmen</h5> Da die meisten Erweiterungen primär für <strong class="text-strong">prosilver</strong> entwickelt werden, werden sie wann immer möglich die CSS-Regeln von prosilver verwenden. Das hilft den Autoren von Erweiterungen, um die Anzahl der CSS-Regel, die sie schreiben müssen, maßgeblich zu verringern.<br> <br> Wenn Autoren einer Erweiterung einen Block mit Inhalt in Zeilen ergänzen will, könnten sie alle CSS-Regeln selbst schreiben oder sie könnten einfach die Regeln verwenden, die schon existieren. Das wahrscheinlichste Ergebnis ist, dass sie die prosilver CSS-Regeln verwenden, wie z. B. <code class="inline">ul.topiclist</code>.<br> <br> Wenn du möchstest, dass Erweiterungen mit deinem eigenen Style mit dem kleinst möglichem Aufwand funktionieren, ist es ein probates Mittel die CSS-Klassen an so ziemlich den gleichen Elementen zu verwenden.<br> <h5>Rekompilieren veralteter Style-Komponenten aktivieren</h5> Während du Veränderungen an den Template-Dateien vornimmst, ist es oft nützlich, wenn man die Änderungen sofort im Board sehen kann, ohne dass du jedesmal den Cache des Boards löschen musst. Ein nützlicher Trick ist es, das <em class="text-italics">Rekompilieren veralteter Style-Komponenten</em> während der Entwicklung des Styles zu aktivieren.<br> <br> Gehe dafür zu: Administrations-Bereich > Tab: Allgemein > Server-Konfigurationen > Serverlast > "Rekompilieren veralteter Style-Komponenten": Ja<br> <h5>Benutze Programme zum Vergleichen von Dateien</h5> Benutzer vergessen oft, welche Änderungen sie an den verschiedenen Styles vorgenommen haben. Oder sie tun sich schwer die Unterschiede zwischen verschiedenen Versionen von Dateien zu sehen. <br> <br> Bei diesen Problemen sind Programme nützlich, mit denen man verschiedene Dateien vergleichen kann. Fortgeschrittene Editoren haben solche Funktionen schon mit dabei, die dir helfen verschiedene Dateien oder ganze Ordner zu vergleichen. Alternativ kannst du Programme nutzen, die nur diese Funktion erfüllen. Ein paar beliebte Programm sind: <a href="http://winmerge.org/" class="postlink">WinMerge</a> und <a href="http://meldmerge.org/" class="postlink">Meld</a>.<br> <h5>Code-Validierung</h5> Validen HTML und CSS Code zu schreiben, erhöht maßgeblich die Chance, dass dein Style korrekt in verschiedenen Browsern auf verschiedenen Betriebssystemen und Geräten dargestellt wird. <br> <br> Wenn du deinen Style in der <a href="https://phpbbnew.local/customise/db/styles-2/" class="postlink">Style-Datenbank</a> auf phpBB.com anbieten willst, muss dein Style aus validem HTML und CSS bestehen.<br> <br> Glücklicherweise gibt es automatische Tools, die dir helfen Probleme zu im Code zu finden. Wir empfehlen den <a href="http://validator.w3.org/unicorn/" class="postlink">Unicorn - W3C's Unified Validator</a>. </div> </div> </div> </div> </div> </div> </div> <div id="page-footer" class="page-footer" role="contentinfo"> <div class="navbar" role="navigation"> <div class="inner"> <ul id="nav-footer" class="nav-footer linklist" role="menubar"> <li class="breadcrumbs"> <span class="crumb"><a href="./../" data-navbar-reference="home"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span>Startseite</span></a></span> <span class="crumb"><a href="./../community/index.php?sid=cd35e42af512afb6a8875a20042b12ef" data-navbar-reference="index"><span>Community</span></a></span> </li> <li class="rightside">Alle Zeiten sind <span title="Europa/Berlin">UTC+01:00</span></li> <li class="rightside"> <a href="/user/delete_cookies?sid=cd35e42af512afb6a8875a20042b12ef" data-ajax="true" data-refresh="true" role="menuitem"> <i class="icon fa-trash fa-fw" aria-hidden="true"></i><span>Alle Cookies löschen</span> </a> </li> <li class="rightside" data-last-responsive="true"> <a href="./../phpbbde/impressum/?sid=cd35e42af512afb6a8875a20042b12ef" role="menuitem"> <i class="icon fa-info-circle fa-fw" aria-hidden="true"></i><span>Impressum </span> </a> </li> <li class="rightside" data-last-responsive="true"> <a href="./../phpbbde/team/?sid=cd35e42af512afb6a8875a20042b12ef" role="menuitem"> <i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>Das Team</span> </a> </li> <li class="rightside" data-last-responsive="true"> <a href="/contactadmin?sid=cd35e42af512afb6a8875a20042b12ef" role="menuitem"> <i class="icon fa-envelope fa-fw" aria-hidden="true"></i><span>Kontakt</span> </a> </li> </ul> </div> </div> <div class="copyright"> <p class="footer-row"> <span class="footer-copyright">Powered by <a href="https://www.phpbb.com/">phpBB</a>® Forum Software © phpBB Limited</span> </p> <p class="footer-row"> <span class="footer-copyright">Deutsche Übersetzung durch <a href="https://www.phpbb.de/">phpBB.de</a></span> </p> <p class="footer-row" role="menu"> <a class="footer-link" href="./../community/ucp.php?mode=privacy&sid=cd35e42af512afb6a8875a20042b12ef" title="Datenschutz" role="menuitem"> <span class="footer-link-text">Datenschutz</span> </a> | <a class="footer-link" href="./../community/ucp.php?mode=terms&sid=cd35e42af512afb6a8875a20042b12ef" title="Nutzungsbedingungen" role="menuitem"> <span class="footer-link-text">Nutzungsbedingungen</span> </a> </p> <div class="sponsor-logo"> <a href="https://linevast.de/" rel="nofollow">hosted by Linevast.de <br> <img src="./../community/styles/phpBBdev1/theme/images/linevast.png" alt="Linevast.de" height="63" width="257"> </a> </div> </div> <div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="AJAX-Fehler" data-ajax-error-text="Bei der Verarbeitung deiner Anfrage ist ein Fehler aufgetreten." data-ajax-error-text-abort="Der Benutzer hat die Anfrage abgebrochen." data-ajax-error-text-timeout="Bei deiner Anfrage ist eine Zeitüberschreitung aufgetreten. Bitte versuche es erneut." data-ajax-error-text-parsererror="Bei deiner Anfrage ist etwas falsch gelaufen und der Server hat eine ungültige Antwort zurückgegeben."> <div id="darken" class="darken"> </div> </div> <div id="phpbb_alert" class="phpbb_alert" data-l-err="Fehler" data-l-timeout-processing-req="Bei der Anfrage ist eine Zeitüberschreitung aufgetreten."> <a href="#" class="alert_close"> <i class="icon fa-times-circle fa-fw" aria-hidden="true"></i> </a> <h3 class="alert_title"> </h3><p class="alert_text"></p> </div> <div id="phpbb_confirm" class="phpbb_alert"> <a href="#" class="alert_close"> <i class="icon fa-times-circle fa-fw" aria-hidden="true"></i> </a> <div class="alert_text"></div> </div> </div> </div> <div> <a id="bottom" class="anchor" accesskey="z"></a> </div> <script src="./../community/assets/javascript/jquery-3.7.1.min.js?assets_version=280"></script> <script src="./../community/assets/javascript/core.js?assets_version=280"></script> <script src="./../community/styles/phpBBdev1/template/forum_fn.js?assets_version=280"></script> <script src="./../community/styles/phpBBdev1/template/ajax.js?assets_version=280"></script> <script src="./../community/styles/phpBBdev1/template/phpbbde_navi.js?assets_version=280"></script> <script>(function(a){if(a.getElementsByTagName("pre").length){var c=a.getElementsByTagName("head")[0],b=a.createElement("script");a=a.createElement("link");b.type="text/javascript";b.onload=function(){hljs.initHighlighting()};b.async=!0;b.src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js";c.appendChild(b);a.type="text/css";a.rel="stylesheet";a.href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github-gist.min.css";c.appendChild(a)}})(document)</script> </body> </html>