Zweimal "bildlinks" hintereinander

[marusti]

Meinst du so?
https://www.mozilo.de/forum/index.php/topic,4136.0.html

[Charlie_B]

ja, genau so. Danke!

[marusti]

Dafür müsstest du einen eigenen Syntax anlegen. Zb siehe hier https://www.mozilo.de/forum/index.php/topic,4136.0.html

[Fischi]

Hallo Charlie_B,
es gab kürzlich schonmal die Anfrage zum Floaten. Vielleicht kann Dir die Lösung in diesem Artikel:
https://www.mozilo.de/forum/index.php/topic,4845.0.html
weiterhelfen. Damit hast Du ein universelles Element, falls es öfter benötigt wird. Einfach [clear] anhängen.

Für individuelles Styling (z.B. einzelne Bilder, die sich anders verhalten sollen) nutze ich sehr oft und zielgenau ein neutrales DIV:
own_class = <div class="{DESCRIPTION}">{VALUE}</div>

{VALUE} erhält Deinen bisherigen Inhalt (z.B. bildlinks, Lightbox, ...)
{DESCRIPTION} erhält von Dir eine beliebige Klasse. Über diese Klasse kannst Du dann mit den Selektoren aus {VALUE} bei immer höherer Spezifität gestalten.
Beispiel:
- Einbau in Editor
[own_class=img-schmal|[bildlinks|bild.jpg|alt=]]

- Styling in style.css
.img-schmal img.leftcontentimage {
   width: 185px;
}

Überall, wo Du die 185px Breite brauchst, steckst Du Deinen Inhalt in das DIV own_class mit Description img-schmal.

Funktioniert bei mir sehr gut. Man kann fast jede Form der Individualisierung damit greifen. Mußt nur jeweils den {VALUE} auf Eignung testen und dort die richtigen Selektoren finden.

Gruß

[Fischi]

Nochmal ein konkretes Beispiel für bildgenaues Styling

1. Univeselles Benutzerelement:
class_own = <div class="{DESCRIPTION}">{VALUE}</div>

2. Einbau in Seite:
- DESCRIPTION erhält selbst gewählte Klasse; das ist der Knackpunkt; hier greift Styling per CSS
- VALUE erhält Inhalt; hier im Beispiel {LIGHTbOX}
[class_own=img-100|{Lightbox|[bildlinks|@=Willkommen:mozilo.webp=@|alt=]|untertitel}Bildbeschreibung]
[class_own=img-180|{Lightbox|[bildlinks|@=Willkommen:mozilo.webp=@|alt=]|untertitel}Bildbeschreibung]
[class_own=img-250|{Lightbox|[bildlinks|@=Willkommen:mozilo.webp=@|alt=]|untertitel}Bildbeschreibung]
[clear]

Weiter im Thema ...

3. Benutzerelement [clear]; speziell hier in diesem Fall nach Float
clear = <div class="clearfix"></div>
übernimmt global Clearing nach Floatende

4. CSS der neuen Klassen in plugin.css oder style.css:
.img-100,
.img-180,
.img-250{
  float: left;
  margin-right: 20px;
  margin-bottom: 12px;
  overflow: hidden;
}
.img-100 .lightbox-item img {
  --lb-thumb-width: 100px;
  border: none;
  box-shadow: none;
}
.img-180 .lightbox-item img {
  --lb-thumb-width: 180px;
  border: 2px solid #00f;
  box-shadow: none; 
}
.img-250 .lightbox-item img {
  --lb-thumb-width: 250px;
  border: none;
}
.img-250 .lightbox-item img:hover {
  border: 5px solid #0f0;
}

Vorteile aus meiner Sicht:
- universell nutzbares DIV class_own
- Probleme mit mehreren Parametern am Benutzerelement entfällt - alles im CSS über Zusatzklasse lösbar
- man kann selbst einzelne Inhaltselemente (hier Thumb in LightBox) abweichend gestalten
- durch Kombination mit eigener Klasse (z.B. img-100) kann man die Standardwerte der Plugins (z.B. .lightbox img) immer überschreiben
- keine Eingriff in Standardwerte nötig; Plugin bleibt wie es ist; bekommt Ergänzung durch eigene Klassen; diese greifen nur, wenn man sie nutzt; eigenes CSS in separater Datei; diese per include in style.css einbinden --> keine Upgradeprobleme mit Plugins

Auf dem Bild sieht man 3x Lightbox mit indiv. Thumbs-Gestaltung: Breite, Rand, Schatten, Hoververhalten.

Das geht natürlich auch mit bild, bildrechts bzw. irgendwelchen Bildern - man muß nur die Klassen für das Styling der elemente kennen, diese mit eigener Klasse kombinieren und damit übershreiben (s. Punkt 4)

Hier zeigt sich der Vorteil von moziloCMS mit seinen Benutzerelementen.

Ich hoffe, ich habe mich deutlich ausgedrückt und nicht am Thema vorbeigeredet.

Ich nenne dieses Prinzip für mich Modifikator-Klassen: Standard bleibt unberührt; gezielte Überschreibung der Standards mit zusätzlichem Klassen-Selektor = Modifikator.

Ich verwende das selbst bei einem Dutzend Benutzerelementen: z.B. Akkordeon
https://spielwiese.fischer-ehdorf.de/Benutzersyntax/Akkordeon.html

- es gibt eine Standardgestaltung im CSS
- nur durch Aufruf mit zusätzlicher Klasse werden Styles verändert
  (Farbe; Breite; Symbol für Titel, Abstände ...)

Gruß