Buttongröße mit CSS ändern

[thobie]

Moin, Moin, Kollegen,

ich versuche gerade, die Buttons des Sub-/Sub-Sub-Menüs des Themes Sydney in der Breite und Höhe mit CSS und margin mit Negativwert zu ändern.

Derzeit teste ich das an einer neuen Website, die ich auf einer lokalen Entwicklungsumgebung auf meinem Mac konfiguriere.

Wer das Theme nicht kennt, hier ein Screenshot des betreffenden Objektes. Wer es live sehen will, mein Foodblog https://www.nudelheissundhos.de benutzt das Theme.

Ich habe auf einer anderen Website mit dem Theme ColorMag dies erfolgreich mit CSS umgesetzt, dort war die ID main-navigation zuständig. Bei Sydney habe ich mir schon einen Wolf gesucht und finde die ID oder die Class einfach nicht.

Das einzige, das mir gelang, war, versuchsweise mit dem folgenden Code das Hauptmenü anzusprechen. Es ist also die ID mainnav. Aber beim Sub-/Sub-Sub-Menü komme ich einfach nicht weiter.

#mainnav .menu {
  display:none ;
    }

Hat jemand eine kleine Hilfestellung oder eine Lösung, welche ID oder Class für das Submenü bzw. die Buttons zuständig ist?

 

[rodriguez]

Probiers mal mit padding:

#mainnav ul ul li {
padding: 2px !important;
}

 

[thobie]

Probiers mal mit padding:

#mainnav ul ul li {
padding: 2px !important;
}

Danke für die schnelle Hilfe. Ich sitze heute Abend wieder am Mac und teste das dann.

 

[thobie]

Klasse. Eine Frage, eine Antwort und es funktioniert. Danke.

 

[Difool]

Das mit !important zu lösen ist aber eher immer suboptimal und führt i.d.R. „weiter hinten“ zu Problemen.
Du kannst die css-Klassen statt mit !important zu zwingen, auch eleganter mit einer genaueren Kaskadierung ansprechen:

Eine genauer definierte Stylesheet-Regel überschreibt eine weniger genau deklarierte Regel.

Beispiel:

ul.menu li.active { color: blue; } /** Gewinnt **/
li.active { color: red; } /** Verliert, da geringere Spezifität **/

 

[thobie]

Mir ist nicht klar, was Du mit Deinem Beitrag mitteilen willst.

Aber Du hast recht, ohne das

!important

funktioniert es nicht.

 

[Difool]

Mir ist nicht klar, was Du mit Deinem Beitrag mitteilen willst.

Aber Du hast recht, ohne das

!important

funktioniert es nicht.

Ein gesetztes !important überschreibt (gewinnt) immer, weil erzwungen.

Die Verwendung von !important wird nicht als gute Praxis angesehen. Daher sollten Sie sowohl !important als auch Inline-Stil vermeiden.
Durch das Hinzufügen des Schlüsselworts !important zu einer CSS-Regel erhält diese Regel zwangsweise Vorrang vor allen anderen CSS-Regeln für dieses Element.
Sie setzt sogar die Inline-Stile aus dem Markup außer Kraft.
Die einzige Möglichkeit, dies zu umgehen, ist die Verwendung einer anderen !important-Regel, die entweder mit höherer CSS-Spezifität im CSS oder mit gleicher CSS-Spezifität später im Code deklariert wird.

Spätestens wenn das im Responsive dann greift, bekommt man nervige Probleme.
Irgendwann hat man dann zig !important im css und verzettelt sich im debuggen.

Wenn das !important auch noch vererbt wird, übersieht man es auch leicht mal.
Deswegen ist es nicht ratsam !important einzusetzen – es ist eine Notlösung bis man einen sinnvolleren Weg in Ruhe erarbeitet hat.

Ein gesetztes !important kann man später bei Bedarf nicht einfach überschreiben;
es sei denn mit wiederum einem !important mit einer höheren CSS-Spezifität.

Ergo kann man gleich mit höheren CSS-Spezifitäten – ohne !important – arbeiten.

Es heißt: !important is bad practice!

 

[thobie]

Danke, Difool, für diese Informationen.

Hättest Du vielleicht eine alternative Lösung eines CSS-Codes ohne das !important?

 

[Difool]

Danke, Difool, für diese Informationen.

