Einem WordPress Theme eigene CSS hinzufügen – die Vorbereitung für eigene Stile in eurem WordPress Theme und eure erste CSS Anpassung

Step 1 der Tewentyfifteen-Anpassung: Individuelle Stylesheets anlegen.
Die CSS (Cascading Style Sheets) legen fest, wie deine Website optisch gekleidet ist: Die Farben, die Schriften, die Hintergründe. Und oft stößt man im Adin-Panel an die Grenzen und möchte seiner Seite einen eigenen Stil geben. Hier zeige ich euch ein paar Möglichkeiten, wie ihr eure Seite mit eigenen Stilen erweitern könnt.

Kennt ihr das: Ihr habe eine Vision, wie ein Detail auf eurem Blog aussehen soll, aber das Adminpanel eures Themes lässt dafür keine Einstellungen zu? Hier zeige ich euch ein paar Möglichkeiten, wie ihr eure Seite mit eigenen Stilen erweitern könnt: Die CSS (Cascading Style Sheets) legen fest, wie deine Website optisch gekleidet ist: Die Farben, die Schriften, die Hintergründe. Und diese könnt ihr mit wenig Know-How überschreiben:

1. Ihr erstellt euch ein Childtheme in dem ihr eure Änderungen ablegen könnt, ohne das Mutter-Theme zu überschreiben: Diese Lösung ist am besten, denn ihr arbeitet nicht am Originaltheme, so dass bei Theme-Updates nichts überschrieben wird und ihr braucht kein Plugin. Ein Child-Theme ist schnell erstellt: Speichert in einem Texteditor eine Datei mit dem Namen style.css mit folgendem Inhalt ab:

   Theme Name: euer Stylesheetname
   Theme URI: www.eureadresse.de
   Description: Eine Beschreibung - diese wird im Backend bei den Themes angezeigt
   Author: Euer Name
   Template: twentyfifteen
   */
   
   @import url('../twentyfifteen/style.css');
   
   /****Beginn der neuen CSS Angaben****/

   Die roten Texte ersetzt ihr mit euren eigenen Angaben. Wichtig ist der Pfad zu eurem Mutter-Theme in der Zeile @import. Geht per FTP in den Ordner wp-content/themes, legt einen neuen Ordner an und ladet hier die CSS Datei hoch. Anschließend könnt ihr in der WordPress Administration unter >>Design >> Themes euer Childtheme aktivieren. Ab jetzt könnt ihr in der neuen CSS-Datei deine Theme-CSS überschreiben.

2. Per Plugin Simple Custom CSS Ja, ich bin kein Pluginfreund, daher würde ich Variante 1 immer präverieren. Aber der Vollständigkeit halber präsentiere ich hier noch das Plugin Simple Custom CSS. Dieses Plugin fügt eurem Adminpanel einen Reiter hinzu, über dem ihr eure individuellen CSS einbauen könnt.
3. Direktes Bearbeiten der style.css Das empfehle ich nur, wenn ihr mit einem eigenen Theme arbeitet, dass ihr selbst weiterentwickelt. Die style.css könnt ihr auch aus dem Adminpanel heraus unter >>Design >> Editor bearbeiten. Bitte macht euch aber immer ein Backup der Datei, wenn ihr am offenen Herzen eurer WordPress-Installation arbeitet.

Damit habt ihr die Basis gelegt, um eurer Worpress-Installation ein eigenes Look and Feel zu geben. Auf der Ideenlounge gibt es regelmäßig Tipps und Tricks, die ihr auch  in euren Blog einbauen könnt.

Und hier das Beispiel, wie ihr eure nummerierten Listen genauso schick formatiert werden, wie die Listen auf dieser Seite:

Fügt dazu folgenden Code in die style.css eures neuen Childthemes:

.entry-content ol {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/     
    margin: 0;
    margin-left: 3em;
    padding: 0;     
    counter-reset: li-counter;
}

.entry-content ol > li{
    position: relative;
    margin-bottom: 40px;
    padding-left: 0.9em;
    min-height: 3em;
    border-left: 5px solid #000000;
    clear:both;
}

.entry-content ol > li:before {
    position: absolute;
    top: 0;
    left: -1em;
    width: 0.8em;     
    font-size: 3em;
    line-height: 1;
    font-weight: bold;
    text-align: right;
    color: #000000;    
    content: counter(li-counter);
    counter-increment: li-counter;
    
}

(Quelle: codeitdown.com/ordered-list-css-styles)

Dieser Code hier ist für das Twenty Fifteen Theme erstellt. Bei eurem eigenen Theme klickt mit der rechten Maustaste auf die Ãœberschrift eures Beitrages und wählt „Element untersuchen“. Dann öffnet sich ein Fenster mit dem Quellcode eurer Seite, in dem auch das gewählte Element – in unserem Fall die Ãœberschrift <h1> markiert ist. Dort schaut ihr nach, welche Ebene (<div>-Container) darüber liegt und welche ID oder welche Klasse diese hat. Klassen werden in CSS mit einem Punkt und IDs mit einer Raute angegeben.

Ein Beispiel aus einem anderen Projekt: Hier würde ich .entry-content mit #spalte2 ersetzen. Das bedeutet, dass dann alle ungeordneten Listen innerhalb der Spalte 2 mit diesem Stil angezeigt werden. Die Ebene darunter habe ich bewusst nicht gewählt, weil ich mit #spalte2 eine eindeutige ID anspreche, die auch nur einmal im Template vorkommt.

Testet das einfach mal aus. Wichtig, wenn ihr Änderungen an den CSS macht: Überprüft danach die verschiedenen Seitentypen (Seite, Beitrag, Archive, etc..) und vergesst nicht, fleißig F5 zum neu Laden der Seite zu drücken :-). Wenn Ihr ein Cache-Plugin zur Beschleunigung eurer Seite verwendet, leert dort den Cache um die CSS-Änderungen zu sehen.

Ich kenne mich mit CSS nicht aus – woher bekomme ich solche CSS Styles?

Es gibt im Netz viele CSS Beispiele zum kopieren. Die Styles dieser schicken  Liste hier habe ich beispielsweise von codeitdown.com/ordered-list-css-styles. Habt keine Scheu vor dem Quellcode.  Mit ein bisschen Einarbeitung könnt ihr die CSS schnell auslesen und bearbeiten.

Ihr möchtet noch mehr Tipps?

In meinem nächsten Betrag werde ich mich mit verschiedenen Stilen für den Editor beschäftigen (Schriften, Kästen, Trennlinien, etc..) Trag einfach eure Mail links unter „Abonnieren“ ein und Ihr erhaltet alle Tipps bequem per Mail.

Kommentare

1. Sanne 18. März 2015 um 19:35 Uhr

   Hi – ich habe mich bisher noch nie an Child-Themes gewagt oder überhaupt etwas an einem Theme zu ändern. Aber es scheint tatsächlich gar nicht so schwer zu sein. Danke für den Artikel – ich werde dann mal den Child-Theme-Test in Angriff nehmen. Habe deinen Blog gleich mal abonniert.

   Antworten
   • Mirjam 18. März 2015 um 21:47 Uhr

     Hi, ja, es ist eigentlich so einfach, dass es schon kaum zu glauben ist. Ich wünsche viel Spaß beim Testen.

     Antworten
2. Guenther Sellner 3. April 2015 um 0:13 Uhr

   Hi Mirjam,
   finde es toll, wie Du das machst.
   Da muss ich noch ein Weilchen üben..
   Eine Frage zu den Kommentaren:
   Ich habe diese bei Einstellungen etc. de-aktiviert.
   In einem „kostenlosen Theme“.
   Auf der „Startseite“ bzw. a.d. Blog bekomme ich sie nicht weg.
   Auf Unterseiten ist die Komentarfunktion weg.
   Lässt sich das einstellen?
   Danke für Tipps!

   Antworten
   • coloritas 3. April 2015 um 0:51 Uhr

     Hallo, vielen Dank 🙂 das freut mich.
     Zu den Kommentaren: wenn diese in der Administration unter Einstellungen –> Diskussion deaktiviert wurden, bezieht sich das nur auf die Grundeinstellung für neue Posts – alte behalten nach wie vor die Kommentareinstellung bei. Diese musst du nachträglich nochmal für jeden einzelnen Post deaktivieren.

     Wenn du jedoch die Kommentare grundsätzlich entfernen möchtest, kannst du im Theme in allen .php-Dateien die Zeile entfernen, sofern diese vorhanden ist. Diese Zeile gibt es beispielsweise oft in der single.php und page.php. Bei einem Theme, dass nicht von dir geschrieben ist würde ich vorher empfehlen wie oben beschrieben ein Childtheme anzulegen, damit bei Updates nicht deine Änderungen überschrieben werden.

     Alternativ gibt es auch ein Plugin Disable Comments Рdas gibt dir die M̦glichkeit, die Kommentare komplett abzuschalten.

     Ich hoffe, das hilft etwas weiter.

     Viele Grüße
     Mirjam

     Antworten
     • Guenther Sellner 3. April 2015 um 17:45 Uhr

       Danke Mirjam!
       Ich hab mir das Plugin runtergeladen und installiert.
       Super Tip, das werde ich gleich mal ausprobieren :).
       Unter Einstellungen steht:
       „Das Deaktivieren von Kommentaren deaktiviert auch Trackbacks und Pingbacks“. Wie wirkt sich das a.d Seite aus?
       Die Kommentar-Funktion ist a.d. Startseite jetzt auch weg! Top!! Es funktioniert!
       In den php. Dateien rum zu wursteln oder gar ein „Child-Theme“ neu anzulegen, erscheint mir derzeit doch noch zu schwierig..

       Antworten
       • coloritas 3. April 2015 um 21:05 Uhr

         Hallo, Trackbacks und Pingbacks können für ein Linkbuilding ganz interessant sein. Allerdings kommt es hier oft zum sogenannten Trackback bzw. Pingback Spam. Hier gibt es einen tollen Artikel zu den Vor- und Nachteilen: http://www.elegantthemes.com/blog/resources/wordpress-trackbacks-and-pingbacks
         Es gibt auch noch andere Plugins, die hier differenzieren: z.B. disable-comments-enable-comments.
         Allerdings kann ich empfehlen mal die Variante mit dem Child Theme zu probieren – es ist halb so schwer, wie es auf den ersten Blick aussieht. Hier noch ein weiterer Link zu einer sehr guten Anleitung: http://www.work-paper.de/wordpress-child-theme-erstellen/. Eigentlich braucht man nur die Style.css in einem neuen Theme Ordner – und danach kann man in aller Ruhe eine Theme Datei nach der anderen auseinandernehmen.

         Probiere es einfach mal aus 🙂

         Viele Grüße
         Mirjam

         Antworten

Das könnte dich auch interessieren: