Farben für das WordPress Theme „Twenty Fourteen“ anpassen

Farben anpassen für das WordPress-Theme Twenty-FourteenDas WordPress-Theme Twenty Fourteen ist für mich persönlich aktuell das schönste Standard-Theme von WordPress: Klar, übersichtlich und modern kommt es daher. Das es Responsive ist, also für die Darstellung auf mobilen Geräten optimiert, versteht sich fast von selbst 🙂

In der Standard-Version kommt das Theme allerdings mit dem schwarz im Kopf und der Seitenleiste für viele etwas „düster“ daher. Leider gibt es in den Theme-Optionen selbst keine Möglichkeit, die Farben anzupassen.

Doch hier kann Abhilfe geschaffen werden:

Anpassungen mit dem Plugin „Fourteen Colors“

Wenn man das PluginFourteen Colors“ installiert und aktiviert erhält man zwei Farbwähler, mit denen man die „Kontrastfarbe“ (das sind die Farben von Kopf und linkem Rand) sowie die „Akzentfarbe“ (Links, Suchmaske, etc.) einstellen kann.

Diese Option findet sich unter „Design“ -> „Anpassen“ -> „Farben“.

Anpassungen über CSS

Wer noch mehr Flexibilität bei der Anpassung der Farben wünscht, kann die Farben auch über Anpassungen der CSS-Regeln beeinflussen:

Da das Theme Twenty Fourteen keine eigene „Custom CSS“ mitbringt, man Anpassungen im Theme aber niemals direkt in der style.css vornehmen sollte, empfehle ich hierfür das Plugin „PC Custom CSS“ zu installieren.

Wenn außer den Farben noch weitere Anpassungen vorgenommen werden sollen empfiehlt es sich eventuell ein Child-Theme anzulegen.

Wenn Sie das Plugin „PC Custom CSS“ installieren, finden Sie unter „Design“ einen neuen Menüpunkt „Custom CSS“. Hier können Sie den folgenden Code einfügen (den Sie gern von mir kopieren dürfen).

Zwischen /* und */ kommentiere ich jeweils, wofür die jeweilige Codezeile steht.

