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 to disable the box around the FAQ?

By default there are shadows because our styles are loaded by default. If you don’t want to have the default style, you can

• unset / overwrite the existing rules,
• write something as CSS class name in the corresponding field and define your own CSS rules.

If you make use of the additional CSS class field in WordPress, the CSS class is also output and does not replace the existing one. However, this is not an error but the standard function of WordPress.

Here is a CSS example how you can disable the Box around the FAQ:

.sc_card {
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

Have fun trying it out 🙂