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 - Code des Styles finden und ändern</title> <link rel="alternate" type="application/atom+xml" title="Feed - phpBB.de" href="/feed?sid=0948eef5e8ebe43ef2a7a9ee11c5358e"> <link rel="alternate" type="application/atom+xml" title="Feed - Neuigkeiten" href="/feed/news?sid=0948eef5e8ebe43ef2a7a9ee11c5358e"> <link rel="alternate" type="application/atom+xml" title="Feed - Neue Themen" href="/feed/topics?sid=0948eef5e8ebe43ef2a7a9ee11c5358e"> <link rel="alternate" type="application/atom+xml" title="Feed - Aktive Themen" href="/feed/topics_active?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">  <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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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="0948eef5e8ebe43ef2a7a9ee11c5358e" /> </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=0948eef5e8ebe43ef2a7a9ee11c5358e"><span class="subnavi-toggle"></span>Über uns</a> <ul class="subnavi"> <li><a href="./../phpbbde/chronik/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">phpBB.de-Chronik <span>Die Geschichte von phpBB.de in Wort und Bild</span></a></li> <li><a href="./../phpbbde/team/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Das Team <span>Erfahre mehr über das Team hinter phpBB.de</span></a></li> <li><a href="./../phpbbde/fragen/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Fragen an das Team <span>Ihr habt gefragt, wir haben geantwortet</span></a></li> <li><a href="/contactadmin?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Kontaktformular <span>Formular zur Kontaktaufnahme mit dem phpBB.de-Team</span></a></li> <li><a href="./../phpbbde/impressum/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Impressum <span>Das phpBB.de-Impressum</span></a></li> </ul> </li> <li class="navi-button but-phpbb"> <a href="./../infos/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e"><span class="subnavi-toggle"></span>phpBB</a> <ul class="subnavi"> <li><a href="./../infos/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Infos über phpBB <span>Erfahre mehr über phpBB</span></a></li> <li><a href="./../infos/tour/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Die phpBB-Tour <span>Was ist phpBB und wo bekomme ich es?</span></a></li> <li><a href="./../infos/features/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Feature-Vergleich <span>Lerne alle Features kennen, die dir phpBB bietet</span></a></li> <li><a href="./../infos/anpassen/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">phpBB anpassen <span>Nutze Erweiterungen und Styles, um phpBB deinen Wünschen anzupassen</span></a></li> <li><a href="./../infos/entwickler/3.3/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Informationen für Entwickler <span>phpBB-Projektarchiv, nützliche Links, ...</span></a></li> <li><a href="./../xref/3.3/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">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=0948eef5e8ebe43ef2a7a9ee11c5358e"><span class="subnavi-toggle"></span>Downloads</a> <ul class="subnavi"> <li><a href="./../downloads/pakete/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">phpBB-Pakete <span>Die aktuellen dt. Komplett- und Updatepakete von phpBB</span></a></li> <li><a href="./../downloads/sprachpakete/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Sprachpakete <span>Die aktuellen deutschen Sprachdateien für phpBB</span></a></li> <li><a href="./../downloads/entwicklung/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Entwicklung <span>Entwickler-Downloads</span></a></li> </ul> </li> <li class="navi-button but-docu"> <a href="./../support/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e"><span class="subnavi-toggle"> </span>Support</a> <ul class="subnavi"> <li><a href="./../support/doku/quickstart/3.3/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">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=0948eef5e8ebe43ef2a7a9ee11c5358e">Knowledge Base <span>Unsere Wissensdatenbank mit vielen und hilfreichen Artikeln</span></a></li> <li><a href="./../support/videos/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Videos <span>Unsere Supportvideos erklären Funktionen von phpBB</span></a></li> <li><a href="./../support/doku/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Dokumentation <span>Hier findest Du Dokumentationen zu phpBB</span></a></li> <li><a href="./../support/doku/perror/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">MySQL-Fehlercodes <span>Mysql Fehlercodes dokumentiert</span></a></li> <li><a href="./../support/doku/htpasswd/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">.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=0948eef5e8ebe43ef2a7a9ee11c5358e"><span class="subnavi-toggle"> </span>Community</a> <ul class="subnavi"> <li><a href="./../community/viewforum.php?f=145&sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Supportforen <span>Hilfe bei der Installation und Benutzung</span></a></li> <li><a href="./../community/viewforum.php?f=104&sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Communityforen<span>Allgemeine Diskussionen und phpBB-Usergroups</span></a></li> <li><a href="./../community/viewforum.php?f=148&sid=0948eef5e8ebe43ef2a7a9ee11c5358e">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=0948eef5e8ebe43ef2a7a9ee11c5358e">Styleforen<span>Du suchst einen neuen Style oder hast Probleme mit einem Style?</span></a></li> <li><a href="./../kb/knigge?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Der kleine phpBB.de-Knigge <span>Eine kleine Liste von wichtigen Regeln auf phpBB.de</span></a></li> <li><a href="./../phpbbde/chat/?sid=0948eef5e8ebe43ef2a7a9ee11c5358e">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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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%3D32&sid=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e"><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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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="p32" class="post bg1"> <div class="inner"> <div class="article-body"> <div class="postbody"> <div id="post_content32"> <h2 class="article-title"><a href="/kb/viewarticle?a=32&sid=0948eef5e8ebe43ef2a7a9ee11c5358e">Code des Styles finden und ändern</a></h2> <p class="article-meta"><strong>Geschrieben von:</strong> <a href="./../community/memberlist.php?mode=viewprofile&u=28811&sid=0948eef5e8ebe43ef2a7a9ee11c5358e" style="color: #BA0303;" class="username-coloured">Crizzo</a><br> <strong>Veröffentlicht am:</strong> 10.02.2020 12:04<br /> <strong>zuletzt geändert:</strong> 18.02.2020 15:14<br> <strong>Zugriffe:</strong> 12610</p> <p class="article-description"><strong>Beschreibung:</strong> Dieser Artikel beschreibt, wie bestimmte Stellen im Code gefunden und geändert werden.</p> <p class="article-categories"><strong>Kategorie:</strong> <a href="/kb/index?c=13&sid=0948eef5e8ebe43ef2a7a9ee11c5358e">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=32&sid=0948eef5e8ebe43ef2a7a9ee11c5358e]Knowledge Base - Code des Styles finden und ändern[/url]</code> </div> <hr> Irgendwann kommt jeder Neu-Admin an den Punkt, wo er kleinere Änderungen an der Optik seines Forums vornehmen will. Sei es nur ein zusätzlicher Link im unteren Bereich oder Kopf der Seite, eine Farbe eines Fensters oder Rahmens oder vielleicht doch größere Änderungen in der Beitragsansicht. Irgendwie und irgendwo muss man anfangen und Template- und CSS-Dateien gibt es viele, wo also anfangen mit suchen? Diese Fragen werden in diesem Artikel geklärt und an Beispielen wird der Umgang mit "Firebug" und dem Texteditor "notepad++" gezeigt.<br> <br> Dieser Artikel setzt voraus, dass du die Grundlagen von CSS und HTML beherrschst. Zusätzlich solltest du Dateien von deinem Webspace/Server runter- und wieder hochladen können. Nützliche Links zum CSS und HTML lernen oder auffrischen gibt es hier: <a href="https://www.phpbb.de/kb/viewarticle?a=61" class="postlink">Wo finde ich Scripte & Tutorials?</a><br> <h4><a name="vorbereiten"></a>Vorbereitungen</h4> Zuerst brauchst du einen tauglichen Text-Editor. Am besten einen der HTML- und CSS-Syntax-Highlighting unterstützt. D.h. der Code wird erkannt und entsprechend hervorgehoben. Das erleichtert das Editieren ungemein. Wir empfehlen den Text-Editor <a href="http://notepad-plus-plus.org/download/" class="postlink">notepad++</a>.<br> <br> Um einfach die passende HTML-Elemente und CSS-Regeln identifizieren zu können, benötigst du ein Tool wie <a href="https://getfirebug.com/" class="postlink">Firebug</a>. Manche Browser bringen sowas Ähnliches schon von Haus aus mit oder es gibt Addons die ähnliches veranstalten. Dort bitte nach dem Link "Element untersuchen" und ähnliches im Kontextmenü eures Browsers Ausschau halten. <br> <h4><a name="html"></a>HTML-Code finden und ändern</h4> Das erste Beispiel dreht sich um das Finden von HTML-Code in der Themenansicht <code class="inline">viewtopic.php?f=1&t=1</code> und dem Style "prosilver". <br> <strong class="text-strong">Ziel</strong>: Der Nickname des Beitragsautors soll statt unter dem Avatar über dem Avatar angezeigt werden. <br> <a href="https://www.phpbb.de/images/doku/kb/html_css_finden/html1.png" class="postlink">Bild: Ansicht eines Beitrags in einem Thema</a><br> <br> Du solltest dich jetzt in der Themenansicht befinden. Jetzt klickst du auf den "Käfer" von Firebug, am unteren Rand des Browserfensters öffnet sich ein kleines Fenster. Das Fenster ist in zwei Spalten eingeteilt: rechts ist der HTML-Code zu sehen und links der CSS-Code des jeweilig markierten HTML-Elements. Im Beispiel-Bild ist <code class="inline"><body></code> markiert und deshalb werden rechts davon die entsprechenden CSS-Regeln angezeigt. <br> <a href="https://www.phpbb.de/images/doku/kb/html_css_finden/html2.png" class="postlink">Bild: Firebug-Fenster im Browser</a><br> <br> In der linken, oberen Ecke des Firebug-Fensters ist ein blauer Pfeil. Diesen klickst du jetzt an und fährst mit der Maus über das Forum. Du siehst nun, dass automatisch um deinen Mauszeiger verschiedenen große Blaukästen ausgewählt werden und sich in HTML-Spalte der Code ändert, sprich es werden andere HTML-Elemente markiert. <br> <br> Jetzt fährst du mit dem Mauszeiger über den Nick des Beitragsautors (im Bild: Admin) und klickst ihn an. In der HTML-Spalte siehst du jetzt den dazu gehörigen HTML-Code. Das hilft uns noch nicht besonders viel weiter. Jetzt scrollst du in der HTML-Spalte ein wenig nach oben. Alle Elemente, die noch andere Element in sich haben, haben ein kleines "Plus" davor. Mit Klick auf das "Plus" öffnen sie sich und zeigen die enthaltenen Elemente. <br> <a href="https://www.phpbb.de/images/doku/kb/html_css_finden/html3.png" class="postlink">Bild: Mit Firebug ausgewählter Nickname und Markierung in HTML-Spalte</a><br> <br> Das sichtbare <code class="inline"><dt></code> ist so ein Element und es ist schon geöffnet, weil wir sein Kinderelement <code class="inline"><a class="username-coloured" ... >Admin</a></code> markiert haben. Direkt über <code class="inline"><dt></code> ist sein Elternelement, nämlich der Anfang der Definitionsliste: <code class="inline"><dl id="profile1" class="postprofile"></code> Diese Angabe reicht uns, um den HTML-Code im Template zu finden. <br> <br> Nun brauchen wir notepad++. Also das Programm starten. Oben im Menü wählen wir <strong class="text-strong">Suchen</strong> und dann <strong class="text-strong">In Dateien suchen</strong>. In nun erscheinenden Fenster werden die Einstellungen wie im Bild getroffen und zusätzlich bei <strong class="text-strong">Verzeichnis</strong> wird der Pfad zum Template-Verzeichnis von "prosilver" eintragen:<br> <strong class="text-strong">...\styles\prosilver\template</strong> (die "..." sind ein Ersatz, bei dir wird sowas wie <em class="text-italics">C:\phpBB3</em> davor stehen; wenn du den Pfad nicht auswendig kennst, kannst du auf den "..."-Button rechts neben dem Eingabefeld auswählen)<br> <a href="https://www.phpbb.de/images/doku/kb/html_css_finden/notepad1.png" class="postlink">Bild: Notepad++ "In Dateien suchen"</a><br> <br> Es wird absichtlich nicht nach dem ganzen Code <code class="inline"><dl id="profile1" class="postprofile"></code> gesucht, weil er sich in Form und Ziffer unterscheiden kann und wir dann nichts finden. Jetzt auf <strong class="text-strong">Alle suchen</strong> klicken. Das kann einen Moment dauern, ein bisschen Geduld. <br> <br> Nun hat sich in Notepad++ auch ein kleines Fenster am unteren Rand geöffnet. Es zeigt an: <ul><li>nach was gesucht wurde: <code class="inline">Seach "class="postprofile""</code></li> <li>wie viele Treffer es gibt: <code class="inline">(3 hits in 3 files)</code> (3 Treffer in 3 Dateien)</li> <li>und die Treffer an sich.</li></ul> Letzteres ist immer so ausgebaut: <blockquote class="uncited"><div> F:\xampp\htdocs\blank\styles\prosilver\template\search_results.html (1 hits)<br> Line 101: <dl class="postprofile"> </div></blockquote> Pfad zur Datei, Zeile des Fundes inkl. kurzem Auszug aus dem HTML-Code. <br> <a href="https://www.phpbb.de/images/doku/kb/html_css_finden/notepad3.png" class="postlink">Bild: Suchergebnisse von Notepad++</a><br> <br> In unserem Fall gibt es 3 Treffer in 3 Dateien. Da wir in der Themenansicht mit dem Link <code class="inline">viewtopic.php?f=1& t=1</code> sind, ist das Ergebnis zur <strong class="text-strong">viewtopic_body.html</strong> am sinnvollsten: <blockquote class="uncited"><div>F:\xampp\htdocs\blank\styles\prosilver\template\viewtopic_body.html (1 hits)<br> Line 169: <dl class="postprofile" id="profile{postrow.POST_ID}"></div></blockquote> Per Doppelklick auf die Zeile: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code>Line 169: <dl class="postprofile" id="profile{postrow.POST_ID}"></code></pre></div>öffnet Notepad++ automatisch die Datei und springt die Zeile 169 an. <br> <a href="https://www.phpbb.de/images/doku/kb/html_css_finden/notepad2.png" class="postlink">Bild: Gefundene Code-Stelle vor der Änderung</a><br> <br> Der erste Schritt ist gemacht. Jetzt müssen wir den Code für den Nicknamen finden. Durch die Firebug-Anzeige wissen wir, dass sich das Nickname innerhalb des <code class="inline"><dt></code>-Elements befindet, was direkt nach <code class="inline"><dl class="postprofile" id="profile{postrow.POST_ID}"></code> kommt. Letzteres ist unser Fund. Zurück zum Browser und Firebug sehen wir, dass der Nick ein Link ist <code class="inline"><a></code>, der sich direkt nach einem <code class="inline"><br></code> ist (Achtung: Firebug macht zwischen <code class="inline"><br></code> und <code class="inline"><br /></code> keinen Unterschied in der Anzeige. Da das phpBB XHTML 1.0 Strict ist, suchen wir nach <code class="inline"><br /></code>)<br> <br> Wir sehen sofort diese Stelle: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code><dt>  <a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a>{postrow.POSTER_AVATAR}<br />  <strong>{postrow.POST_AUTHOR_FULL}</strong>{postrow.POST_AUTHOR_FULL} </dt></code></pre></div> Das umschließende <code class="inline"><dt></code>-Element ist vorhanden und dadrin die Abfrage bezüglich <code class="inline">AVATAR</code> und die Ausgabe des Avatar, direkt dahinter das <code class="inline"><br /></code>. Also muss danach der Link zum Nicknamen kommen. Stattdessen findet man nur dies hier: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code><strong>{postrow.POST_AUTHOR_FULL}</strong>{postrow.POST_AUTHOR_FULL}</code></pre></div> Kein <code class="inline"><a></code> und zwei verschiedene Ausgaben. Das <code class="inline"><strong></code> können wir auch nicht ausmachen. Aber durch den Text der Variable <code class="inline">{postrow.POST_AUTHOR_FULL}</code> liegt der Verdacht nahe, dass wir richtig sind. <br> <br> Die einfachste Lösung ist jetzt: ausprobieren. Alternativ: kann man der Variable hinterher gehen und schauen, wie sie erstellt und womit gefüllt wird. <br> <br> Wir markieren also die ganze Zeile 174 (einfach mit der Maus: drücken, halten und drüber fahren; der Code wird dunkelgrau hinterlegt) und schneiden sie aus (Tastenkombination: "STRG + X" oder Menüleiste: "Bearbeiten --> Ausschneiden") und fügen den Code über dem Avatar ein. Dazu setzen wir den Cursor in Zeile 171 vor <code class="inline"></code> und drücken einmal "Enter" und danach fügen wir den Code in Zeile 171 ein (Tastenkombination "STRG + V" oder Menüleiste: "Bearbeiten einfügen"). Das eben erwähnte <code class="inline"><br /></code> muss nun auch umplatziert werden. Wir löschen es hinter <code class="inline">{postrow.POSTER_AVATAR}</code> und tragen es direkt hinter <code class="inline">{postrow.POST_AUTHOR_FULL}</code> in Zeile 171 neu ein. <br> <br> Die Datei muss jetzt noch gespeichert und hochgeladen werden. Danach muss das Template des phpBB aktualisiert werden, siehe <a href="https://www.phpbb.de/kb/viewarticle?a=25" class="postlink">Einen Style installieren und benutzen</a><br> <br> Das war es schon. Im nächsten Beispiel suchen und finden wir CSS-Code. <br> <h4><a name="css"></a>CSS-Code finden und ändern</h4> Jetzt wollen wir uns mit dem CSS-Code beschäftigen. Jeder CSS-Code, genauer gesagt die CSS-Regeln für den Style sind im Ordner <strong class="text-strong">\styles\prosilver\theme\</strong> gespeichert. Je nach Style in einer oder mehreren Dateien. Wir nehmen uns wieder "prosilver" an. Diesmal möchten wir den blauen Hintergrund der Kategorien auf der Foren-Übersicht verändern. Wir befinden uns also hier: <code class="inline">/index.php</code><br> <a href="https://www.phpbb.de/images/doku/kb/html_css_finden/css1.png" class="postlink">Bild: Ansicht des Kategorie-Hintergrunds</a><br> <br> Nun wählst du wieder den Käfer von Firebug an und danach auf den blauen Pfeil. Jetzt wird die Kategorie markiert und zwar so, dass der blaue Rahmen von Firebug die ganze Kategorie, und nur die eine Kategorie, umschließt. In der HTML-Spalte von Firebug ist das HTML-Element <code class="inline"><div class="forabg"></code> markiert. <br> <a href="https://www.phpbb.de/images/doku/kb/html_css_finden/css2.png" class="postlink">Bild: Ausgewählte Kategorie mit Anzeige von CSS-Regeln in Firebug</a><br> <br> In der CSS-Spalte wird ganz oben folgende CSS-Regel angezeigt: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code>.forabg { background-color: #0076B1; background-image: url("./styles/prosilver/theme/images/bg_list.gif"); }</code></pre></div> Jetzt kann man auf <code class="inline">#0076B1</code> klicken und die Farbe durch eine andere ersetzen, wir nehmen zum Beispiel mal <code class="inline">#FF0000</code>. Wenn du das tust, wirst du bei einer Kategorie die nur ein Forum enthält keine Änderung feststellen. Schuld ist die Angabe des Hintergrundbildes direkt da drunter. Diese überdeckt die neue Farbe. Also klickst du auf <code class="inline">url("./styles/prosilver/theme/images/bg_list.gif")</code> und löscht es zum testen einfach mal raus. Die Kategorie ist jetzt rot. Damit haben wir die Bestätigung, dass wir die richtige CSS-Regel gefunden haben. <br> <br> Also wieder Notepad++ gestartet und zu <strong class="text-strong">Suchen --> In Dateien suchen</strong>. Diesmal suchen wir nach dem Selektor <code class="inline">.forabg</code>. Also Verzeichnis wird: <strong class="text-strong">styles\prosilver\theme</strong> eingetragen. Der Filter sollte auf <code class="inline">*.* oder *.css</code> stehen. <strong class="text-strong">Alle suchen</strong>.<br> <br> Notepad++ zeigt jetzt 11 Treffer in 4 Dateien an. Das ist auf den ersten Blick ein wenig unübersichtlich, aber ein genauerer Blick löst die Sache auf. Der erste Treffer zeigt einen Selektor <code class="inline">.rtl .forabg</code> an, dass nicht der aus der Firebug, wir suchen einen alleinstehenden Klassen-Selektor. Diesen gibt es nur in der <strong class="text-strong">colours.css</strong> und <strong class="text-strong">common.css</strong>. Da wir eine Farbe ändern wollen, probieren wir zuerst <strong class="text-strong">colours.css</strong>, also Doppelklick auf <code class="inline">Line 60: .forabg {</code>.<br> <a href="https://www.phpbb.de/images/doku/kb/html_css_finden/css3.png" class="postlink">Bild: Ansicht der gefundenen Code-Stelle in der colours.css</a><br> <br> Wir erhalten die CSS-Regel in der <strong class="text-strong">colours.css</strong>: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a></p><pre><code>.forabg { background-color: #0076b1; background-image: url("{T_THEME_PATH}/images/bg_list.gif"); }</code></pre></div> Das sieht genauso aus, wie in der CSS-Spalte von Firebug. Wir ändern die Farbe auf <code class="inline">#FF0000</code> und löschen das Hintergrundbild (Zeile 62). Danach wird die Datei gespeichert, hochgeladen und gemäß KB:tippstyles das "Theme" aktualisiert. Die Kategorien sind jetzt rot hinterlegt. <br> <br> Auf diese Art könnt ihr jede CSS-Regel, jeden HTML-Code-Abschnitt finden und ändern. </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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" 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=0948eef5e8ebe43ef2a7a9ee11c5358e" title="Datenschutz" role="menuitem"> <span class="footer-link-text">Datenschutz</span> </a> | <a class="footer-link" href="./../community/ucp.php?mode=terms&sid=0948eef5e8ebe43ef2a7a9ee11c5358e" 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>