Statt der Namen für die Farben (red, blue, yellow, …) können Sie natürlich auch den Farbcode Ihrer Farbe (z.B. #ff0000) verwenden, wenn Sie diesen kennen.

Hier also jetzt der Inhalt für Ihre Custom CSS:

Farben für Kopfzeile, Seitenleiste und Fußleiste

.site-header, .site:before {background-color: orange;} /* Kopf */ 
#secondary {background-color: grey; color: red;} /* linke Seitenleiste */
.site-footer {background-color: grey;} /* Fußleiste */

Links

a {color: red;} /* Linkfarbe */
a:hover {color: grey;} /* Linkfarbe beim Überfahren mit der Maus */

Farben für die Widgets

.content-sidebar .widget .widget-title {color: grey;} /* Überschriften */
.content-sidebar .widget a {color: red;} /* Farbe der Links in der Sidebar */
.widget a:hover {color: white;} /* Linkfarbe in der Sidebar beim Überfahren mit der Maus */

Suchmaske

.search-toggle {background-color: red;} /* Hintergrund für Lupe */
.search-toggle:hover:before, .search-toggle.active:before {color: white;} /* Lupensymbol */
.search-toggle:hover, .search-toggle.active {background-color: grey;} /* Hintergrund beim Überfahren mit der Maus */
.search-box {background: grey;} /* Hintergrund für Suchmaske */

Navigation oben

.primary-navigation li > a, .primary-navigation ul ul a {background-color: red; color: blue;} /* Farbe der Navigation  */
.primary-navigation li:hover > a, .primary-navigation li.focus > a, .primary-navigation ul ul a:hover, .primary-navigation ul ul li.focus > a {background-color: yellow; color: green;} /* Farbe beim Überfahren mit der Maus */

Navigation links

.secondary-navigation li:hover > a, .secondary-navigation li.focus > a, .secondary-navigation ul ul a {background: grey; color: white;} /* Farbe der Navigation */
.site-navigation a:hover,.secondary-navigation ul ul a:hover, .secondary-navigation ul ul li.focus > a {background: grey; color: red;} /* Farbe beim Überfahren mit der Maus */

Wenn Sie Fragen zu dieser Anleitung haben oder wenn ich einen Bereich des Themes übersehen haben sollte, dessen Farbe Sie gern ändern möchten, dann stellen Sie Ihre Frage gern im Kommentarbereich.

Bildquelle:
© almagami – Fotolia.com

Print Friendly, PDF & Email

Kommentare

Farben für das WordPress Theme „Twenty Fourteen“ anpassen — 83 Kommentare

  1. Schön, die Selektoren für die Farben ordentlich aufgelistet zu sehen! Allerdings stimmt nicht ganz, dass man diese Änderungen „nie“ direkt in der style.css machen sollte. Eigentlich ist das Gegenteil der Fall: Wenn man diese Änderungen direkt in der style.css macht, spart man dem Nutzer einen zusätzlichen HTTP-request (was oft sogar wichtiger ist, als Bytes zu sparen), der bei jeder zusätzlichen Referenzierung entstehen würde. Es ist vermutlich für die große Masse von WordPress-Usern sehr bequem, Funktionen durch den Einsatz von PlugIns zu ergänzen und hat sich deshalb als Praxis in der Gestaltung von Sites etabliert. Allerdings sollte man es mit damit nicht übertreiben, in diesem Fall besser gesagt: Für solche einfachen Eingriffe sollte man nicht unbedingt darauf zurückgreifen. Es ist aber relativ unkompliziert, per Suchen und Ersetzen in der style.css Farben zu ändern, das erfordert nicht viel Geschick und nimmt auch nicht wirklich viel Zeit in Anspruch.

    • Hallo Frank,

      vielen Dank für Dein Feedback.

      Ich bin sicher, man kann darüber streiten, ob eine Änderung in der style.css sinnvoll ist oder nicht. Aber da ein Theme-Update alle Änderungen in der style.css überschreibt und bei einem fehlenden BackUp dann alle Anpassungen unwiederbringlich verloren sind bleibe ich bei meiner Aussage, dass man immer eine Custom CSS oder besser noch ein Child-Theme nutzen sollte, wenn man individuelle Anpassungen an einem Theme vornimmt 🙂

      Herzliche Grüße
      Michaela

  2. Hallo Michaela, deine Anleitung ist gut. Ich möchte aber den Hintergrund in der Mitte von weiß auf eine Farbe meiner Wahl ändern. Dazu suche ich mir einen Wolf, finde aber nur Tipps zum Header, Seitenleiste usw. Eben das was ich nicht brauche 🙁
    Ich möchte auch ein Childtheme anlegen, weiß aber nicht den genauen Zeilenbereich… Habe im Dashboard ohne Probleme mit dem Plugin Fourteen Colours Farben des Menüs usw. ändern können. Für den mittleren Bereich finde ich auch da keine Einstellmöglichkeit.
    Viele Grüße, Uwe

    • Hallo Uwe,

      hier der Code, den Du für die Anpassung des weißen Hintergrundes benötigst. So sollte es eigentlich funktionieren:

      div#primary.content-area, header.entry-header, .site-content .entry-meta, div.entry-content {background: purple;}

      Herzliche Grüße

  3. Erst mal eine Frage zu dem Themes.
    Hier geht es um die anpassung von “Twenty Fourteen”
    Wenn ich zb. an Twenty Thirteen was ändern möchte und Custom css verwenden möchte, kann ich da auch die Beispiele verwenden.
    Und als zweites ? Was passiert genau mit der Style.css wenn ich etwas mit Coustom css geändert habe, und ich es evtuell rückgänig machen möchte.

    Danke für die Bemühungen
    ////Thorsten Lemke

    • Leider passen die hier genannten Beispiele nicht für TwentyThirteen, weil die vergebenen Klassen und IDs für die einzelnen Bereiche von Theme zu Theme unterschiedlich sein können.

      Wenn Du eine Custom CSS verwendest, dann bleibt die style.css davon vollkommen unberührt. Die Custom CSS überschreibt lediglich die Informationen aus der style.css. CSS Regeln funktionieren so, dass immer die letzte aufgeführte Regel alle vorangehenden überschreibt. Wenn Du also die Informationen aus der Custom CSS löschst bleibt die ursprüngliche style.css unverändert vorhanden.

  4. Hallo Michaela Steidl,

    vielen Dank, dass du die ganzen relevanten Farbvorgaben aus der riesigen style.css Datei herausgesucht hast.
    Im Abschnitt: „Farben für Kopfzeile, Seitenleiste und Fußleiste“ muss – so glaube ich – ein Doppelpunkt weg.
    .site::before -> .site:before.

    Ich frage mich, ob folgendes nur bei mir auftritt. Wenn ich die Headerfarbe ändere, dann ist die Farbe des „title text“ immer weiß, auch wenn im Appearence->Header Menü, die Textfarbe auf eine Art rot (bei mir) gesetzt ist. Das finde ich ziemlich ärgerlich, da genau dies mein Anliegen ist. Hast du oder irgendjemand dieses Problem erlebt und interessanter, einen Plan dies zu umgehen?

    Lg Gerald

    • Hallo Gerald, Du hast recht, der Doppelpunkt ist da definitiv zu viel. Das werde ich ändern.

      Wegen Deines Problems: Nein, leider kann ich das so nicht nachvollziehen. Hast Du vielleicht mal einen Link zu der Seite, wo das auftritt?

      • Hallo Michaela,

        ich habe mich entschlossen, nach meinen Erfahrungen, die CSS-Datei umzuschreiben, habe aber ein kleines Post geschrieben, in dem ich das Thema beschreibe.

        http://andallthatjazz.bplaced.net/computer/fourteen-colors-plug-in-fur-wordpress/

        Die beiden Bilder sind wirklich nur durch anklicken der entsprechenden Buttons im Plug-in entstanden – und die Farbe für den Titel hat sich auch nicht durch wundersame Weise zurückgesetzt.
        Lg Gerald

        • Hallo Gerald, ich habe mir das gerade mal angeschaut. Die rote Farbe für den Titel ist über das Plugin eingestellt – In der CSS des Themes steht, dass der Titel weiß sein soll. Das wird vom Plugin überschrieben.

          Wie und wo hast Du die Hintergundfarbe dann auf blau geändert? Über das Plugin oder über eigene CSS-Anpassungen?

          • Hallo Michaela,
            mal schauen, dass ich alles korrekt darstelle.
            – Die rote Farbe des Titels habe ich in Appearence -> Header -> Text Color gesetzt.
            -Das schöne „Königsblau“ der Links in Appearence -> Customize -> Colors -> Accent Color (Farbe: #0a2193)
            -Das blau / violett des Hintergrunds: Appearence -> Customize -> Colors -> Contrast Color (Farbe: #4a4a7b)
            Also alles nur durch anklicken geändert. Ich habe so das Gefühl, dass das Plug-in die Titelfarbe nur unter der Bedingung auf rot belässt, dass der Hintergrund schwarz ist, ansonsten die Textfarbe auf weiß „zurückgesetzt“ wird.
            Ich hatte einiges über das Plug-in im Netz gelesen und mich gefreut, dass sich ein paar Einstellungen sehr einfach bewerkstelligen lassen. Ich persönlich kann das nicht bestätigen. Auch wenn ich da was falsch eingestellt habe, so kann ich bei mir kein völlig abwegiges Verhalten bemerken. Ich scheine aber zu einer kleinen Minderheit zu gehören, in der das Plug-in nicht das tut, was es soll. Eigentlich bin ich der einzige, der damit Probleme hat. Für mich war die Konsequenz, dass ich mich durch die ganze style.css hindurchwühlte. Vielleicht nicht das richtige für jedermann.
            Lg Gerald

  5. Klasse Beitrag! *Daumen hoch*
    Genau das was mir fehlte.

    Weißt du zufällig wie man es hin bekommt, die dauerhafte Farbe des Lupensymbols zu ändern? Bei deinem CSS Vorschlag, wird bei mir nur die Mouseover Farbe verändert.

    Danke!

  6. Hallo,

    danke für die tolle Farbanpassung. Allerdings schaffe ich es nicht, die linke Menüseite auch in dem Blauton der Oberen anzupassen. Wenn ich überall „blue“ einsetze, habe ich alles einheitlich, aber zu hell. Gebe ich die Farbcodes ein, stimmt die linke Seite nicht und bleibt grau-schwarz. Wasmache ich falsch?
    LG
    Katrin

    • Irgendwann muss ich hier mal einen Showroom für das Theme Twenty-Fourteen aufmachen. Ich finde immer wieder toll, was man aus diesem Theme so alles machen kann 🙂 … Aber das nur am Rande bemerkt.

      Wenn Du die Leiste mit „blue“ anpassen kannst, aber der Farbcode nicht funktioniert wäre mein erster Gedanke, dass Du einen fehlerhaften Farbcode verwendest. Kannst Du hier mal posten, welchen Code Du verwendest?

      (Mit „[ ]“ statt „“, sonst wird der Code in den Kommentaren nicht angezeigt.)

      Herzliche Grüße
      Michaela

  7. Hallo, auf meiner Web-Site verwende ich Twenty Fourteen. Leider bin (noch) kein wordpress Profi und hab schon mehrmals versucht,
    das Thema genauso aufzubauen, wie es in der Theme Vorschau angezeigt wird (will heissen mit den 3 bebilderten Kästen unter der Seitenleiste). Können sie mir verraten, wo ich die einstellen kann? Vermutlich seh ich den Wald vor lauter Bäumen nicht… Herzlichen Dank stefan

    • Hallo Stefan,

      das ist in der Tat ein wenig versteckt:

      Wenn Sie das Theme aktiviert haben und unter „Design“ den Menüpunkt „Anpassen“ auswählst, finden Sie ganz unten den Punkt „hervorgehobener Inhalt“.

      Dort können Sie zum einen auswählen, ob Sie einen Slider haben möchten oder die 3 Kästen aus der Theme-Vorschau (Raster).

      Der Trick: Sie müssen ein Schlagwort festlegen, mit dem Sie Beiträge verknüpfen, die in diesem Bereich angezeigt werden sollen. Also z.B. „featured“ oder „highlight“ oder irgend ein anderes beliebiges Schlagwort.

      Dieses Schlagwort vergeben Sie dann im Editor für den Beitrag unter „Schlagwort“. Wichtig: Sie müssen für den Beitrag auch ein Vorschaubild hinzufügen, sonst wird auf der Startseite kein Bild angezeigt.

      Ich hoffe, das hilft ein wenig weiter (wenn auch leider etwas spät …)

      Herzliche Grüße
      Michaela Steidl

  8. Hallo,
    ich möchte gern das „Getoggle“ der Suche im Twenty Fourteen abstellen, d.h. das Suchfeld nebst Lupe dauerhaft angezeigt haben. Geht das?
    Gruß, Susanne

  9. Hallo Michaela,

    ich habe bei unserer Homepage mittlerweile auch auf twenty fourteen umgestellt. Aktuell markiert er die jeweils aktive Seite noch in grün und das Untermenü (Aufklappmenü, wenn unter einer Seite mehrere Unterseiten hängen) erscheint ebenfalls in grün. Weißt du zufällig, wie ich das ändern kann?
    Vielen Dank schonmal für deine Antwort.
    Gruß,
    Matthias

  10. Halllo Michaela

    erslmals dankeschön für deine ausführliche Anleitung.
    leider hackt es bei mir noch bei der Anpassung der hervorgehobenen inhalten, genauer gesagt bei der Hintergrund Farbe.
    hast du da ein code dazu?

    gruss

    michi

  11. Hallo Michaela,

    ich möchte gerne auf der Homepage (Thema twentyfourteen) die Farben und andere Einstellungen nur für die Druckversion ändern. Hast du zufällig eine Idee, wie ich das machen kann?
    Vielen Dank schonmal für deine Antwort.
    Gruß,
    Matthias

  12. Pingback: Das WordPress Bistro hat Geburtstag › WordPress-Bistro

  13. Hallo Michaela,

    womit kann ich die Kontrastfarbe der Eingabefelder des Mailpoet zum Registrieren anpassen?

    Wenn ich schon Änderungen vorgenommen habe, kann ich die irgendwie in ein Child Theme kopieren, oder muß man die neu eingeben?

    Liebe Grüße
    Melanie

    • Hallo Melanie, versuche für die Eingabefelder mal folgenden Code:

      .widget-area .widget input, .widget-area .widget textarea {
      background-color: #fff;
      }

      Die Anpassungen solltest Du idealerweise in ein Child Theme schreiben. Wenn Du bereits Anpassungen im style.css direkt vorgenommen hast dann musst Du diese leider händisch in das Child-Theme übertragen. Sicherheitshalber auf jeden Fall eine Kopie der alten style.css auf Deinem Rechner abspeichern falls Du etwas übersehen haben solltest.

      Herzliche Grüße
      Michaela

  14. Hallo,
    ich nutze für meine Homepages das Twentyfourteen Theme und habe die Farben angepasst. Dies hat auch prima funktioniert.
    Nun habe ich aber das Problem, dass in der Mobilen Ansicht Farben benutzt werden die nicht zum restlichen Style der Homepage passen- Wie kann ich dies ändern ?
    bin Neueinsteigerein – daher keine Vorkenntnisse 😉
    Vielen lieben Dank für die Hilfe
    LG Jenny

    • Hallo Jenny, ich habe mir Deine Website gerade mal auf dem Desktop angeschaut und das Bild verkleinert. Da konnte ich nicht sehen dass sich irgendwo Farben verändern. Was genau meinst Du?

      Herzliche Grüße
      Michaela

    • Die style.css wird ja bereits über das Elterntheme eingelesen. Sie noch einmal vollständig in das Childtheme zu kopieren würde bedeuten dass sie doppelt eingelesen wird was auch nachteilig für die Ladezeiten der Website wäre.

      Da CSS-Regeln immer die vorhergehenden Regeln überschreiben musst Du im Child-Theme-CSS also eigentlich nur die Änderungen eintragen, die Du wirklich konkret benötigst.

      • So weit ist es klar. Will ich nun in der Child-Theme den Text breiter gestalten, warum so viel leere Fläche(?), muss ich diesen in der „Eltern-Theme-CSS“ suchen und dann in die Child-Th überführen und entsprechend anpassen – daher wäre es bequemer, um weniger hin und her wechseln zu müssen!
        Ein Ausweg: Ich kopiere die gesamte CSS auf ein separates File. Dann kann ich dort suchen und holen, was ich benötige und es via Editor in die Child-CSS zu bringen. OB so oder anders, ich suche die Einfachheit und bin offen für Tipps!
        Eine wertvolle Erleichterung betreffend Child-Theme: Der Orbius Child Theme Creator => https://wordpress.org/plugins/orbisius-child-theme-creator/

        • Hallo Herr Odermatt,
          eigentlich müssen Sie gar nicht im Stylesheet suchen. Der einfachste Weg ist es, mit den Entwicklerwerkzeugen Ihres Browsers oder mit Firebug den entsprechenden Selektor zu suchen und dann einfach diesen Selektor mit dem neuen Wert in die style.css des Child-Themes einzutragen.

          Also angenommen Firebug zeigt Ihnen dass der Bereich den Sie mit einem roten Hintergrund versehen wollen ein Div mit der ID „grossebox“ ist, dann müssen Sie lediglich in das Stylesheet des Child-Themes schreiben:

          #grossebox {background: red;}

          Das geht ohne den entsprechenden Eintrag in der Original style.css zu suchen und anzupassen da das Stylesheet des Childthemes das Stylesheet des Parent-Themes überschreibt.

          • Grüezi Frau Steidl,danke für den Hinweis! Das Einfache ist der Feind des Komplizierten… Experimente werden mir hoffentlich dienen, sonst melde ich mich wieder! Als Anwender „ohne Kenntnisse“ ist es etwas aufwendiger um zu verstehen. Immerhin entspricht das Aussehen meines Blogs weitgehend meinen Vorstellungen, aber vielleicht muss ich mich doch noch mit css auseinandersetzen.

  15. Hallo,
    das ist ja alles echt super aber ich muss gestehen ich scheitere schon daran das Plugin zu installieren. Könnte mir das bitte jemand ganz einfach erklären?

    Danke 🙂

    • Hallo Lea,
      im Prinzip ist das ganz einfach: Du gehst im Dashboard auf den Menüpunkt „Plugins“ und wählst dann „Installieren“

      In dem Suchfeld trägst Du dann den Namen des Plugins ein, dass Du installieren möchtest. Wenn es dann angezeigt wird klickst Du auf „Installieren“ und dann auf „Aktivieren“. Das war’s eigentlich schon 😉

      Wenn Du den Menüpunkt „Plugins“ bei Dir nicht finden kannst könnte das daran liegen dass Du WordPress über die Plattform wordpress.com nutzt – Dort gibt es keine Möglichkeit Plugins zu installieren.

      Herzliche Grüße
      Michaela

  16. Hi,

    erst mal vielen Dank für den tollen Artikel.

    Ich bastle gerade auch am Twentyfourteen-Theme rum. Habe eigentlich alles toll eingestellt und bin zufrieden. Jetzt möchte ich noch gerne das Responsive Menü, das sich bei schmalen Bildschirmen öffnet einstellen. Eigentlich stelle ich mir vor, dass der Hintergrund einen Blauton hat, die Linktexte hellgrau sind und beim Hover der Text weiß wird – mehr nicht. Gibt es hierfür eine Stelle im css wo man dies eingeben kann? Und können diese Einstellungen unabhängig von dem Aussehen der Primary Navigationsleiste gemacht werden?

    Vielen Dank fürs Feedback!
    Jürgen

    • Hallo Jürgen,
      über CSS lässt sich das einrichten, aber es gibt keine Stelle im CSS an der Du das anpassen kannst sondern Du musst das mit einer eigenen Media-Query einstellen.

      Heißt, Du schreibst in Deine Custom CSS:

      @media screen and (max-width: 320px) {

      }

      und fügst zwischen die beiden {} den CSS-Code für Dein angepasstes Menü auf dem Smartphone ein.

      Ich hoffe, das hilft Dir weiter?

      Herzliche Grüße
      Michaela

  17. Hallo Michaela,
    hier hast Du echt viele tolle Informationen zum Twentyfourteen-Theme
    aufgeführt, ich hoffe Du kannst mir auch bei meinem Problem helfen.
    Ich entwerfe gerade eine Familienseite, auf der für jedes Familien-Mitglied eine „Seite“ zur Verfügung steht, diese Seiten habe ich in als Sekndäres Menü eingerichtet. Es ging alles hervorragend bis zur 91. Seite, mit jeder neuen Seite wird im Menü der letze Eintrag entfernt. Kennst Du eine Möglichkeit diese Begrenzug zu ändern?
    LG Kurt

  18. Hallo Michaela,
    ich habe auf meiner Seite ein Logo oben gesetzt was leider von einer grünen Farbe leicht überdeckt wird. Diese ist zwar teilweise transparent, ich möchte dieser aber ganz entfernen.
    Mit deiner Anleitung und dem Custom CSS Plugin konnte ich bereits die Farbe des Footers entfernen, aber mit
    .site-header, .site:before {background-color: red;} /* Kopf */
    bekomme ich keine Farbe geändert 🙁

    Liebe Grüße
    David

        • Hallo David,

          schreibe mal in die Custom CSS oder die style.css Deines Child-Themes folgenden Code:

          .backdrop {background: transparent;}

          Das sollte den grünen Schleier entfernen.

          Herzliche Grüße
          Michaela

          • Hallo Michaela, Du bist die beste. Genau das hat mir gefehlt.

            Ein Problem habe ich noch und komme nach tagelangen Googeln nicht wirklich weiter.
            Wenn ich in einem Beitrag auf eine Kategorie klicke, dann erscheint diese als hässliche graue Überschrift auf dem grünen Hintergrund der Seite.
            Wie kann ich über die Custom CSS diese Farbe und auch die Farbe des Seitentitels ändern

            Liebe Grüße David

            —– Ursprüngliche Nachricht —–

  19. Hallo Michaela,

    Erstmal super hilfreicher Artikel den man so nur selten findet.

    Eine Frage:
    Hast du auch einen Css-Code, damit man das Lupensymbol in der Navigationsleiste im Twenty Thirteen-Theme auf die Farbe Weiß ändern kann, da der oben vorgegebene Code anscheinend nur im Fourteen Theme funktioniert.
    Das Plugin „Thirteen Colors“ bietet ebenfalls keine Funktion dafür an.

    Beste Grüße
    Danel Gruber

    • Hallo Daniel,

      das Such-Icon in Twenty-Thirteen ist nicht über einen Icon-Font eingebunden, sondern über ein PNG. Du kannst das also nicht mit CSS einfärben sondern müsstest ggfs. das Symbol unter /wp-content/themes/twentythirteen/images/search-icon.png herunterladen, über ein Bildbearbeitungsprogramm weiß einfärben und dann wieder neu hochladen.

      In dem Fall daran denken ein Child-Theme anzulegen, sonst wird Deine Änderung beim nächsten Theme-Update einfach überschrieben.

      Herzliche Grüße
      Michaela

  20. Liebe Michaela
    Soeben bin ich auf deine Seite gestossen – den ich probiere schon den ganzen Morgen ein Problem im WordPress zu lösen. Vorweg: ich bin Laie bezüglich Programmierung etc.

    Vieles habe ich geschafft; jedoch folgendes nicht:

    Ich möchte im Menu die Schriftfarbe anpassen. Wenn ich mit der Maus bzw. wenn der Pfeil über die einzelnen Menupunkte fahre, wird die Schriftfarbe blau und bleibt nicht in dieser dunklen Farbe. Am liebsten hätte ich beim „Drüberfahren“ das helle Grün wie der Hintergrund. Jedoch ist es auch in dieser dunklen Farbe ok – kannst du mir allenfalls weiterhelfen? Das Theme heisst: Matheson.

    Vielen Dank, Seraina

  21. Hoi Michaela,
    ich beschäftige mich seit kurzem mit WP und habe eine testseite aufgebaut. Leider schaffe ich es nicht, mit dem plugin fourteeen-colors das „schwarz“ zu verbannen. Ich kann zwar den „Hintergrund bei großen Bildschirmen“ mit dem Farbwähler ändern, bei „Accent“ und „Content“ kann ich nichts anwählen. Bei mouse over zeigt sich dort zwar die Hand, doch ich kann nichts anklicken..
    Ich möchte also die schwarze Hintergrundfarb an der Seite und oben ändern. Gibt es da einen Konkurrenz zu anderen plugins?
    Styles und styles:twentyfourteen brachten auch keinen Erfolg.
    Hast Du mir da bitte einen Tipp, wo ich weitersuchen kann?
    Vielen Dank
    Klaus

    • Hallo Klaus,

      mit dem Plugin weiß ich nicht genau wie Du die Bereiche einfärben kannst, weil ich damit selbst noch nicht gearbeitet habe.

      Aber dieser CSS-Code bezieht sich auf die schwarze Leiste oben und die Seitenleiste links, damit müsstest Du diese Bereiche einfärben können:

      .site-header, .site:before {background-color: orange;} /* Kopf */
      #secondary {background-color: grey; color: red;} /* linke Seitenleiste */

      Herzliche Grüße
      Michaela

  22. Hallo Michaela, ich vermisse eine Farbanpassung für den Content in Twenty Four. Ich habe dort eine Tabelle eingebaut, in der links Text steht und rechts ein Flash-Film. Obwohl ich auf der Bearbeitungsseite die Tabellenfarbe ändern kann, tut sieht am Ende in der Seitenansicht nichts. Der Hintergrund bleibt weiß und die Tabelle ist farbig. Ich habe auch noch keinerlei Hinweis gefunden, wo ich das ändern kann.

      • Einen Link habe ich nicht, da ich das Projekt erst mal unter xampp realisiere. Den Hintergrund habe ich inzwischen komplett (inkl. Tabelle) einfarbig gestalten können. Allerdings fand ich nirgendwo eine Antwort, wie ich die gesamte Seitenhöhe verändern kann. Links ist das Menü, daneben rechts der Inhalt samt Tabelle. Der Footer sitzt weit unten, dazwischen ist viel leerer Raum. Irgend eine Idee?
        Danke und Gruß
        Rolf

  23. Hallo Michaela, ich benutze das Theme Twenty Thirteen. Die Hintergrundfarbe u Schriftgröße konnte ich auf der Startseite problemlos über das Plugin Styles ändern. Jetzt habe ich allerdings eine Kategorie mit einem Beitrag angelegt und dort ist noch die Standardeinstellung (voreingestellte Hintergrundfarbe) zu sehen. Wie bzw. wo kann ich für die angelegten Kategorien die Hintergrundfarbe und Schriftart ändern. Im CSS Editor habe ich es leider noch nicht finden können.

  24. Hallo Michaela,

    also deine Anleitungen haben mir schon sehr weitergeholfen. Leider bleibe ich an der Herausforderung hängen, dass ich das Standard-Theme so anpassen möchte wie z.B. bei dir. Also das es in der Mitte wie bei dir weiß ist und dann außen eine andere Farbe oder sogar besser wie bei dir eine Grafik (rechts und links außen außerhalb vom Content). Bei mir sieht der Content-Bereich bisher aus wie ein riesen weißer Block. Idealerweise soll aber der Header wie bereits beim Standard-Theme durchgezogen bleiben. Kann dir gerne einen Link schicken. Wollte das bloß nicht gleich machen damit du nicht denkst ist evtl. „Spam“.
    Hast du da einen Tipp?
    Grüße

    • Hallo Chris, meine Website ist mit Weaver II erstellt, da sind die Einstellungsoptionen deutlich vielfältiger als bei den klassischen Standard-Themes.

      Bei Twenty Fourteen ist der Hintergrund etwas anders definiert, da wird das mit einer Hintergrundgrafik ziemlich schwierig, weil der Inhalt selbst nicht wie hier in der Mitte steht.

      Vielleicht hast Du mit Twenty Fourteen einfach das falsche Theme für Deine Vorstellungen gewählt? Twenty Thirteen könnte da möglicherweise passender sein?

      • Hallo Michaela,

        vielen lieben Dank für deine Antwort.
        Also das klingt schon danach das ich mit meinem eingesetzten Theme nicht ganz richtig lag 😉
        Ich werde das gleich mal ausprobieren.
        Danke
        Chris

  25. Hallo Michaela, vielen Dank für die tollen Tipps una Anregungen. Ich bin für meine Verhältnisse auch schon ziemlich weit gekommen und habe mich für die Custom.Css entschieden. Allerdings gibt es noch einen wichtigen Punkt auf der Seite den ich farblich nicht hinbekommen. Zwischen dem HP-Bild und dem seitlichen Menü befindet sich das obere Menü. Das konnte ich auch einfärben, aber nicht die linke Seite mit dem Untertitel der Webseite. Kannst du mir vielleicht einen Tipp geben bitte?

  26. Hallo Michaela, da du so toll Hilfeanbietest und ich doch ein Laie in solchen Sachen bin, kannst du mir evtl auch helfen. Ich habe das them Esplanade und habe mir ein child them gemacht. Die Hintergrundfarbe ist grau, die möchte ich gerne ändern. Beim Css des child themes steht nicht viel nur weiß ich nicht wo und was ich hineinschreiben muss.

  27. Hallo Michaela,
    vielen Dank für diese übersichtliche Aufstellung. Ich habe eine Frage dazu: Mit dem Code
    .widget a:hover {color: white;} /* Linkfarbe in der Sidebar beim Überfahren mit der Maus */
    ändert sich nicht nur die Linkfarbe in der Sidebar, sondern auch die im Footer (sofern man hier Verlinkungen nutzt). Wie kann ich NUR die Links in der Sidebar ansprechen?

    Viele Grüße,
    pradhana

    • Doch, jetzt tut WordPress das, was Du ihm gesagt hast: Beim Hover mit der Maus bleibt der Link rot 🙂 – Der Code ist korrekt eingetragen.

      Vielleicht wolltest Du ihn aber lieber in einer anderen Farbe haben beim überfahren mit der Maus?

  28. Aaaah, alles klar! 🙂 Ein Missverständnis: Mir ging es um den Link im Footer. Der sollte beim Hoover rot sein, die Links in der rechten Seitenleiste schwarz.
    Ich habe es jetzt so gemacht:

    .widget a:hover {
    color: #e1293d !important;
    }

    .content-sidebar .widget a:hover {
    color: #232323 !important;
    }

    Danke Dir sehr, Michaela. 🙂

  29. Pingback: Farben für das WordPress Theme “Twenty Fourteen” anpassen | Wegerl

  30. Hallo Michaela,
    wenn ich die Farbe der Kopfzeile ändere mit

    .site-header, .site:before {background-color: #ffffff;}

    , dann ändert sich auch gleichzeitig die Farbe in der linken Seitenleiste unter den dortigen Widgets. Das will ich natürlich nicht. Hast Du eine Idee, wie man das umgehen kann?

    Liebe Grüße,
    Pradhana

    • Hallo Pradhana,

      da ich leider nirgendwo mehr eine Testinstallation mit Twenty Fourteen habe kann ich das im Moment nicht testen. Auf Deiner eigenen Website ist die linke Seitenleiste ausgeblendet, deswegen kann ich das auch dort nicht nachvollziehen im Moment.

      Wenn Du magst, kontaktiere mich dazu gern mal direkt und lass mir einen Admin-Zugang zukommen. Ich müsste das dann aber abrechnen, weil doch mit ein wenig Recherche verbunden.

      Herzliche Grüße
      Michaela

Schreibe einen Kommentar

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


Ich möchte auch den WordPress-Rundbrief abonnieren