Themen-Symbole

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
STK
Mitglied
Beiträge: 52
Registriert: 13.06.2009 17:54

Themen-Symbole

Beitrag von STK »

Hallo zusammen,

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.
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.
Die Zeilen im Template:

Code: Alles auswählen

<!-- EVENT viewforum_body_topic_row_prepend -->
			<dl class="row-item {topicrow.TOPIC_IMG_STYLE}">
				<dt<!-- IF topicrow.TOPIC_ICON_IMG and S_TOPIC_ICONS --> style="background-image: url('{T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}'); background-repeat: no-repeat;"<!-- ENDIF --> title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
Kann mir da jemand helfen?

Vielen Dank und ein schönes Wochenende!
STK
Ich bin nicht das SupportToolKit :D
Benutzeravatar
LukeWCS
Supporter
Supporter
Beiträge: 2962
Registriert: 15.12.2014 10:19
Kontaktdaten:

Re: Themen-Symbole

Beitrag von LukeWCS »

Hallo

1. Suchst du jetzt eine Ext, oder brauchst du Template Code?

Wenn ersteres, muss ich passen, ist mir keine bekannt.
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.

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. ;)
Möge das Backup mit dir sein. Immer.
Kein Support via PN! Siehe den Punkt "Private Nachrichten" im phpBB.de-Knigge.
Erweiterungen - Infos zur artgerechten Haltung / phpBB Ext Check - Analyse von Erweiterungen bezüglich Vorgaben und Kompatibilität
STK
Mitglied
Beiträge: 52
Registriert: 13.06.2009 17:54

Re: Themen-Symbole

Beitrag von STK »

Hallo,

zu 1.
Ich brauche was geeignetes, um meinen Plan umzusetzen;)
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.
Hilfe beim Ändern der Zeile wäre auch recht, wenn es ansonsten eine komplexere Extension bräuchte.

zu 2.
Ich würde die Topic-Icons in derselben Größe erstellen, wie die Folder-Icons.

Grüße
STK
Ich bin nicht das SupportToolKit :D
Verschoben von Extension Suche/Anfrage nach Styles, Templates und Grafiken am 07.09.2024 12:37 durch LukeWCS

Benutzeravatar
LukeWCS
Supporter
Supporter
Beiträge: 2962
Registriert: 15.12.2014 10:19
Kontaktdaten:

Re: Themen-Symbole

Beitrag von LukeWCS »

Mahlzeit
STK hat geschrieben: 07.09.2024 10:59 Eine Extension, die nur Template Code erfordert und keine angepassten Variablen, krieg ich inzwischen hin, denk ich.
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.
Allerdings check ich die Codezeilen im Eingangsbeitrag nicht so recht.
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.
Hilfe beim Ändern der Zeile wäre auch recht, wenn es ansonsten eine komplexere Extension bräuchte.
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.

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.
Ich würde die Topic-Icons in derselben Größe erstellen, wie die Folder-Icons.
Okay, also wie vermutet. Die benötigte Datei und die exakte Stelle hast du ja schon ausfindig gemacht. :) Ersetze die 2. und 3. Zeile des gezeigten Codes durch das:

Code: Alles auswählen

			<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 }}">
Auch hier gilt: wenn was unklar ist, genau benennen was unklar ist.
Möge das Backup mit dir sein. Immer.
Kein Support via PN! Siehe den Punkt "Private Nachrichten" im phpBB.de-Knigge.
Erweiterungen - Infos zur artgerechten Haltung / phpBB Ext Check - Analyse von Erweiterungen bezüglich Vorgaben und Kompatibilität
STK
Mitglied
Beiträge: 52
Registriert: 13.06.2009 17:54

Re: Themen-Symbole

Beitrag von STK »

Mahlzeit ebenso und herzlichen Dank!

Die Codeänderung bewirkt genau, was ich mir gewünscht hatte! Aber das wusstest du ja natürlich schon ;)

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.

Mit deinen 2 Codezeilen hast du mir also sehr geholfen!
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.
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?
Bin mir nicht sicher...

Grüße
STK
Ich bin nicht das SupportToolKit :D
Benutzeravatar
LukeWCS
Supporter
Supporter
Beiträge: 2962
Registriert: 15.12.2014 10:19
Kontaktdaten:

Re: Themen-Symbole

Beitrag von LukeWCS »

STK hat geschrieben: 07.09.2024 13:34 Mahlzeit ebenso und herzlichen Dank!
Danke für die Rückmeldung. :)
Die Codeänderung bewirkt genau, was ich mir gewünscht hatte! Aber das wusstest du ja natürlich schon ;)
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.
Im Grunde kapier ich den Code maximal insofern, dass ich grad noch die Stellen finde, was wo passiert.
Das ist schon mal viel Wert und eine wichtige Voraussetzung, wenn man bei phpBB etwas ändern will. :)
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.
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.

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.
Mit deinen 2 Codezeilen hast du mir also sehr geholfen!
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.
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 ! (entspricht not).
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?
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: background-size: auto; background-position: 10px 50%;. 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.

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.
Möge das Backup mit dir sein. Immer.
Kein Support via PN! Siehe den Punkt "Private Nachrichten" im phpBB.de-Knigge.
Erweiterungen - Infos zur artgerechten Haltung / phpBB Ext Check - Analyse von Erweiterungen bezüglich Vorgaben und Kompatibilität
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5014
Registriert: 08.06.2009 12:03

