FAQ Page customization

support
2

I see that the image you have included is from a WordPress theme. The easiest way to use that theme for your FAQ page would be to create the page on a WordPress site and then set your Discourse faq url Site Setting to point to that page. When people click on the FAQ link on Discourse, they will be taken to your WordPress site.

Getting the search box on WordPress to return Discourse search results would take a bit of work, but it should be possible if that is required. There are some details about how to approach that here: How to add forum search results to Wordpress search

If you do not want to use an external site for your FAQ page, it is possible to edit the text of the Discourse FAQ page and style it with CSS. The FAQ page has the CSS class static-faq in its body tag. That could be used to set the width of the page. HTML added to the page can be styled by adding data attributes to div elements. For example, this HTML in the FAQ topic:

<div data-faq-header>
<h1>Your Custom FAQ</h1>
</div>

can be styled with this in a theme:

.static-faq .contents {
    max-width: none;
}

[data-faq-header] {
    background: #08c;
    color: #ffffff;
    padding: 3em;
    text-align: center;
}

The same idea could be applied to styling the lists in your screenshot.

8 Likes