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="robots" content="noindex" /> <title>phpBB.de • Themen-Symbole</title> <link href="./styles/phpBBdev1/theme/print.css" rel="stylesheet"> </head> <body id="phpbb" class="ltr"> <div id="wrap" class="wrap"> <a id="top" class="top-anchor" accesskey="t"></a> <div id="page-header"> <h1>phpBB.de</h1> <p>phpBB.de - Die deutsche phpBB-Community<br /><a href="https://www.phpbb.de/community/">https://www.phpbb.de/community/</a></p> <h2>Themen-Symbole</h2> <p><a href="https://www.phpbb.de/community/viewtopic.php?t=247359">https://www.phpbb.de/community/viewtopic.php?t=247359</a></p> </div> <div id="page-body" class="page-body"> <div class="page-number">Seite <strong>1</strong> von <strong>2</strong></div> <div class="post"> <h3>Themen-Symbole</h3> <div class="date">Verfasst: <strong>06.09.2024 12:14</strong></div> <div class="author">von <strong>STK</strong></div> <div class="content">Hallo zusammen,<br> <br> ich w眉rde gerne die unterschiedlichen Folder-Icons (rot f眉r ungelesene, * mit eigenen Beitr盲gen, etc.) durch das Themen-Symbol ersetzen, sofern eines ausgew盲hlt wurde. <br> Ich hab mir die Dateien angeschaut und bin nicht sicher, ob ein reines Template-Event ausreicht und wie der Code daf眉r aussehen m眉sste, dass das Themen-Symbol nicht linksunten am Folder-Icon h盲ngt, sondern dieses ersetzt.<br> Die Zeilen im Template: <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles ausw盲hlen</a></p><pre><code> <dl class="row-item {topicrow.TOPIC_IMG_STYLE}"> <dt style="background-image: url('{T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}'); background-repeat: no-repeat;" title="{topicrow.TOPIC_FOLDER_IMG_ALT}"></code></pre></div> Kann mir da jemand helfen?<br> <br> Vielen Dank und ein sch枚nes Wochenende!<br> STK</div> </div> <hr /> <div class="post"> <h3>Re: Themen-Symbole</h3> <div class="date">Verfasst: <strong>06.09.2024 17:04</strong></div> <div class="author">von <strong>LukeWCS</strong></div> <div class="content">Hallo <br> <br> 1. Suchst du jetzt eine Ext, oder brauchst du Template Code? <br> <br> Wenn ersteres, muss ich passen, ist mir keine bekannt.<br> Wenn letzteres, w盲rst du hier nicht richtig und ich w眉rde verschieben. In dem Fall k枚nnte ich aber helfen, es m眉ssten 2 Zeilen ge盲ndert werden.<br> <br> 2. Wenn du das prim盲re Topic Icon durch das sekund盲re ersetzen willst, willst du das dann in voller Gr枚sse angezeigt haben? Ich vermute mal ja, aber Vermutungen helfen beim Programmieren halt nicht. <img class="smilies" src="./images/smilies/icon_e_wink.gif" width="15" height="17" alt=";)" title="Zwinkern"></div> </div> <hr /> <div class="post"> <h3>Re: Themen-Symbole</h3> <div class="date">Verfasst: <strong>07.09.2024 10:59</strong></div> <div class="author">von <strong>STK</strong></div> <div class="content">Hallo,<br> <br> zu 1.<br> Ich brauche was geeignetes, um meinen Plan umzusetzen;)<br> Eine Extension, die nur Template Code erfordert und keine angepassten Variablen, krieg ich inzwischen hin, denk ich. Allerdings check ich die Codezeilen im Eingangsbeitrag nicht so recht.<br> Hilfe beim 脛ndern der Zeile w盲re auch recht, wenn es ansonsten eine komplexere Extension br盲uchte.<br> <br> zu 2.<br> Ich w眉rde die Topic-Icons in derselben Gr枚脽e erstellen, wie die Folder-Icons.<br> <br> Gr眉脽e<br> STK</div> </div> <hr /> <div class="post"> <h3>Re: Themen-Symbole</h3> <div class="date">Verfasst: <strong>07.09.2024 12:52</strong></div> <div class="author">von <strong>LukeWCS</strong></div> <div class="content">Mahlzeit<br> <blockquote cite="./viewtopic.php?p=1428571&sid=3cc277902609e19d85b1e6688294cbc3#p1428571"><div><cite><a href="./memberlist.php?mode=viewprofile&u=136548&sid=3cc277902609e19d85b1e6688294cbc3">STK</a> hat geschrieben: <a href="./viewtopic.php?p=1428571&sid=3cc277902609e19d85b1e6688294cbc3#p1428571" aria-label="Zitierten Beitrag anzeigen" data-post-id="1428571" onclick="if(document.getElementById(hash.substr(1)))href=hash"><i class="icon fa-arrow-circle-up fa-fw" aria-hidden="true"></i></a><span class="responsive-hide">07.09.2024 10:59</span></cite> Eine Extension, die nur Template Code erfordert und keine angepassten Variablen, krieg ich inzwischen hin, denk ich.</div></blockquote> Das ist schon mal gut, da man sich mit einer Template Ext in vielen F盲llen 脛nderungen an Original Dateien sparen kann. Allerdings nicht in diesem Fall. <br> <blockquote class="uncited"><div>Allerdings check ich die Codezeilen im Eingangsbeitrag nicht so recht.</div></blockquote> Damit kann ich nichts anfangen. Mach doch einfach mal eine nummerierte Liste mit den Dingen die unklar sind, dann kann man das gezielt kl盲ren.<br> <blockquote class="uncited"><div>Hilfe beim 脛ndern der Zeile w盲re auch recht, wenn es ansonsten eine komplexere Extension br盲uchte.</div></blockquote> Es gibt hier mehrere "Probleme", die nur mit einem HTML Event alleine (wenn man eine Ext baut) nicht gel枚st werden k枚nnen und auch in dem Fall mit einem PHP Event eine 脛nderung von Daten alleine nicht helfen w眉rde, soweit ich das sehe. Mit einem HTML Event kann ja nur etwas hinzugef眉gt werden, aber bestehende Daten oder Strukturen nicht direkt manipuliert werden, jedenfalls nicht immer. Hier br盲uchte es zus盲tzlich Javascript um die Strukturen 盲ndern zu k枚nnen. Die nachtr盲gliche 脛nderung des DOM Objekts mittels JS geht zwar so gut wie immer, sollte aber nur dann benutzt werden, wenn man die 脛nderung wirklich absolut zwingend braucht und es auch wirklich sonst keine Alternative gibt.<br> <br> Eins der Probleme in Bezug auf saubere Manipulation ist der Fakt, dass das prim盲re Icon per CSS Klasse eingebunden wird, das sekund盲re aber per Inline-CSS.<br> <blockquote class="uncited"><div>Ich w眉rde die Topic-Icons in derselben Gr枚脽e erstellen, wie die Folder-Icons.</div></blockquote> Okay, also wie vermutet. Die ben枚tigte Datei und die exakte Stelle hast du ja schon ausfindig gemacht. <img class="smilies" src="./images/smilies/icon_e_smile.gif" width="15" height="17" alt=":)" title="L盲cheln"> Ersetze die 2. und 3. Zeile des gezeigten Codes durch das:<br> <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles ausw盲hlen</a></p><pre><code> <dl class="row-item{{ !(topicrow.TOPIC_ICON_IMG && S_TOPIC_ICONS) ? ' ' ~ topicrow.TOPIC_IMG_STYLE }}"> <dt{% if topicrow.TOPIC_ICON_IMG && S_TOPIC_ICONS %} style="background-image: url('{{ T_ICONS_PATH }}{{ topicrow.TOPIC_ICON_IMG }}'); background-repeat: no-repeat; background-size: auto; background-position: 10px 50%;"{% endif %} title="{{ topicrow.TOPIC_FOLDER_IMG_ALT }}"> </code></pre></div> Auch hier gilt: wenn was unklar ist, genau benennen was unklar ist.</div> </div> <hr /> <div class="post"> <h3>Re: Themen-Symbole</h3> <div class="date">Verfasst: <strong>07.09.2024 13:34</strong></div> <div class="author">von <strong>STK</strong></div> <div class="content">Mahlzeit ebenso und herzlichen Dank!<br> <br> Die Code盲nderung bewirkt genau, was ich mir gew眉nscht hatte! Aber das wusstest du ja nat眉rlich schon <img class="smilies" src="./images/smilies/icon_e_wink.gif" width="15" height="17" alt=";)" title="Zwinkern"><br> <br> Im Grunde kapier ich den Code maximal insofern, dass ich grad noch die Stellen finde, was wo passiert. Bei phpBB2 hab ich auch das "Wie" noch besser nachvollziehen k枚nnen, aber seit phpBB3 versteh ich oft nur noch Bahnhof. In diesem Fall dann auch bzgl CSS und Inline CSS, wovon ich (noch) gar keinen Plan hab.<br> <br> Mit deinen 2 Codezeilen hast du mir also sehr geholfen!<br> Damit fragst du quasi ab, ob es ein Topic-Icon gibt und Topic-Icons erlaubt(?)/眉bergeben sind/wurden, oder? Wenn nicht, bleibt alles beim Alten.<br> In der 2. Zeile fragst du das nochmal und wenn es ein Topic-Icon gibt, machst du es so gro脽, dass es einfach 眉ber dem Folder-Icon liegt, richtig?<br> Bin mir nicht sicher...<br> <br> Gr眉脽e<br> STK</div> </div> <hr /> <div class="post"> <h3>Re: Themen-Symbole</h3> <div class="date">Verfasst: <strong>07.09.2024 14:35</strong></div> <div class="author">von <strong>LukeWCS</strong></div> <div class="content"><blockquote cite="./viewtopic.php?p=1428574&sid=3cc277902609e19d85b1e6688294cbc3#p1428574"><div><cite><a href="./memberlist.php?mode=viewprofile&u=136548&sid=3cc277902609e19d85b1e6688294cbc3">STK</a> hat geschrieben: <a href="./viewtopic.php?p=1428574&sid=3cc277902609e19d85b1e6688294cbc3#p1428574" aria-label="Zitierten Beitrag anzeigen" data-post-id="1428574" onclick="if(document.getElementById(hash.substr(1)))href=hash"><i class="icon fa-arrow-circle-up fa-fw" aria-hidden="true"></i></a><span class="responsive-hide">07.09.2024 13:34</span></cite> Mahlzeit ebenso und herzlichen Dank!</div></blockquote> Danke f眉r die R眉ckmeldung. <img class="smilies" src="./images/smilies/icon_e_smile.gif" width="15" height="17" alt=":)" title="L盲cheln"> <br> <blockquote class="uncited"><div>Die Code盲nderung bewirkt genau, was ich mir gew眉nscht hatte! Aber das wusstest du ja nat眉rlich schon <img class="smilies" src="./images/smilies/icon_e_wink.gif" width="15" height="17" alt=";)" title="Zwinkern"></div></blockquote> Nein, ich habs nur vermutet, wissen tu ich es erst jetzt durch deine positive R眉ckmeldung. Wir hatten hier schon 枚fter das Problem, das Hilfesuchende zwar ganz genau wissen (meistens jedenfalls ^^) was sie wollen, aber das nicht pr盲zise den Helfern vermitteln k枚nnen.<br> <blockquote class="uncited"><div>Im Grunde kapier ich den Code maximal insofern, dass ich grad noch die Stellen finde, was wo passiert.</div></blockquote> Das ist schon mal viel Wert und eine wichtige Voraussetzung, wenn man bei phpBB etwas 盲ndern will. <img class="smilies" src="./images/smilies/icon_e_smile.gif" width="15" height="17" alt=":)" title="L盲cheln"> <br> <blockquote class="uncited"><div>Bei phpBB2 hab ich auch das "Wie" noch besser nachvollziehen k枚nnen, aber seit phpBB3 versteh ich oft nur noch Bahnhof. In diesem Fall dann auch bzgl CSS und Inline CSS, wovon ich (noch) gar keinen Plan hab.</div></blockquote> Ja, das gesamte Web 脰kosystem ist in den letzten 10-15 Jahren massiv m盲chtiger geworden und dadurch leider auch massiv komplexer. Alleine CSS hat heute endlich fast all die sch枚nen Sachen, die ich mir schon vor 20 Jahren gew眉nscht hatte. Das hat allerdings auch leider eine gewisse Komplexit盲t zur Folge, wenn man soviele sch枚ne Sachen zur Verf眉gung hat. <br> <br> Inline-CSS ist 眉brigens CSS das direkt in einem HTML Element eingef眉gt wird. Das "Gegenteil" davon ist extern definiertes CSS das dann per Klasse oder ID einem Element zugeordnet wird.<br> <blockquote class="uncited"><div>Mit deinen 2 Codezeilen hast du mir also sehr geholfen!<br> Damit fragst du quasi ab, ob es ein Topic-Icon gibt und Topic-Icons erlaubt(?)/眉bergeben sind/wurden, oder? Wenn nicht, bleibt alles beim Alten.</div></blockquote> Genau. Wenn kein sekund盲res Themen Icon (custom topic icon) vorhanden ist, dann schreib die CSS Klasse des prim盲ren Icons rein, wie bisher auch. Damit frage ich quasi exakt das Gegenteil von dem ab, was in der 2. Zeile abgefragt wird, indem ich einfach die Abfrage negiere mit <code class="inline">!</code> (entspricht <code class="inline">not</code>).<br> <blockquote class="uncited"><div>In der 2. Zeile fragst du das nochmal und wenn es ein Topic-Icon gibt, machst du es so gro脽, dass es einfach 眉ber dem Folder-Icon liegt, richtig?</div></blockquote> Nicht ganz. Die Abfrage der 2. Zeile ist quasi unver盲ndert, sie ist aber jetzt in Twig Syntax notiert, nicht mehr in der alten Template Syntax, die man ohnehin bei allem neuen nicht mehr verwenden soll (und das gilt 眉brigens schon seit phpBB 3.1.0). Was ich in der 2. Zeile tats盲chlich mache, das hast du korrekt erkannt, ist ein zus盲tzliches Hinzuf眉gen von weiterem Inline-CSS, also pr盲zise: <code class="inline">background-size: auto; background-position: 10px 50%;</code>. Damit wird bei der ersten Eigenschaft erreicht, dass das Icon in der Originalgr枚sse angezeigt wird und bei der zweiten Eigenschaft, dass es exakt so wie die prim盲ren Icons positioniert wird.<br> <br> Da wird auch in dem Sinne nichts "眉berlagert", sondern es wird tats盲chlich in dem Fall nur das sekund盲re Icon an den Browser ausgeliefert. Von "眉berlagern" oder "verstecken" halte ich nichts, denn was der User sowieso nicht sehen muss, dass muss man auch gar nicht erst an den Browser ausliefern, denn das w盲re einfach nur unn枚tiger Traffic.</div> </div> <hr /> <div class="post"> <h3>Re: Themen-Symbole</h3> <div class="date">Verfasst: <strong>07.09.2024 15:06</strong></div> <div class="author">von <strong>Talk19zehn</strong></div> <div class="content"><strong class="text-strong"><em class="text-italics">Prosilver 3.3.12</em></strong><br> Hello, zum *Beispiel zeigt die Suche nach eigenen Beitr盲gen -> nun beispielsweise -> jenes erkannte Konstrukt, wie deinerseits erw盲hnt:<br> <br> "Themen-Symbol nicht linksunten am Folder-Icon h盲ngt ...." (das Sternchen bezieht sich auf "mine" (vgl. colours.css -> /* Forum icons & Topic icons */)<br> <br> *) background-image: url('./images/icons/misc/heart.gif'); -><br> vgl. content.css<br> <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles ausw盲hlen</a></p><pre><code>dl.row-item dt { background-repeat: no-repeat; background-position: 5px 95%; background-size: 17px; }</code></pre></div> und 盲ndere ggf. und falls Bedarf best眉nde: Tipp am Rande on the Fly ....<br> <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles ausw盲hlen</a></p><pre><code>dl.row-item dt { background-repeat: no-repeat; background-position: 28px 10%; background-size: 17px; }</code></pre></div> <br> 28px entsprechen einem linksseitigen Abstand und 10% einem Abstand von oben. Jene 脛nderung greift "global". Das bedeutet je nach Update-Methode, dass diese 脛nderung, sofern gew眉nscht, u.U. erneut hinzugef眉gt / ge盲ndert werden muss.<br> <br> LG<br> <br> Edit:<br> In meinen Tests hat diese Anpassung keinen Einfluss auf die 脛nderungen durch LukeWCS 禄 Beitrag vom 7. Sep 2024, 12:52<br> Gr眉脽e</div> </div> <hr /> <div class="post"> <h3>Re: Themen-Symbole</h3> <div class="date">Verfasst: <strong>07.09.2024 15:20</strong></div> <div class="author">von <strong>STK</strong></div> <div class="content">@Luke:<br> Vielen Dank f眉r deine geduldigen Erkl盲rungen!<br> Die Abfrage in Zeile 1 kapier ich dann immer noch nicht ganz.<br> TOPIC_IMAGE_STYLE ist doch f眉r das Folder-Icon zust盲ndig?<br> Wenn kein Topic-Icon, dann gibt's class="row-item{ }" ?<br> ! verneint, wof眉r steht denn das ~?<br> <br> @Talk:<br> Danke auch dir! Hab mir die conten.css gleich angeschaut und die Zuordnung wurde klarer:)</div> </div> <hr /> <div class="post"> <h3>Re: Themen-Symbole</h3> <div class="date">Verfasst: <strong>07.09.2024 16:22</strong></div> <div class="author">von <strong>LukeWCS</strong></div> <div class="content"><blockquote cite="./viewtopic.php?p=1428577&sid=3cc277902609e19d85b1e6688294cbc3#p1428577"><div><cite><a href="./memberlist.php?mode=viewprofile&u=136548&sid=3cc277902609e19d85b1e6688294cbc3">STK</a> hat geschrieben: <a href="./viewtopic.php?p=1428577&sid=3cc277902609e19d85b1e6688294cbc3#p1428577" aria-label="Zitierten Beitrag anzeigen" data-post-id="1428577" onclick="if(document.getElementById(hash.substr(1)))href=hash"><i class="icon fa-arrow-circle-up fa-fw" aria-hidden="true"></i></a><span class="responsive-hide">07.09.2024 15:20</span></cite> Vielen Dank f眉r deine geduldigen Erkl盲rungen!</div></blockquote> <img class="smilies" src="./images/smilies/icon_e_smile.gif" width="15" height="17" alt=":)" title="L盲cheln"> Wenn mitgearbeitet wird, gibts auch gerne zus盲tzliche Infos.<br> <blockquote class="uncited"><div>TOPIC_IMAGE_STYLE ist doch f眉r das Folder-Icon zust盲ndig?</div></blockquote> Jupp, also f眉r das prim盲re Themen Symbol. <br> <br> <code class="inline">TOPIC_IMAGE_STYLE</code> enth盲lt den CSS Klasennamen des prim盲ren Icons, z.B: <code class="inline">topic_read</code><br> <code class="inline">TOPIC_ICON_IMG</code> enth盲lt dagegen einen Pfad zu einer Grafik-Datei, z.B: <code class="inline">misc/star.gif</code><br> <br> Das sind also zwei v枚llig verschiedene Variablen/Eigenschaften die absolut nichts miteinander zu tun haben ausser der Tatsache, dass beide dazu ben枚tigt werden, schlussendlich ein Icon zu erzeugen.<br> <blockquote class="uncited"><div>Wenn kein Topic-Icon, dann gibt's class="row-item{ }" ?</div></blockquote> Wenn KEIN sekund盲res Themen Symbol im Datensatz definiert ist, ODER wenn sekund盲re Themen Symbole nicht erlaubt sind, DANN f眉ge den Klassennamen des prim盲ren Themen Symbols ein. Das ist jetzt quasi eine w枚rtliche Beschreibung von:<br> <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles ausw盲hlen</a></p><pre><code><dl class="row-item{{ !(topicrow.TOPIC_ICON_IMG && S_TOPIC_ICONS) ? ' ' ~ topicrow.TOPIC_IMG_STYLE }}"> </code></pre></div> Man h盲tte die erste Zeile auch so notieren k枚nnen, dann w盲re die w枚rtliche Beschreibung verst盲ndlicher:<br> <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles ausw盲hlen</a></p><pre><code><dl class="row-item{{ (!topicrow.TOPIC_ICON_IMG || !S_TOPIC_ICONS) ? ' ' ~ topicrow.TOPIC_IMG_STYLE }}"> </code></pre></div> <code class="inline">!</code> = NOT<br> <code class="inline">&&</code> = AND<br> <code class="inline">||</code> = OR<br> <br> Das wird dir alles vermutlich schneller klar, wenn du dir mal in den Entwickler Tools deines Browsers die fertig generierten Elemente direkt anschaust und zwar einmal bei einem Thema ohne sekund盲res Icon und einmal mit. Dann siehst du sofort was mein Code f眉r 脛nderungen bewirkt.<br> <blockquote class="uncited"><div>! verneint, wof眉r steht denn das ~?</div></blockquote> Das ist der Verkettungs-Operator bei Twig. Das heisst nichts anders als: f眉ge den Teil links von <code class="inline">~</code> und rechts davon zusammen. Ich notiere die Zeile zum besseren Verstehen mal anders, beide Zeilen bewirken unterm Strich "fast" das gleiche: Die zweite Zeile generiert ein unn枚tiges Leerzeichen wenn kein sekund盲res Icon definiert ist, aber <span style="text-decoration:underline">rein technisch</span> gibts keinen Unterschied zwischen beiden Zeilen, weil dem Browser zus盲tzliche Leerzeichen v枚llig schnuppe sind. Der Browser arbeitet sowieso nicht wirklich direkt mit dem HTML das wir definieren, sondern HTML ist f眉r eine Browser Engine nichts anderes als ein Bauplan f眉r das DOM Objekt.<br> <div class="codebox"><p>Code: <a href="#" onclick="selectCode(this); return false;">Alles ausw盲hlen</a></p><pre><code><dl class="row-item{{ !(topicrow.TOPIC_ICON_IMG && S_TOPIC_ICONS) ? ' ' ~ topicrow.TOPIC_IMG_STYLE }}"> <dl class="row-item {{ !(topicrow.TOPIC_ICON_IMG && S_TOPIC_ICONS) ? topicrow.TOPIC_IMG_STYLE }}"> </code></pre></div> Achte auf das zus盲tzliche Leerzeichen in der zweiten Zeile nach <code class="inline">row-item</code>.</div> </div> <hr /> <div class="post"> <h3>Re: Themen-Symbole</h3> <div class="date">Verfasst: <strong>08.09.2024 09:04</strong></div> <div class="author">von <strong>STK</strong></div> <div class="content">Guten Morgen und nochmals danke f眉r deine Zeit!<br> Langsam blicke ich durch:)<br> <br> W眉nsche einen sch枚nen Sonntag!<br> STK</div> </div> <hr /> </div> <div id="page-footer" class="page-footer"> <div class="page-number">Alle Zeiten sind <span title="Europa/Berlin">UTC+01:00</span><br />Seite <strong>1</strong> von <strong>2</strong></div> <div class="copyright"> <p>Powered by <a href="https://www.phpbb.com/">phpBB</a>® Forum Software © phpBB Limited </p> <p>Deutsche 脺bersetzung durch <a href="https://www.phpbb.de/">phpBB.de</a> </p> </div> </div> </div> </body> </html>