h2 in Artikel (per CSS) verändern

[thorsten23]

Hallihallo liebe Gemeinde,

ich habe mal wieder ein kleines Problem:

ich versuche die Überschrift h2 in einem Artikel zu ändern. Allerdings möchte ich dabei nicht die Größe der Überschrift im (Artikel-)Editor festlegen (also per Combobox auswählen), sondern einfach nur unter Vorlage "h2" auswählen aber nichts als Schriftgröße dort festlegen. Die Schriftgröße möchte ich dann per CSS einstellen. Damit kann ich dann später h2 im CSS einmalig ändern, ohne alle Artikel anfassen zu müssen (soweit meine Theorie). Um das zu realisieren habe ich dem Artikel die Klasse .article_standard verpasset. Die Klasse selbst habe ich wie folgt in einem externen Stylesheet definiert:

.articel_standard {
font-size:18px;
}

.articel_standard h2 {
font-size:26px;
background-color:red;
}


Das Problem ist, nur 2 der 3 Styles greifen: "font-size:18px" wirkt sich auf den Fliesstext im Artikel aus und "background-color:red" hinterlegt den Hintergrund der h2 Überschrift auch in rot. Was nicht greift, ist "font-size:26px". Warum ?

Werden Styles noch an anderer Stelle im System vordefiniert, die ich irgendwie überschreiben müsste ? ich habe eine basic.css gefunden und eine main.css und ähnliche. Spielt mir davon was da rein ??


vielen Dank für jeden Tip! :-)

Gruß,
Thorsten

[Spooky]

Verwende FireFox, mach einen Rechtsklick auf das h2 das vermeintlich nicht richtig gestyled ist und drücke "Q". Rechts im erscheinenden Inspector siehst du die CSS Rules die greifen und kannst daher auch feststellen was schief läuft.

Wenn du das nicht selbst debuggen willst, musst du uns mit einem Link zu deiner Seite füttern

[thorsten23]

Hallo Spooky,

in Firebug wird mir das Element wie folgt dargestellt:

<h2 align="center" style="font-size: 10pt; color: #990066; font-family: verdana; text-align: center;">


Gleichzeitig finde ich rechts unter "Styles" folgendes:

element.style {
color: #990066;
font-family: verdana;
font-size: 10pt;
text-align: center;
}
.articel_standard h2 {
background-color: #FF0000;
font-size: 26px;
}

wobei aber das "font-size: 26px;" durchgestrichen ist. Scheinbar wird das von "element.style" überschrieben ?! Wo kommt das her ? Was kann ich tun ?



Danke+Gruß :-)
Thorsten

[melzebub]

Autsch. Scheinbar sind da Inline-Styles angelegt. Die Überschreiben deine CSS Angaben. Könnte man mit ner Krücke verhindern, aber schöner wäre es, wenn du die Inline-Styles raus bekommst. Entweder steht das direkt im Template oder wird via Javascript reingeschrieben. Vielleicht eine animation drauf? Musst mal JS deaktivieren und schauen ob es dann funktioniert. Ein Link wäre praktisch.

[Spooky]

Das sind inline-styles. Schreibst du das h2 evt. im Texteditor statt es in das jeweilige Feld des Content Elements zu schreiben?

[thorsten23]

Danke, glaub hab das Problem gefunden. Hab die Texte für den Artikel nochmal komplett als Plaintext (also unformatiert) reinkopiert, dann gings. War wohl nicht sonderlich klug, bereits formatierten Text reinzukopieren. Vielen Dank für eure Hilfe! :-)