Re: Themen-Symbole

Beitrag von Talk19zehn »

Prosilver 3.3.12
Hello, zum *Beispiel zeigt die Suche nach eigenen Beiträgen -> nun beispielsweise -> jenes erkannte Konstrukt, wie deinerseits erwähnt:

"Themen-Symbol nicht linksunten am Folder-Icon hängt ...." (das Sternchen bezieht sich auf "mine" (vgl. colours.css -> /* Forum icons & Topic icons */)

*) background-image: url('./images/icons/misc/heart.gif'); ->
vgl. content.css

Code: Alles auswählen

dl.row-item dt {
	background-repeat: no-repeat;
	background-position: 5px 95%;
	background-size: 17px;
}
und ändere ggf. und falls Bedarf bestünde: Tipp am Rande on the Fly ....

Code: Alles auswählen

dl.row-item dt {
	background-repeat: no-repeat;
	background-position: 28px 10%;
	background-size: 17px;
}

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.

LG

Edit:
In meinen Tests hat diese Anpassung keinen Einfluss auf die Änderungen durch LukeWCS » Beitrag vom 7. Sep 2024, 12:52
Grüße
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren. Präteritum, Perfekt, Präsens, Futur & Plusquamperfekt werden nicht fehlerfrei genutzt, gar missverstanden.
STK
Mitglied
Beiträge: 52
Registriert: 13.06.2009 17:54

Re: Themen-Symbole

Beitrag von STK »

@Luke:
Vielen Dank für deine geduldigen Erklärungen!
Die Abfrage in Zeile 1 kapier ich dann immer noch nicht ganz.
TOPIC_IMAGE_STYLE ist doch für das Folder-Icon zuständig?
Wenn kein Topic-Icon, dann gibt's class="row-item{ }" ?
! verneint, wofür steht denn das ~?

@Talk:
Danke auch dir! Hab mir die conten.css gleich angeschaut und die Zuordnung wurde klarer:)
Ich bin nicht das SupportToolKit :D
Benutzeravatar
LukeWCS
Supporter
Supporter
Beiträge: 2962
Registriert: 15.12.2014 10:19
Kontaktdaten:

Re: Themen-Symbole

Beitrag von LukeWCS »

STK hat geschrieben: 07.09.2024 15:20 Vielen Dank für deine geduldigen Erklärungen!
:) Wenn mitgearbeitet wird, gibts auch gerne zusätzliche Infos.
TOPIC_IMAGE_STYLE ist doch für das Folder-Icon zuständig?
Jupp, also für das primäre Themen Symbol.

TOPIC_IMAGE_STYLE enthält den CSS Klasennamen des primären Icons, z.B: topic_read
TOPIC_ICON_IMG enthält dagegen einen Pfad zu einer Grafik-Datei, z.B: misc/star.gif

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.
Wenn kein Topic-Icon, dann gibt's class="row-item{ }" ?
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:

Code: Alles auswählen

<dl class="row-item{{ !(topicrow.TOPIC_ICON_IMG && S_TOPIC_ICONS) ? ' ' ~ topicrow.TOPIC_IMG_STYLE }}">
Man hätte die erste Zeile auch so notieren können, dann wäre die wörtliche Beschreibung verständlicher:

Code: Alles auswählen

<dl class="row-item{{ (!topicrow.TOPIC_ICON_IMG || !S_TOPIC_ICONS) ? ' ' ~ topicrow.TOPIC_IMG_STYLE }}">
! = NOT
&& = AND
|| = OR

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.
! verneint, wofür steht denn das ~?
Das ist der Verkettungs-Operator bei Twig. Das heisst nichts anders als: füge den Teil links von ~ 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 rein technisch 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.

Code: Alles auswählen

<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 }}">
Achte auf das zusätzliche Leerzeichen in der zweiten Zeile nach row-item.
Möge das Backup mit dir sein. Immer.
Kein Support via PN! Siehe den Punkt "Private Nachrichten" im phpBB.de-Knigge.
Erweiterungen - Infos zur artgerechten Haltung / phpBB Ext Check - Analyse von Erweiterungen bezüglich Vorgaben und Kompatibilität
STK
Mitglied
Beiträge: 52
Registriert: 13.06.2009 17:54

Re: Themen-Symbole

Beitrag von STK »

Guten Morgen und nochmals danke für deine Zeit!
Langsam blicke ich durch:)

Wünsche einen schönen Sonntag!
STK
Ich bin nicht das SupportToolKit :D
Antworten

Zurück zu „Styles, Templates und Grafiken“