Theme Twenty Thirteen anpassen

Die erste Frage, die ich in der neuen Kategorie „Frage und Antwort“ veröffentliche ist zum Thema Twenty Thirteen von Ivica. Er hat mit diesem Theme eine WordPress-Site eingerichtet und wollte es farblich etwas anpassen bzw. verändern.

Die Frage lautete:

Wie kann ich die Farbe und Hintergrundfarbe der Hyperlinks in der Navigation ändern?

Die Antwort:

Man editiert die styles.css, indem man „Design“ – „Editor“ in WordPress aufruft.

Dort sucht man nach folgendem Eintrag (Zeile 860):

.nav-menu li a {
    color: #141412;
    display: block;
    font-size: 15px;
    line-height: 1;
    padding: 15px 20px;
    text-decoration: none;
}

Und ändert die Zeile color um.

.nav-menu li a {
    color: #fff; /*neue Textfarbe */
    display: block;
    font-size: 15px;
    line-height: 1;
    padding: 15px 20px;
    text-decoration: none;
}

Danach folgt die Beschreibung der Hintergrundfarbe beim Hover über die Navigation:

.nav-menu li:hover > a,
.nav-menu li a:hover {
    background-color: #220e10;
    color: #fff;
}

Hier ändert man background-color:

.nav-menu li:hover > a,
.nav-menu li a:hover {
    background-color: #000; /* neue Hintergrundfarbe bei Hover */
    color: #fff;
}

Möchte man die normale Hintergrundfarbe ändern, sucht man folgenden Code-Block:

.navbar {
    background-color: #F7F5E7;
    margin: 0px auto;
    max-width: 1600px;
    width: 100%;
}

Hier ändert man wieder die Hintergrundfarbe..

Twenty Thirteen Theme anpassen
Twenty Thirteen Theme anpassen

Hinweis:

Wenn man ohne Child-Theme arbeitet und diese Schritte macht, werden alle Änderungen bei einem Update vom Theme wieder gelöscht! Also dann das Theme bitte nicht updaten!

Hier ist seine angepasste Seite: http://www.ivica-sacer.com/

Vielen Dank für Deine Frage und viel Erfolg weiterhin 🙂

3 Gedanken zu „Theme Twenty Thirteen anpassen“

  1. Hallo,

    ja, das mit dem Einfärben konnte ich nachvollziehen.

    Leider stellt sich die Hover-Hintergrundfarbe im IE9 und Chrome34 unterschiedlich dar. Im IE9 zeigen sich die Untermenüs (Unterkategorien) scheinbar erst beim Darüberfahren mit dem Mauszeiger. Vermutlich, weil die Hover-Hintergrundfarbe nicht angezogen wird. Bei Chrome geht das Untermenü vollständig auf, wenn ich über die Hauptkategorie mit der Maus fahre. Wie lässt sich der scheinbare Fehler im IE9 beheben?

    Nun stellt sich mir aber noch die Frage, wie es gelingt, zwischen zwei Menüpunkten (Kategorien) einen Senkrechten Trennstrich mit Hintergrundfarbe (als optische Trennung) einzufügen. Anders formuliert könnte es auch ein rechter oder linker Rand am Feld jeden Menüpunktes sein.

    Wäre schön, wenn Sie einem absoluten Anfänger helfen könnten.

    Herzliche Grüße
    WalterD

    Antworten
    • Hallo Walter,

      vielen Dank für Deine Hinweise zum IE) und Chrome. Das werde ich mir mal näher anschauen.
      Zu Deiner Frage werde ich gleich einen kleinen Artikel schreiben.

      Viele Grüße
      Philipp

      Antworten

Schreibe einen Kommentar