Change output with CSS

If you have checked the “Render HTML” box, the FAQ will be displayed in our standard design on the website, in addition to the JSON-LD code. You can also assign your own CSS class in the dialog and use your own CSS rules to style the box the way you want.

TIP: If you just want to adjust the size or color of the text/headline, use the “inspector” of your browser, copy the existing CSS rules into a new class in your styles.css file and adjust the values.

#Example for the <h2> headline

We have defined the following CSS rules:

.sc_card h2 {
    font-size: 1em;
    line-height: 1.2em;
    margin: 0 0 1em;
    font-weight: 700;

Now copy the rules into your CSS file (mostly style.css), change e.g. the value for ‘font-size’ and save the file:

.your-new-class h2 {
    font-size: 2em;
    line-height: 1.2em;
    margin: 0 0 1em;
    font-weight: 700;

Follow the link to see all CSS rules for the appearance of the answer box so you can copy and edit the information: check the CSS file


#✅ How can I change the appearance of the box?

Yes, by default there are shadows because our styles are loaded by default. You don’t want to have the default style? OK, then write something as CSS class name in the corresponding field in the lightboxmodal.
Please type the following into the field “CSS classes”: no-rules
Or find in the existing shortcode the value css_class=”” and modify it to css_class=”no-rules”.
So our standard CSS rules will not be loaded and the content will be formatted in the way your whole website is formatted.

Have fun trying it out 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *