CSS fürs FAQ-Widget

  • Hallo allerseits,

    mal wieder eine kleine Frage an die CSS-Cracks unter Euch.

    Ich habe auf einer Seite mehrere Produkte in jeweils eigenen Containern, deren Hintergründe abwechselnd #FFFFFF bzw. #F8F8F9 sind.

    In jedem Container finden sich Bild-, Text- und FAQ-Widget. Letzteres dient der Anzeige der neuerdings vorgeschriebenen Herstellerinformationen. Die Frage („Herstellerinformationen“) soll jeweils die Hintergrundfarbe des Containers haben, im ausgeklappten Zustand soll jedoch die Antwort (Name, Adresse des Herstellers) jeweils die Hintergrundfarbe des darüber bzw. des darunter liegenden Containers annehmen, im Falle des weißen Containerhintergrunds also #F8F8F9. Dies konnte ich mittels

    <style>

    .zpSO-faq-answer {

    background-color: #F8F8F9;

    padding-top: 30px;

    }

    </style>

    erreichen.

    Diese Anweisung gilt natürlich zunächst für alle FAQ-Widgets.

    Aber wie erreiche ich nun eine weiße Hintergrundfarbe für die Antwort auf grauem Containerhintergrund? Ich kann ja nicht nochmals eine Klasse .zpSO-faq-answer mit #FFFFFF anlegen. Im FAQ-Widget selber kann ich zwar die Hintergrundfarbe als Inline-CSS definieren, diese wirkt sich dann aber nur auf die Frage und nicht auf die Antwort aus.

    Mache ich hier nur einen Gedankenfehler oder ist die Sache doch nicht so trivial, wie sie auf den ersten Blick scheint?

    Wenn es keine Lösung gibt, ist es auch kein Drama, dann ziehe ich halt einen Rahmen drum.

    Zur Verdeutlichung auch ein Screenshot.

    Vielen Dank und viele Grüße

    Tom

  • Hallo Drcymbal

    Folgendes sollte funktionieren:

    Gehe zu Einstellungen -> CSS -> dort folgenden Code eintragen …

    Code
    <style>
    .zpwFAQ.farbe_1 .zpSO-faq-answer {
    background-color: red;
    padding-top: 30px;
    }
    .zpwFAQ.farbe_2 .zpSO-faq-answer {
    background-color: blue;
    padding-top: 30px;
    }
    </style>

    Dann zu FAQ-Widget Nr. 1 gehen.

    Bearbeiten -> Schieber links unten -> mehr -> in CSS-Klasse …

    Code
    farbe_1

    Dann zu FAQ-Widget Nr. 2 gehen.

    Bearbeiten -> Schieber links unten -> mehr -> in CSS-Klasse …

    Code
    farbe_2

    etc. …

    Doch vielleicht hat jemand hier im Forum noch eine elegantere Lösung. :)

    Ein angenehmes Wochenende und viele Grüsse

    elch

    Zeta Producer 17.x - Express

    Website, zu einer nicht primär gewinnorientierten und/oder ernst zu nehmenden Nebentätigkeit: Heubeere.ch ;)
    (PS: "ß" gibt es nicht - und kann ich nicht. Sorry!)

  • Hallo Elch,

    vielen Dank! Mein bisheriger Ansatz war ähnlich, allerdings mit Syntaxfehlern. Ohne die funktioniert es natürlich wunderbar.

    Viele Grüße

    Tom

Jetzt mitmachen!

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