Twenty Twelve Menü-Farben

Twenty Twelve Menü-Farben ändern ist etwas komplexer: Link-Farben, Mouse-Over-Effekt, Momentaner Menüpunkt und Dropdown-Menü-Farben werden in dieser Anleitung in der style.css geändert. Dabei arbeiten wir auch weiterhin mit dem Child-Theme.

Abkürzung: Direktlink Child-Theme-Download Twenty Twelve mit eingebautem Code…
Wie dort beschrieben, kann man das Child-Theme einfach über das Backend hochladen.

Twenty Twelve Menü-Farben ändern

Die Menü-Farben des WordPress-Themes Twenty Twelve sind leicht zu ändern. Es ist zwar etwas komplexer, aber es lohnt sich. In dieser Anleitung ist jedem Bereich eine genaue Überschrift zugeordnet. Ich habe die Anleitung in zwei Bereiche untergliedert:

  • Hauptmenü mit drei verschiedenen Farben (Menü-Link und Mouse-Over-Color)
  • Untermenü, Farben und Hintergrund-Farben (Drop down und Mouse-Over-Color)
  • So sieht das Menü bzw. die Navigation nach der Änderung der Farben aus:

    Twenty Twelve Menü-Farben ändern

    Twenty Twelve Menü-Farben ändern

    Twenty Twelve Menü-Farben ändern – Code

    1
    2
    3
    4
    5
    6
    7
    8
    
    /* Menu link & Mouse over color */
    .main-navigation li a {color: #000000}
    .main-navigation .current-menu-item a {color: #FFFFFF;}
    .main-navigation li a:hover {color: #FFFFFF;}
     
    /* Drop down menu & Mouse over color */
    .main-navigation li ul li a {background: none repeat scroll 0 0 #FF3300;}
    .main-navigation li ul li a:hover {background: none repeat scroll 0 0 #EDEDED; color: #A60000;}

    Wie schon gewohnt, können wir hier einfach die Farbcodes z.B. #FF3300 ändern und damit direkt das Look and Feel der einzelnen Menübestandteile beeinflussen.

    WordPress-Kurs zum Theme-Wechsel…

    Hast Du noch Fragen oder Anregungen zum Artikel Twenty Twelve Menü-Farben, schreibe einen Kommentar…

    Ein Gedanke zu „Twenty Twelve Menü-Farben

    Hinterlasse eine Antwort

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

    Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>