1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Text unterschiedliches CSS zuweisen

Dieses Thema im Forum "Design" wurde erstellt von Robota, 12. Juli 2018.

  1. Robota

    Robota Well-Known Member

    Registriert seit:
    18. Juli 2015
    Beiträge:
    378
    Zustimmungen:
    16
    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:
    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    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
     

    Anhänge:

  2. egado

    egado Well-Known Member

    Registriert seit:
    19. Oktober 2012
    Beiträge:
    264
    Zustimmungen:
    3
    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:

      Code:
      Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    2. Tabs
      Die Textfarbe von den Tab-Headlines erreichst du etwas "komplizierter", da bereits vorhandenen CSS überschrieben werden muss:

      2.1 Inaktive Tab
      Code:
      Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
      2.2 Aktive Tab
      Code:
      Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    3. Input Feld für die Anzahl/Menge
      Code:
      Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!


    Ich hoffe du kannst damit etwas anfangen :) Lass von dir hören, ob es geklappt hat, von meiner Farbwahl jetzt mal abgesehen ;)
     
    #2 egado, 13. Juli 2018
    Zuletzt bearbeitet: 13. Juli 2018
    Robota gefällt das.
  3. Robota

    Robota Well-Known Member

    Registriert seit:
    18. Juli 2015
    Beiträge:
    378
    Zustimmungen:
    16
    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! :)
     
  4. egado

    egado Well-Known Member

    Registriert seit:
    19. Oktober 2012
    Beiträge:
    264
    Zustimmungen:
    3
    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.




    PS: Wirklich schöne Arbeiten im Portfolio :)
     
    #4 egado, 14. Juli 2018
    Zuletzt bearbeitet: 14. Juli 2018
    Robota gefällt das.
  5. Robota

    Robota Well-Known Member

    Registriert seit:
    18. Juli 2015
    Beiträge:
    378
    Zustimmungen:
    16
    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! :)
     
  6. gigoballeto21

    gigoballeto21 New Member

    Registriert seit:
    30. August 2018
    Beiträge:
    1
    Zustimmungen:
    0
    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.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden