Text unterschiedliches CSS zuweisen

  • Hallo, ich habe eine Wordpress-Seite erstellt mit dem Theme Diamond.
    Leider unterstüzt dieses Theme Woocommerce nicht, so versuche ich selbst Änderungen am Style zu machen, damit man Woocommerce doch nutzen kann.

    Nun habe ich auf der Produktseite den gleichen CSS-Code für die Produktanzahl, die Überschrift der Tabs und die Produktbeschreibung. (Siehe Screenshot)
    Die drei Texte haben also die gleiche Farbe. Bestimmt wird diese in der custom.css die in dem Ordner /wordpress/wp-content/uploads/ liegt.
    Dies ist der betreffende Auszug:


    Ich möchte gerne diese drei Texte in unterschiedlichen Farben darstellen lassen und zwar so, dass auch noch einem Update diese Änderung vorhanden bleibt.
    So wie ich das gelesen habe muss ich dafür neue CSS-Codes (Klassen) erstellen und den Texten zuordnen.
    Leider kenne ich mich damit nicht aus. Könnt Ihr mir vielleicht etwas dabei helfen?
    Hier ist der Link zu der Seite, um die es geht: https://bit.ly/2mdI46o

    Danke und LG
    Tim

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Also, wie Update-Sicher deine custom.css ist kann ich dir leider nicht sagen, da ich nicht weiß wie und worüber diese integriert wird, für mich hört sich jedoch so an, als bietet dir das Theme oder ein Plugin die möglichkeit eigene Styles zu integrieren, daher gehe ich davon aus, dass diese auch Update-Sicher sein sollten. Ansonsten könntest du ein sog. Child-Theme erstellen. Alternativ und einfacher falls es zur Verfügung steht: Design > Customizer > Zusätzliches CSS

    Zu deinen Anpassungswünschen:

    1. Beschreibungstext
      Dieser Bereich besitzt u.a. die Klasse "woocommerce-Tabs-panel--description", damit könntest du also in deiner custom.css wie folgt die Farbe anpassen:
      CSS
      .woocommerce-Tabs-panel--description
      {
         color: #ff0000;
      }


    2. Tabs
      Die Textfarbe von den Tab-Headlines erreichst du etwas "komplizierter", da bereits vorhandenen CSS überschrieben werden muss:

      2.1 Inaktive Tab

      CSS
      .woocommerce div.product .woocommerce-tabs ul.tabs li a
      {
         color: #00ff00;
      }

      2.2 Aktive Tab

      CSS
      .woocommerce div.product .woocommerce-tabs ul.tabs li.active a
      {
         color: #0000ff;
      }


    3. Input Feld für die Anzahl/Menge

      Code
      .woocommerce .quantity .qty
      {
         color: #0ff000;
      }


    Ich hoffe du kannst damit etwas anfangen :) Lass von dir hören, ob es geklappt hat, von meiner Farbwahl jetzt mal abgesehen ;)

  • Hallo egado, vielen Dank für deine tolle Hilfe! :)
    Die CSS-Codes von dir haben alle funktioniert und die habe ich über den Customizer - Zusätzliches CSS eingegeben.

    Könntest du mir noch kurz erklären, wie du diese Codes gefunden hast?
    Denn in der custom.css finde ich nichts zu z.B. .woocommerce-Tabs-panel--description.

    Ich würde es gerne verstehen, um bei weiteren Anpassungen nicht gleich wieder nach Hilfe bitten zu müssen. :D

    Nochmals vielen Dank für deine Hilfe! :)

  • Hi Robota,

    sehr gerne, freut mich, dass ich dir helfen konnte.

    Es gibt in fast jedem Browser eine Funktion die sich "Entwickler-Konsole", "Entwickler-Werkzeuge" oder so ähnlich nennt. In Firefox und Chrome wird sie über die Taste F12 aufgerufen. Sie ermöglicht neben vielen weiteren Funktionen auch das Untersuchen des Quelltextes. Damit wird relativ leicht klar wie die Seite aufgebaut ist und welche CSS Klassen wo verwendet wurden, welche CSS Styles bereits vorhanden sind und aus welcher CSS-Datei diese kommen.

    Wie man sein eigenes CSS dann zum überschreiben jedoch aufbauen muss hängt stark vom Aufbau des HTML ab, ob bereits vorhandene Styles aus einer anderen Datei kommen, welche Klassen/IDs wo verwendet werden und ist nicht immer direkt ersichtlich, wenn man nicht gerade etwas Erfahrung in dieser Hinsicht hat. Zusätzlich kann man dort bereits "ausprobieren" wie sich neue bzw. veränderte CSS Regeln auf die Seite auswirken. Diese "rumspielereien" spielen sich selbstverständlich nur lokal ab, d.h. nur du selbst kannst sie sehen, die Live-Seite ist davon also nicht betroffen ;)

    Ich habe dir zur Ansicht ein kurzes Video mit deiner Seite als Beispiel aufgenommen, es wird nicht in der Youtube Suche gelistet.

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.


    PS: Wirklich schöne Arbeiten im Portfolio :)

  • Hallo egado, dein letzter Beitrag ist bei mir leider unter gegangen, weil ich keine Email darüber bekommen habe.
    Trotzdem möchte ich mich nochmal für die tolle Erklärung und deine aufgewendete Zeit bedanken! :)

  • The right headaches will not start until you realize that formatting the link may also depend on inherited property values. For example, the link would take over a font assigned to the surrounding paragraph.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!