versch. Schriftfarben der Buttoms der Untermenüs

  • [size=12]Hallo,[/SIZE]

    [size=12]Meine Menüleiste sieht wie folgt aus:[/SIZE]
    [size=12]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. [/SIZE]

    [size=12]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:[/SIZE]

    [size=12].main-navigation a:hover [/SIZE]

    [size=12].navigation-top .current-menu-item > a, .navigation-top .current_page_item [/SIZE]

    [size=12].navigation-top a [/SIZE]

    [size=12]Für die Untermenüs gibt es meiner Meinung nach nur folgende CSS- Klasse:[/SIZE]
    [size=12].main-navigation li li a [/SIZE]

    [size=12]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. [/SIZE]
    [size=12]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.[/SIZE]

    [size=12]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. [/SIZE]

    [size=12]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?[/SIZE]

    [size=12]Ich habe noch eine zweite Frage:[/SIZE]
    [size=12]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. [/SIZE]

    [COLOR=#222222][FONT=Consolas, Lucida Console, Courier New, monospace][size=12].navigation-top a {[/SIZE][/FONT][/COLOR]

      [COLOR=#222222][FONT=Consolas, Lucida Console, Courier New, monospace][size=12][COLOR=#c80000]color[/COLOR]: #301f31;[/SIZE][/FONT][/COLOR]
      [COLOR=#222222][FONT=Consolas, Lucida Console, Courier New, monospace][size=12][COLOR=#c80000]font-weight[/COLOR]: 600;[/SIZE][/FONT][/COLOR]
      [COLOR=#222222][FONT=Consolas, Lucida Console, Courier New, monospace][size=12][COLOR=#c80000]-webkit-transition[/COLOR]: color 0.2s;[/SIZE][/FONT][/COLOR]
      [COLOR=#222222][FONT=Consolas, Lucida Console, Courier New, monospace][size=12][COLOR=#c80000]transition[/COLOR]: color 0.2s;[/SIZE][/FONT][/COLOR]


    [size=12]Was haben die durchgetrichenen CSS- Regeln, die in Google Chrome angezeigt werden, zu bedeuten? [/SIZE]

    [size=12]Die Webseite ist lokal auf meinem Rechner. Mein Betriebssystem ist Windows7.[/SIZE]

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

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

    Das bedeutet, dass es eine weitere Regel gibt, die die durchgestrichene Regel teilweise/ganz ersetzt.

    Das Ersetzen/Überlagern kann auf verschiedene Arten erfolgen, z.B. bei gleichem Regelnamen gilt die Reihenfolge des Einbindens in die Seite, ein ganz einfaches Beispiel, weiteres zum Überlagern darfst Du gern Google o.ä. fragen:

    Zitat

    .navigation-top a {
    color: red;
    }
    .navigation-top a {
    color: green;
    }


    Hier wird der Link grün sein und die erste Regel wird "durchgestrichen".

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!