FAQ Page customization

Product Support

AI-generated summary

FAQ Page Customization Discussion Summary

Jay91 is seeking assistance in customizing their Discourse FAQ page to match a desired design. simon suggests two possible solutions:

  • Creating a WordPress site with the desired theme and setting the Discourse faq url Site Setting to point to that page.
  • Editing the text of the Discourse FAQ page and styling it with CSS using the static-faq class.

simon provides guidance on how to style the FAQ page using CSS and highlights the possibility of integrating Discourse search results with WordPress.

Jay91 later confirms that they successfully customized their FAQ page using WordPress and shared hosting, thanking simon for their assistance.

1

Hello Friends,

Is there any way i can make the FAQ page looks like this below:

image
image1000×750 111 KB

if note can you recommend any free service i can do the same through with CNAME integration

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: 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.

3

Hello,

Yes i made it, i paid a $15 for some shared hosting and i did it with wordpress.

Thanks a lot