CSS-Problem

[Rolf B]

Hallo Timo,

(Edit: CSS-Typo gefixt)

font-weight:400px;

das funktioniert übrigens nicht. Das fällt nur nicht auf, weil 400 ein font-weight im mittleren Bereich ist und deshalb die Darstellung wie von Dir gewünscht aussehen dürfte.

Korrekt ist, dass font-weight eine Zahl als Wert bekommt, ohne Einheit.

font-weight:400;

Was ebenfalls ungünstig ist, ist die Angabe von Font- oder Buttongrößen in Pixeln. Wenn der Anwender zoomt, oder eine spezifische Textvergrößerung eingestellt hat (was viele Gründe haben kann), dann folgt deine Angabe dieser Skalierung nicht.

Fontgrößen solltest Du auf die Default-Fontgröße des Dokuments beziehen, also in rem angeben.

Buttongrößen solltest Du auf den im Button verwendeten Font beziehen, also in em angeben.

Wenn du grundsätzlich alle Buttons stylen willst, dann wirst Du vermutlich nicht darum herum kommen, etwas wie

button {
   foo:bar;
}

zu schreiben und versetzt Dich damit in der CSS Spezifischitätsnahrungskette weit nach unten. Aus Sicht der Herkunfts-Priorisierung bist Du mit dem Wortpress-Theme auf einer Ebene, so dass andere Spezifitäts-Fische Vorrang bekommen.

Du KANNST das mit der !important-Bombe lösen (hast Du den Specifishity-Cartoon angeschaut?). Aber muss das immer sein? Die Folge erlebst Du prompt: ein Nuke reicht nicht mehr, nun fehlt die H-Bombe. Es geht auch sanfter.

Die Frage ist: Wie sind Buttons im Theme gestyled? Vermutlich über Klassen, und das bedeutet: Wenn Du spezifischere Selektoren formulieren kannst als das Theme, dann bekommst Du Vorrang.

/* angenommenes Button-Styling im Theme - Spezifität 0-1-1 */
button.themeBtn {
   bla:fasel;
}

/* deine Angabe - Spezifität 0-1-2 */
body button.themeBtn {
   bla:fasel;
}

Das würde schon reichen und du brauchst keinen !important Nuke mehr. Mit !important versetzt Du deine Angaben auf eine andere Herkunftsstufe, die an der Spezifität vorbei geht. Beats Link zur Kaskade erklärt das.

Wenn es nun eine SPEZIELLEN Button gibt, dann hat der sicherlich ein Merkmal, mit dem Du ihn finden kannst. Zum Beispiel eine eigene Klasse. Oder ein Elternelement mit einer bestimmten ID oder Klasse. Das nutzt Du, und bekommst wieder eine höhere Spezifität:

/* deine Spezialbutton, ein Kind eines Elements mit Klasse oink - Spezifität 0-2-2 */
body .oink button.theme_but {
   bla:fasel;
}

Ganz ohne !important würde diese Regel über dein Button-Styling Vorrang bekommen.

Damit Du das korrekt umsetzen musst, brauchst Du natürlich einen Überblick über alle Einflüsse, die das Theme auf die Buttons ausübt. Dafür musst Du in die Entwicklerwerkzeuge des Browsers einsteigen und in der DOM-Ansicht („Elemente“) analysieren, was so alles passiert.

Natürlich kannst Du dieses Spiel auch mit !important Eigenschaften spielen. Sind zwei Eigenschaften mit !important zugewiesen, gewinnt die mit der höheren Spezifität. Wenn Du zu oft Lemmings gespielt hast und lieber den Nuke-Knopf drückst...

Rolf