Theme Twenty Twelve – Body-Farbe ändern

Zum Ändern der Body-Farbe im Theme Twenty Twelve von WordPress legt man wie vorher beschrieben ein Child-Theme an und fügt dann die hier beschriebenen Code in die Datei style.css ein. Damit kann man das Design der Website grundlegend ändern, weil der Body auch die Hintergrundfarbe für viele Elemente im Body bestimmt.

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

Theme Twenty Twelve – Body-Farbe ändern: Child Theme

Natürlich kann man die Body-Farbe auch in der style.css von Twenty Twelve direkt ändern, allerdings ist es besser ein Child-Theme anzulegen, um bei einem Theme-Upgrade von WordPress die Änderungen nicht zu verlieren.
Wie das Child-Theme erstellt wird, ist hier beschrieben…

Theme Twenty Twelve – Body-Farbe ändern: style.css Code

Nachdem wir hier die Titelfarbe der Beiträge verändert haben, verändern wir nun die Body-Farbe. Danach sieht der Code der style.css so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
Theme Name: My Twenty Twelve Child-Theme Extensions
Theme URI: http://www.mydomain.de/
Description: My own Twenty Twelve extensions
Author: Chris Andersen | myblogtrainer.de
Author URI: http://www.myblogtrainer.de/child-theme-twenty-twelve-erstellen/
Template: twentytwelve
Version: 0.1.0
*/
 
@import url("../twentytwelve/style.css");
 
/* Body background color */
.site {background-color: #FF8040;}
 
/* Title posts color */
h1.entry-title a{color:#FFFFFF;background-color:#FF8040;}

Der Code enthält nun drei Bestandteile:
– Den Theme-Namen
– Body background color zur Bestimmung des Hintergrundes des Body
– Title posts color zur Bestimmung der Schrift- und Hintergrundfarbe der Beitragstitel

Die Hintergrundfarbe des Titels stimmt nun mit der Hintergrundfarbe des Body überein. Deshalb sieht man sie nicht.

Theme Twenty Twelve – Body-Farbe ändern: Neues Design orange oder grün

Nun hat sich das Look’n Feel unseres myTwenty Twelve Extensions Theme essentiell verändert:

Theme Twenty Twelve - Body-Farbe ändern

Theme Twenty Twelve – Body-Farbe ändern


Hier ist das ganze in grün. Dabei habe ich nur die obigen Farbcodes für orange (#FF8040) in grün (#40FF00) geändert:
Twenty Twelve Theme Extensions Green

Twenty Twelve Theme Extensions Green


Hier kannst Du Dir die Änderungen in einer Live-Demo anschauen…

Hast Du Fragen oder Kommentare, bzw. ist Dir irgendetwas grundlegendes unklar beim Aufbau der Twenty Twelve Theme-Extensions? Schreibe einen Kommentar…

5 Gedanken zu „Theme Twenty Twelve – Body-Farbe ändern

  1. Sven

    Hallo Chris, super Beschreibungen die man hier bekommt. Vielen Dank dafür. Habe einmal eine vielleicht etwas dumme Frage. Wenn das Child Theme im Backend aktiviert wird, ist ja automatisch das Haupttheme bzw. Parent Theme deaktiviert. Werden dann bei einem Theme Update die Aktualisierungen übernommen, obwohl es deaktiviert ist ?

    Antworten
    1. Chris Andersen Artikelautor

      @Sven Ja, es sei denn Du hast gerade eine Funktion, die im Haupt-Theme aktualisiert wird im Child-Theme verändert.

  2. Mike

    Bei vielen Themes, auch bei Premium Themes ist das der Fall, ich verwende zum Beispiel auf meinen Projekten die Themes von Elegantthemes.com, da gab es bis vor kurzem keine Lösung, wie man ein Update fährt, ohne die gemachten Änderungen in der header.php, footer.php, style.css usw. zu verlieren. Mittlerweile geht das aber auch über ein Child-Theme.

    Antworten
  3. Patrick

    Hallo, danke für die Info. Ich werd mir gleich deinen Beitrag zum Thema Child-Theme durchlesen, da ich eh immer das Problem habe dass bei einem Upgrade meine Einstellungen und Designs verloren gehen. LG

    Antworten
    1. Chris Andersen

      @Patrick
      bei welchem Upgrade mit welchem Theme ist das denn passiert… das höre ich zum ersten Mal… interessiert mich wirklich.
      BG Chris :-)

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>