Breadcrumb und Seitentitel mit CSS in Menüpunktfarben einfärben

[goldchristal]

Hallo meine Lieben,

ich möchte einen Seitentitel mit der Formatzuweisung h1 oberhalb des Breadcrumb-Moduls in jede Seite einfügen und die Schrift von Seitentitel und der gleich darunter liegenden Breadcrumb jeweils im betreffenden Menüpunkt einfärben. Irgendwie will es allerdings nicht so, wie ich will ;-)

Ich habe also das Modul seitentitel, in das ich per Inserttag den Seitentitel eingefügt habe und definiert die Farbe via h1.
(<div id="Seitentitel"><h1>{{page::pageTitle}}</h1></div>),
Modul wurde ins Seitenlayout eingebunden.

Nun ist der h1 die Farbe der jeweiligen Seite zuzuweisen, das hätte ich per CSS mit der in der jeweiligen Seite vergebenen Klasse gemacht, die ich ohnehin schon für das Menü vergeben habe.
Wenn ich allerdings h1.index oder h1.seite2 mit Schriftfarbe vergebe, passiert mal gleich nix. Habe ich irgendwo einen Denkfehler, einen Schreibfehler?


Bin euch dankbar für hilfreiche Hinweise,

Christine

[Lego2013]

Wenn Du h1.index eingibst, erwartet CSS ein HTML, in dem die h1 eine class="index" hat. Du hast im HTML zwar eine h1, aber keine Klasse. Direkt nach Deiner h1 kommt der Seitentitel. Also musst Du der jeweiligen h1 im Template noch die enstprechende Klasse zuweisen.

[kos]

Ich habe also das Modul seitentitel, in das ich per Inserttag den Seitentitel eingefügt habe und definiert die Farbe via h1.
(<div id="Seitentitel"><h1>{{page:ageTitle}}</h1></div>),
Modul wurde ins Seitenlayout eingebunden.

Nun ist der h1 die Farbe der jeweiligen Seite zuzuweisen, das hätte ich per CSS mit der in der jeweiligen Seite vergebenen Klasse gemacht, die ich ohnehin schon für das Menü vergeben habe.
Wenn ich allerdings h1.index oder h1.seite2 mit Schriftfarbe vergebe, passiert mal gleich nix. Habe ich irgendwo einen Denkfehler, einen Schreibfehler?

Hallo Christine,

,du solltest die Überschriften mit

#Seitentitel h1 {
  color: red;
}

ansprechen können.

[goldchristal]

Danke Leo und Karl, ich komm nicht drauf!! *kopfaufdietischplatteschlag*

Die css-klasse wird in der jeweiligen Seite zugewiesen (cssklassenname=seitenname, brauche ich auch für die navigation), diese verschiedenen css klassen weise ich den h1s zu. Siehe Bilder.

FireShot Screen Capture #021 - 'Seitenstruktur » Seite ID 28 bearbeiten - Contao Open Source CMS.png
FireShot Screen Capture #022.png

Aber es klappt nicht, warum nicht???

Christine

[valentin_]

das ist nur die klasse fuer den body/menuepunkt. freunde dich mit den (chrome) devtools/firebug an, damit kannst du den code untersuchen und solche fehler vermeiden. einfach rechtsklick auf das element und untersuchen. wenn deine h1 nicht die jeweile klasse besitzt, wird dein css code keine wirkung haben.

alternativ koenntest du deine klasse so verwenden:

body.linktitel #Seitentitel h1 {}
(am besten alles kleinschreiben, gross schreiben bringt keine vorteile - eher nachteile )

Gesendet von meinem GT-I9505 mit Tapatalk 2

[goldchristal]

Danke Valentin,

ja mit der alternativen Variante klappt das sofort super!!!

Firebug verwende ich ja, und sehe auch, dass da keine Klasse zugewiesen ist, leider flüstert er mir dann nicht zu, wo ich es statt dessen hinschreiben muss...

Wieder was gelernt, juchu.

Vielen lieben Dank und schönes Wochenende,

Christine

[goldchristal]

Hallo ihr Lieben,

ich hab für den Seitentitel jetzt also: body.linktitel #Seitentitel h1 {} verwendet und das klappt supergut für alle Seitentitel in allen nötigen Farben.

Beim Breadcrumb habe ich das auch so machen wollen,
FireShot Screen Capture #027 - breadcrumb.pngFireShot Screen Capture #027 - breadcrumb.png
aber leider funktioniert das hier nicht - es wird immer die zuunterste Styleanweisung zugewiesen für alle Breadcrumbs.
Warum klappt das beim Seitentitel und hier nicht?.... und wie muss ich das schreiben dass es funktioniert?

Danke an euch im Voraus und liebe Grüße

Christine

[Kahmoon]

Lass das block weg. Wenn du das reinschreibst müsste es außerdem .block sein. Brauchts hier aber nicht.

Bei Mehrfachzuweisungen muss immer die volle Kaskade geschrieben werden:

body.deineklasse .mod_breadcrumb a, 
body.deineklasse .mod_breadcrumb li, 
body.deineklasse .mod_breadcrumb li.a{color:#ff00cc;}

[goldchristal]

Hallo Kahmoon,

Block weggelassen, Kaskaden voll ausgeschrieben.
breadcrumb 2.png
Endeffekt: Funktioniert gar nicht mehr Ohje.

Was jetzt?

[Kahmoon]

Was funktioniert denn jetzt genau nicht? Gibts vielleicht einen Link wo ich das sehen kann?

Also ich sehe im Screenshot auf jeden Fall mal bei "content" einen Fehler. Wenn es eine Klasse ist muss es ".content" heissen. Hast du die Klasse "content" selbst gesetzt oder wo kommt die her?

Bezüglich der Linkformatierung. Hast du denn grundsätzlich eine "Defaultformatierung" festgelegt? Ist die klasse "schmerztherapie" in der Struktur gesetzt?

.mod_breadcrumb a{color:#ff00cc;}

Im Anschluss machst du deine Sonderformatierungen.

Da du jetzt genau diese ansprichst (vorher waren es ja noch allgemeine Formatierungen ohne die volle Kaskade), ist es normal das "garnix mehr" angezeigt wird :-). Irgendeine Kleinigkeit fehlt noch...ich vermute die Klasse in der Struktur. Aber ohne Link ist es momentan nur raten :-)

[goldchristal]

Hallo Kahmoon,

vielen lieben Dank,... ja, das mit der Kaskade passt und ohne Block passt auch - und es geht jetzt auch.

Der Fehler war dann noch ganz wo anders - siehe attachment vom letzten post: Ich hab schlicht einen Schreibfehler drin gehabt und aus einer breadcrumb eine breadbrumb gemacht und dann kann selbst Contao nicht mehr zuweisen...

2 Stunden Fehlersuche, da "brumb"t einem dann auch tatsächlich der Kopf..

Danke nochmal, *freu und froh bin*

Liebe Grüße,

Christine

[Kahmoon]

Argh und ich hab extra noch genau nachgelesen.....! Habs aber auch ned gesehen