Seite 1 von 2

Themen-Symbole

Verfasst: 06.09.2024 12:14
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

Re: Themen-Symbole

Verfasst: 06.09.2024 17:04
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. ;)

Re: Themen-Symbole

Verfasst: 07.09.2024 10:59
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

Re: Themen-Symbole

Verfasst: 07.09.2024 12:52
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.

Re: Themen-Symbole

Verfasst: 07.09.2024 13:34
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

Re: Themen-Symbole

Verfasst: 07.09.2024 14:35
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.

Re: Themen-Symbole

Verfasst: 07.09.2024 15:06
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

Re: Themen-Symbole

Verfasst: 07.09.2024 15:20
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:)

Re: Themen-Symbole

Verfasst: 07.09.2024 16:22
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.

Re: Themen-Symbole

Verfasst: 08.09.2024 09:04
von STK
Guten Morgen und nochmals danke für deine Zeit!
Langsam blicke ich durch:)

Wünsche einen schönen Sonntag!
STK