... klingt erst einmal sinnlos - es geht aber darum, in Contao allen Artikeln, die auf einer bestimmten Seite erscheinen, automatisch eine Klasse zuzuweisen, so dass man die Klasse nicht bei jedem Artikel eintragen muss.

Geht das per CSS oder brauche ich dafür JavaScript? Oder gibt es noch andere Möglichkeiten?

Hallo Bettina

Ohne die Seite zu kennen kann diese Frage nicht präzise beantwortet werden. Aber im Allgemeinen kann ich versuchen mein Vorgehen zu beschreiben, das ich bei so was wählen würde.

Du musst zuerst den Quellcode der Seite, bzw. mehrerer Seiten anschauen, auf denen Du gerne diese Artikel mit einem eigenen Style auszeichnen willst. Es geht darum im Code einen eineindeutigen "Weg" zu diesen Artikeln zu finden. Mit Weg meine ich, die Verschachtelung, die Cascade, von <hmtl> bis zum (vermuteten) <li>. Wenn Du nun irgendwo ein tag findest, dass zum beispiel alle diese <li>--Artikeltags enthält und sich zum Beispiel <div id="articels"> nennt, dann hättest Du einen guten Anwärter für Deine Formatierung gefunden. Du könntest dann zum Beispiel Deine spezielle Formartierung so auszeichnen

#articels li {color: red;}

Nun musst Du aber noch kontrollieren, ob diese Kombination auf keiner anderen Seite auftritt. Bei CMS hast Du das Problem, dass Du die Styles nicht selber angelegt hast und also auch nicht weiss, wo überall Du die gleichen Styles verwendet hast. In guten CMS sollten im Grunde die Styles immer nur an einer Stelle verwendet werden. Wenn Du also feststellen kannst, dass Deine Änderung, wie gewünscht, nur an den Artikeln Änderungen verursacht haben ... dann bist Du "schon" am Ziel.

Das Ganze klingt jetzt etwas einfach ... der hacken ist aber, diese Eineindeutigkeit bei einem fremden Code zu finden. Da bleibt nur stures Code lesen und verstehen ...

Die Eindeutigkeit ist nicht das Problem.

Es wäre #aktuelles .mod_article

nur ist mein Ziel, dass ich eine Formatierung für mehrere Artikel auf verschiedenen Seiten anwenden kann und den Code nicht doppelt schreiben muss:

Ich könnte z.B. in .artikel-schmal definieren, wie diese Art von Artikeln aussehen soll und das dann den Artikeln auf den Seiten zuweisen, auf denen die Artikel so aussehen sollen. Wenn es eine Änderung gibt, bräuchte ich das nur in .artikel-schmal ändern.

Zusätzlich könnte ich noch Klassen für die Weite zuweisen .large6 .small2 zum beispiel. Die Prozentzahlen dafür stehen in den entsprechenden Klassen. Bei breitem Bildschirm greift large und per Mediaquerie bei kleinen Bildschirmen small.

Ich hoffe, es wird klar, was meine Absicht ist. Das Ganze ist eigentlich unabhängig von einem bestimmten Layout.

Hallo Bettina

Wieso .artikel-schmal und nicht gleich bei #aktuelles .mod_article Deine Styles eingeben? Wenn Du eine zusätzliche Klasse einbauen willst, musst Du vermutlich an den Code des CMS ran, ansonsten nur an die Stylesheets.

Auch die Klassen .large6 und .small2 sollten sich doch eigentlich über #aktuelles .mod_article relisieren lassen, oder? Oder wie willst Du diese Bildschrimbreite denn genau abfragen/realisieren?

Gruss
Martin

Hallo Martin,

ja klar geht das so, wie du sagst.

Nur habe ich zum Beispiel für die Breite ein Spaltensystem hinterlegt, das ich nicht nur für Artikel sondern auch für alle anderen divs benutze. Die Idee habe ich übrigens aus "Modernes Webdesign" von Jonas Hellwig, was ich sehr empfehlen kann:

@media screen and (max-width:499px) {
/* 2 Spalten */
.small1 {width: 50%;}
.small2 {width: 100%;}
}

@media screen and (min-width:500px) {
/* 12 Spalten */

.large1 {width: 8.333333%;}
.large2 {width: 16.666666%;}
.large3 {width: 25%;}
.large4 {width: 33.333333%;}
.large5 {width: 41.666666%;}
.large6 {width: 50%;}
.large7 {width: 58.333333%;}
.large8 {width: 66.666666%;}
.large9 {width: 75%;}
.large10 {width: 83.333333%;}
.large11 {width: 91.666666%;}
.large12 {width: 100%;}
}

Natürlich kann ich für #aktuelles .mod_article {width: 50%} notieren. Im Mediaquerie ändere ich das dann auf width: 100%. Wenn ich aber gleich den Artikeln .large6 und .small2 zuordnen könnte, bräuchte ich das nicht für alle Artikel auf jeder Seite neu bestimmen.

Der Vorteil von .artikel-schmal (oder wie immer ich das dann nenne) wäre, dass ich auf der Seite "Über uns" die gleiche Formatierung verwenden könnte. Wenn es dann mehr Artikel auf einer Seite werden und es soll 3spaltig werden, ändere ich dann nur in .artikel-schmal .large6 auf .large4

Aber vielleicht ist das in der Praxis gar nicht so sinnvoll und ich würde mich total verzetteln - du hast schon recht.