Aus Erfahrung habe ich genau dieses damals gelernt, als mich jemand mit mehr css-Skills darauf hinwies.
Seit dem ich nun um !important einen großen Bogen mache, ist das Schreiben von css Styles wesentlich verständlicher.
Auch alleine deswegen, weil man sich dafür dann mit der Vererbung und der Hierachie der css-Kaskade beschäftigen muss.
Das ist dann der Punkt, an dem man beginnt die Sachen zu verstehen.

Hättest Du vielleicht eine alternative Lösung eines CSS-Codes ohne das !important?

Als Beispiel folgt der vollständige css-Pfad aus deinem Foodblog zur sub-menu li der primary-menu Liste:
(damit wird das exakte li-Element des Submenu-Elements direkt und individuell explizit angesprochen)

html body.home.blog.group-blog.menu-inline div#page.hfeed.site div.bottom-header-row.bottom-header_layout_5.sticky-header.sticky-always div.container-fluid div.bottom-header-inner div.row.valign div.col-md-8 nav#mainnav.mainnav div.menu-navigationsmenue-container ul#primary-menu.menu.nav-menu li#menu-item-49294.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-49294 ul.sub-menu li#menu-item-49286.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-privacy-policy.menu-item-49286

Dies folgende greift und wird mit !important dann erzwungen:

#mainnav ul ul li {
padding: 2px !important;
}

Aus dem kompletten css-Pfad oben kannst du nun ersehen, wo und wann, welche IDs und Klassen bei welchen Parametern
in welcher Reihenfolge verwendet werden.

Dieser Part davon ist bsw. hilfreich – dort fängt das direkte css-Styling des #mainnav-Containers an:
(Diese Klasse findet Verwendung als Vor-Instanz aller Menüs: primary-menu, secondary-menu, footer-menu …)

#mainnav.mainnav div.menu-navigationsmenue-container ul#primary-menu.menu.nav-menu li#menu-item-49294

Und das ist der verkürzte Aufbau von:
ul#primary-menu li ul.sub-menu li
Eine Spezifität kannst du nun auf unterschiedlichen Wegen aufbauen/schreiben.
Zum Beispiel mit css-Selectoren zur Kombination: https://itecnote.com/tecnote/css-selectors-difference-between-and-when-to-use-or/
ul#primary-menu li > ul.sub-menu li

Bei Menüs ist es daher sinnvoll zu schauen, wenn man dort css-Styles zusätzlich anlegt, ob und in wie weit diese dann transportiert und vererbt werden.
Also schaut man nach, wo die Deklarierung der #mainnav tatsächlich überall eingesetzt wird.
Das Hauptmenü (#mainnav) sitzt oben in dem List-Element (ul.primary-menu) und hat zusätzlich die 2 allgemeinen Klassifizierungen
als Menü-Element (.menu und .nav-menu).

Eine #ID kommt vor .class und die Reihenfolge der Elemente ist dazu gegeben: #mainnav ul ul li

Folglich wäre dies eine Möglichkeit – wenn sie in der css-Hierachie deines Themes anwendbar ist:

#mainnav ul.primary-menu ul.sub-menu li {
padding: 2px;
}

Kann – muss aber nicht, weil man halt schauen müsste, ob es mit all den anderen css-Styles für diese Bereiche (in diesem Theme) funktioniert.
Daher sucht man sich nach Logik und vorhandener css-Schreibweise/-Aufbau des Themes eine Möglichkeit.
Die Funktionalität basiert also auf Logik, Standards und letztendlich darauf, wie „ordentlich“ der- oder diejenige beim css-Styles verfassen war.

 

[thobie]

Aus Erfahrung habe ich genau dieses damals gelernt, als mich jemand mit mehr css-Skills darauf hinwies.
Seit dem ich nun um !important einen großen Bogen mache, ist das Schreiben von css Styles wesentlich verständlicher.
Auch alleine deswegen, weil man sich dafür dann mit der Vererbung und der Hierachie der css-Kaskade beschäftigen muss.
Das ist dann der Punkt, an dem man beginnt die Sachen zu verstehen.

Danke.

Folglich wäre dies eine Möglichkeit – wenn sie in der css-Hierachie deines Themes anwendbar ist:

#mainnav ul.primary-menu ul.sub-menu li {
padding: 2px;
}

Kann – muss aber nicht, …

Der Code tut es leider nicht. Muss ich weiter suchen …