Theming Guide

Overview of Custom Page Layouts

Layout Editor enables you to create custom layouts that can be applied to various pages across your community.

In this article, you'll learn:

which pages across your community you can create custom layouts for, and
the purpose and structure of each page layout available to you.

This knowledge should help you more easily manage the visual design and content of your Higher Logic Vanilla (Vanilla) community to meet your organization's needs.

Before we begin…

Vanilla provides two types of layouts, Legacy and Custom, and you need to instruct the system which type to use for each area of your community (Home Pages, Discussion pages, etc.).
Check out this article to learn more about these two types and how to configure the system to use custom layouts.

Access your layouts

Legacy and custom layouts are available in the Dashboard, via the Appearance tab > LAYOUTS section.

Layouts are grouped by community area, in the sections highlighted below:

Home Pages
Post List Pages
Category Pages
Post Pages
Knowledge Base Pages

Expand a section to access its layout settings (where you choose whether to use a Legacy or Custom layout for that community area), as well as create and manage custom layouts specific to that community area.

Home Page layouts

Your Vanilla community Home Page is the default landing page your users see upon logging in.

There are two Home Page layouts available that can be uniquely customized to suit these two areas of your Vanilla community:

Site Home Page layouts control the design and content of your community's main Home Page.
Subcommunity Home Page layouts control the design and content of your various subcommunity Home Pages, if your Vanilla community uses the Subcommunity feature. See Subcommunities to learn more.

Out-of-the-box Home Page example

📝 NOTE: The templates for the Site Home Page and Subcommunity Home Page layouts are identical. Creating custom layouts is how you can make design and content updates to differentiate these two Home Pages to meet your specific needs.

Post List page layouts

Your community's Post List page is what your users see when navigating to Discussions on your community's navigation bar.

Post List layouts control the design and content of this Discussions page, which is the landing page listing all of your community's posts (discussions, questions, and ideas). The most recent posts are displayed first, by default, but they can be sorted and filtered in various ways to narrow down the content shown.

Out-of-the-box Post List page example

Category page layouts

There are three types of Category layouts that can be uniquely customized to suit these three areas of your Vanilla community:

Category List Page
Posting Category Pages
Nested Category Pages

Category List layouts

Category List layouts control the design and content of your community's main Category List page, which is accessible via the Categories link on your community's navigation bar.

Think of the Category List page as a landing page providing access to all of the Categories your organization has created; it hosts your Discussion, Nested, Flat, and Heading Category Types in the organizational structure you have implemented.

Out-of-the-box Category List example

Posting Category layouts

Posting Category layouts control the design and content for Categories configured as the Discussion Category Type. This is the only Category Type that can directly host post content.

Discussion Category pages are accessible via your main Category List page (discussed above) based on the organizational structure you have created.

Out-of-the-box Discussion Category example

Nested Category layouts

Nested Category layouts control the design and content for Categories configured as the Nested Category Type. This Category Type functions as a "container" in which to add other Categories (usually Discussion Categories).

Nested Category pages are accessible via your main Category List page (discussed above) based on the organizational structure you have created.

Out-of-the-box Nested Category example

Post Page layouts

There are three types of Post Page layouts that can be uniquely customized to suit these three areas of your Vanilla community:

Discussion Pages
Idea Pages
Question Pages

Before we continue, let's be sure to understand the difference between your Post List page and a post page.

As discussed in the Post List page layouts section above, your community's Discussions page, accessed via the navigation bar, is the landing page listing users' posts.
On the other hand, when a user clicks to view a post from the Discussions page, they are then viewing the post page of the associated post type (discussion, idea, or question).

Use these layouts to customize these three post thread page types.

Set your community's Post layout setting

Vanilla offers two ways to display your post thread pages:

Custom Discussion Thread Layouts
Legacy Discussion Thread Layouts

You can configure this setting on the Post Pages > Post Layout Settings page, as shown below (be sure to click Save when making a change).

If set to Legacy Post Layouts, your community:

cannot use custom layouts for the Discussion, Idea, and Question pages.
Instead, it will use the default layout design for these pages, and they cannot be customized.

If set to Custom Post Layouts, your community:

can use custom layouts for the Discussion, Idea, and Question pages.
You can create custom layouts for these three pages in their associated sections. These three custom layouts are discussed in the sections below.

⚠️ IMPORTANT: Communities configured to use Custom Post Layouts will no longer support Polls. Existing polls will remain, but their options and results will no longer be visible, and voting will be disabled. There is no data loss, and if your organization relies on polls, you can continue using them via the Legacy Post Layouts setting.

Discussion layouts

Discussion layouts control the design and content of your community's discussion pages.

Out-of-the-box Discussion example

Idea layouts

Idea layouts control the design and content of your community's idea pages. This template is nearly identical to the Discussion layout above, except for the Idea Status widget (highlighted below) that users can leverage to vote on an idea.

Out-of-the-box Idea example

Question layouts

Question layouts control the design and content of your community's question pages.

Out-of-the-box Question example

As you can see, comments are presented the same as Discussions and Ideas, with the main difference being the three tabs at the top of the comment list, allowing you to display:

All replies
Accepted answers only
Rejected answers only

✔️ TIP: These tab names can be customized by configuring the widget.

Knowledge Base page layouts

There are five types of Knowledge Base layouts that can be uniquely customized to suit these five areas of your Vanilla community:

Knowledge Base Home Pages
Help Center Home Pages
Help Center Category Pages
Help Center Article Pages
Guide Article Pages

Knowledge Base Home Page layouts

Knowledge Base Home Page layouts control the design and content of your community's main Knowledge Base Home Page.

Similar to the Discussions and Categories landing pages, the Knowledge Base Home Page is a landing page providing access to all of your community's Help Center and/or Guide knowledge bases.

Out-of-the-box Knowledge Base Home Page example

Help Center Home Page layouts

Help Center Home Page layouts control the design and content of a Help Center's Home Page.

The Help Center Home Page lists a Help Center's available categories, along with a few of a category's associated articles (users can click a category's View All button to view all of its articles).

Out-of-the-box Help Center home Page example

Help Center Category layouts

Help Center Category layouts control the design and content of a Help Center's Category page.

When a user clicks a category's View All button, they are taken to its landing page where all of its articles are listed. Breadcrumbs are provided at the top of the page to help users navigate among the Help Center's category and article levels.

Out-of-the-box Help Center Category example

Help Center Article layouts

Help Center Article layouts control the design and content of a Help Center's article pages.

Out-of-the-box Help Center Article example

Guide Article layouts

Guide Article layouts control the design and content of a Guide knowledge base's article pages.

Out-of-the-box Guide Article example

Next steps

Now that you've learned about which pages across your Vanilla community you can customize using the out-of-the-box page layout templates, it's time to brainstorm and get creative! Consider the following:

Are there opportunities to improve the visual design of your pages to better match your organization's aesthetic?
Can you tweak the widgets for these pages—remove or add new ones—to provide a better user experience and content more relevant to your specific use-case?

If so, check out the articles below to learn how you can use Layout Editor to customize your page layouts by adding and updating sections (to design the layout) and widgets (to control the content).