verschiedene Farben für die Schriftgestaltung der Buttoms der Untermenüs

  • tipokrat

    (@tipokrat)


    vor 9 Jahren, 7 Monaten

    Hallo,

    Meine Menüleiste sieht wie folgt aus:
    Startseite–Über mich–Blog–Kontakt–Impressum. Jetzt soll unter Startseite und Über mich jeweils ein Untermenü. Zudem soll die Schriftfarbe der Buttoms der beiden Untermenüs unterschiedlich sein.

    Ich habe diesbezüglich die style.css untersucht. Meiner Meinung nach gibt es nur drei Einstellungsmöglichkeiten für die Menüs, dies sind folgende:

    .main-navigation a:hover

    .navigation-top .current-menu-item > a, .navigation-top .current_page_item

    .navigation-top a

    Für die Untermenüs gibt es meiner Meinung nach nur folgende CSS- Klasse:
    .main-navigation li li a

    Weil es nur eine CSS-Klasse für alle Untermenüs gibt, kann ich für die Untermenüs Startseite–Untermenü und Über mich– Untermenü nicht unterschiedliche Farben verwenden, so dass bei dem ersten Untermenü die Schriftfarbe rot und beim zweiten Untermenü die Schriftfarbe grün ist.
    Anders ausgedrückt: Das es für die Untermenüs in der Navigationsleiste nur eine CSS-Regel gibt, kann ich die beiden oben genannten Untermenüs farblich nicht unterschiedlich gestalten. Stattdessen haben die Untermenüs immer die selbe Farbe.

    Nun meine Frage: Wie muss ich vorgehen, so dass ich die Schriftfarbe der beiden Untermenüs unterschiedlich gestalten kann? Ich vermute, dass man das über ein Plugin macht.

    Welches Plugin eignet sich besonders gut, um die Schriftfarbe zweier versch. Untermenüs unterschiedlich zu gestalten, so dass z.B. Untermenü1 die Schriftfarbe rot und Untermenü2 die Schriftfarbe grün hat?

    Ich habe noch eine zweite Frage:
    Ich habe die WordPress-Seite in Google Chrome geöffnet. Dann gehe ich mit der Maus z.B. über einen Buttom, mache einen Rechtsklick und gehe im geöffneten Pop-up Fenster auf Untersuchen. Ich ermittele auf diese Weise die entsprechende Zeile in der style.css Regel. In einem HTML-Editor verändere ich dann diese. Nach einigen Veränderungen erscheinen dann bei Untersuchen in Google Chrome durchgestrichene CSS-Regeln.

    Leider kann ich die entsprechende Codepassage nicht posten, weil die Durchstreichungen hier im Fenster komischerweise nicht erscheinen.

    Was haben die durchgetrichenen CSS- Regeln, die in Google Chrome angezeigt werden, zu bedeuten?

    Die Webseite ist lokal auf meinem Rechner. Mein Betriebssystem ist Windows7.

Ansicht von 1 Antwort (von insgesamt 1)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 9 Jahren, 7 Monaten

    Ein eigenes Plugin ist gar nicht nötig, wenn du ein benutzerdefiniertes Menü anlegst. In Design > Menüs kannst du über das Pulldown-Menü Ansicht anpassen zusätzlich CSS-Klassen für jeden individuellen Menüeintrag einblenden. Wenn du dann die Menüeinträge für die Untermenüs hinzufügst, kannst du jedem Eintrag eine individuelle CSS-Klasse zuweisen. Unter Design > Customizer > Zusätzliches CSS kannst du dann diesen Klassen CSS-Eigenschaften zuweisen.

    Die durchgestrichenen Regeln in den Entwickler-Werkzeugen weisen auf vorhandene CSS-Regeln hin, die durch spezifischere Anweisungen überschrieben werden. Beispiel:

    HTML

    <ul>
<li>Dies ist ein <span class="farbig">farbiger</span> Listeneintrag</li>
<ul>

    CSS

    .farbig { color: red; }
li .farbig { color: blue; }
ul li .farbig { color: green; }

    Wenn du nun das Element <span class="farbig">farbiger</span> untersuchst, werden die beiden oberen Regeln .farbig { color: red; } und li .farbig { color: blue; } durchgestrichen dargestellt, da sie von der spezifischeren Regel ul li .farbig { color: green; } überschrieben werden.

    Beim Mozilla Developer Network gibt es eine gute Einführung in die Entwickler-Werkzeuge: https://developer.mozilla.org/de/docs/Tools/Seiten_Inspektor

    Die CSS-Kaskade wird hier gut beschrieben: https://wiki.selfhtml.org/wiki/CSS/Kaskade

Ansicht von 1 Antwort (von insgesamt 1)

Das Thema „verschiedene Farben für die Schriftgestaltung der Buttoms der Untermenüs“ ist für neue Antworten geschlossen.