Home → Contao →

Verwendung: h3-Überschrift in mod_faqpage.html5 ersetzen

• Edit

Robert Venzke

26 Apr, 2025 11:45 AM

Produkt: Tao Contao
Contao-Version: 5.3.30

Hallo,
ich hatte damals das Tao-Theme gekauft und nutze das FAQ-Modul, um Fragen und Antworten auf der selben Seite darzustellen. Die Fragen werden im Template mod_faqpage.html5 als h3 ausgegeben (<h3 id="<?= $faq->alias ?>"><?= $faq->question ?></h3>).
Ich möchte nun ein neues Template mit anderem Namen erstellen und diese h3-Überschrift durch eine normale Schrift, z. B. p-Tag ersetzen und die Schriftgröße und ggf. Fettdruck per css definieren. Die Icons Q und A, die in der ersten Zeile für die Fragen und Antworten links erscheinen, sollen so bleiben. Allein die h3-Tags für die Fragen sollen durch einen normalen Satz ohne h-Tag ersetzt werden.
Das dazugehörige css lautet:

.mod_faqpage section {
    margin: 2.25em 0;
    padding-left: 4.5em;
}
.mod_faqpage h3 {
    position: relative;
    margin: 1em 0;
    padding: 0.47619em 0 0.71429em;
    border-bottom: 1px solid #e0e5eb;
    font-size: 1.3125em;
}
.mod_faqpage h3:before,
.mod_faqpage h3 + *:before {
    content: "Q";
    position: absolute;
    top: 0;
    left: -2.57143em;
    width: 1em;
    padding: 0.35714em 0.39286em 0.42857em;
    border-radius: 100%;
    font-size: 1.33333em;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    background: #446a82;
}
.mod_faqpage h3 + * {
    position: relative;
}
.mod_faqpage h3 + *:before {
    content: "A";
    left: -3.75em;
    font-size: 1em;
}
.mod_faqpage p {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}
.mod_faqpage .info {
    font-size: 0.8125em;
    color: #3b3b3b;
}

Viele Grüße
Robert

1. Support Staff 1 Posted by RockSolid Theme... on 28 Apr, 2025 02:51 PM

   

   Vielen Dank für Ihre Frage.

   Sie können dem neuen P-Tag eine CSS-Klasse zuweisen, z. B.: <p class="faqpage-question" id="<?= $faq->alias ?>"><?= $faq->question ?></p> und diese CSS-Klasse dann in Ihrem CSS-Code entsprechend statt der h3 einsetzen:

   .mod_faqpage .faqpage-question {
       position: relative;
       margin: 1em 0;
       padding: 0.47619em 0 0.71429em;
       border-bottom: 1px solid #e0e5eb;
       font-size: 1.3125em;
   }
   .mod_faqpage .faqpage-question:before,
   .mod_faqpage .faqpage-question + *:before {
       content: "Q";
       position: absolute;
       top: 0;
       left: -2.57143em;
       width: 1em;
       padding: 0.35714em 0.39286em 0.42857em;
       border-radius: 100%;
       font-size: 1.33333em;
       line-height: 1;
       color: #ffffff;
       text-align: center;
       background: #446a82;
   }
   .mod_faqpage .faqpage-question + * {
       position: relative;
   }
   .mod_faqpage .faqpage-question + *:before {
       content: "A";
       left: -3.75em;
       font-size: 1em;
   }
   

   Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

   • Edit

2. 2 Posted by Robert Venzke on 29 Apr, 2025 08:50 AM

   

   Danke für die Antwort. Das funktioniert nun. Ich hatte auch schon eine neue Klasse eingefügt, so wie oben beschrieben, jedoch einen css-Selektor komplett vergessen (das A links wurde nicht angezeigt) und beim anderen hatte ich vermutlich den Punkt davor nicht gesetzt.

   • Edit