You can use Layout Editor to add custom pages to your Higher Logic Vanilla (Vanilla) community. Vanilla makes it easy for you to customize the layout of your pages and to then populate the pages with content via a variety of Widgets.
Widgets are a great device in communities because they can host either static or dynamic content. Serving up dynamic content to your users enhances the value of your Vanilla community because it feels fresh and up-to-date with its ever-changing content.
This article lists and describes the various widgets in Layout Editor. To learn how to add and configure Widgets, see Add and Configure Custom Layout Widgets.
Access the Widgets
Widgets are individually added to columns in a Section.
1. Access the Dashboard.
2. Navigate to the Appearance tab and expand the LAYOUTS section.
3. Expand the Home Page or Discussions Page subsection and click Add Custom Layout.
📝 NOTE: In the future, you'll be able to create custom layouts for the Categories page as well.
4. Click a Section to select it. (✔️ TIP: See Sections in Create a Custom Layout to learn how to add, remove, and rearrange Sections.)
📝 NOTE: Before choosing a Section, consider which and how many Widgets you plan to add, and then choose an appropriate Section to host the content.
5. Click the (+) in a Section column to open the Widget selector.
6. Click a Widget to select it and then click Add in the bottom right.
Layout Editor Widgets
The sections that follow describe the Widgets that are available in Layout Editor.
Announcements
A list of Announcements that have been posted in your Vanilla community. Each entry:
- provides a summary,
- displays user activity, and
- links to the Announcement where users can get more information.
Articles
A carousel-type list of community knowledge base articles. Each entry:
- provides a summary and
- links to the knowledge base where users can read the full article.
Banner
📝 NOTE: This widget is available with the Full Width section only.
Adds a page-specific banner that displays:
- the default title of the page,
- a description,
- a background colour or image, and
- a search bar.
In addition, you can:
- Easily hide banner titles and descriptions, ensuring a clean and uncluttered design.
- Choose to pull banner titles, descriptions, and images dynamically from site settings, subcommunity settings, or category settings. This adaptability is based on the type of layout and precisely where the layout is applied, allowing you to curate the perfect look and feel for each corner of your platform.
Call to Action
Allows Administrators to insert a title, description, and (optional) button anywhere in their Vanilla community prompting users to take a particular action.
- Buttons can have a Primary and Secondary color, which are pulled from your Style Guide.
- Place Call to Action Widgets across your community (e.g., sign up today!, join our meeting!, check out our KB, etc.) to get the word out to your users about anything important to your organization.
📝 NOTE: When configuring the Widget, if you're inserting an image via the Image option, the recommended dimensions are 1920x480px. Depending on the size of the layout, the image will scale appropriately. If you're concerned about file size, simply scale the image down from the above dimensions to retain the aspect ratio.
✔️ TIP: You don't have to include a button with this widget. Excluding a button provides additional ways to leverage the widget, such as using it as an eye-catching banner at the top of a page to advertise important information.
Categories
A list of your Vanilla community Categories. Each entry:
- provides a summary,
- displays user activity, and
- links to the Category.
The Categories Widget settings include flexibility and control over the metadata displayed in your Category lists. Use these metadata settings to tailor the information shown on a per-widget basis, allowing you to enable or disable the following metadata elements:
- Category Descriptions: Choose whether to display or hide category descriptions.
- Post Counts: Opt to show or conceal discussion and comment counts, or enable Post Count to showcase the total number of discussions + comments within the category.
- Last Post Information: Choose to include or exclude information about the latest post within each category including its name, author and date.
- Subcategories: Determine whether subcategories are shown in your widget.
- Follow Category Menu: Control the visibility of the follow category menu.
- Follower Counts: Decide whether to show the number of users following categories
Custom HTML
Adds custom code (HMTL, CSS, and JavaScript) to a page to target specific content, such as including advertisements and embedding iframes (for videos, podcasts, calendars, feeds, etc.). The code is:
- separated by type,
- validated to help with organizing code and troubleshooting.
📝 NOTE: This can add visible content to the page or it can host code that operates in the background.
As you see above, the Custom HTML widget has three tabs, each for hosting that specific type of code.
HTML
The HTML tab is where you write the markup for your widget. The editor offers:
- syntax highlighting,
- autocomplete,
- and inline documentation for built-in HTML tags.
CSS
The CSS tab is where you apply styling to your markup. Vanilla uses Shadow DOM to isolate the HTML and CSS of your widget from the rest of page. This prevents conflicts between the application's CSS/styling and your own CSS/styling.
JavaScript
Use the JS tab to apply scripting and interactivity to your widget. A few helpful utilities are provided:
The customHtmlRoot element
The HTML element at the root of your widget (that wraps your widget) is available in the variable customHtmlRoot. Use this to get easy access to the HTML you wrote.
📝 NOTE: Because the HTML is inside of a shadow root, you'll need to use that shadow root to access elements inside of the HTML.
// This doesn't work.var myButton = customHtmlRoot.querySelector("#my-button");// This does workvar myButton = customHtmlRoot.shadowRoot.querySelector("#my-button");
The vanilla object
The vanilla object provides a few useful utilities to help you interact with your community.
// Get the currrent user// The autocompletion should help you discover the various properties of the user.vanilla.getCurrentUser().name;vanilla.getCurrentUser().userID;// Check the current user's permissions.// Checkout the permission names at `/api/v2/users/$me/permissions`vanilla.currentUserHasPermission("moderation.manage");// Translate a string into the current locale.// This will use the translations currently loaded into the sitevanilla.translate("Discussions");// Get the current locale key.vanilla.getCurrentLocale(); // "en" for example.// Make API requests as the current user.vanilla.apiv2.get("/endpoint", config);vanilla.apiv2.post("/endpoint", body, config);vanilla.apiv2.patch("/endpoint", body, config);vanilla.apiv2.delete("/endpoint", config);// The config is as follows and is optional in all requests.interface RequestConfig { // Key value object of headers. headers?: Headers; // Key value object of query params. params?: Record<string, any>;}
Discussions
A list of Discussions that have been posted in your Vanilla community. Each entry:
- provides a excerpt (unless the Excerpt setting is toggled off),
- displays various user activity as icon-based or text-based metadata (toggle the Meta Options on/off), and
- links to the Discussion so that users can read more and participate.
Events
A list of future and/or past Events that have been posted in your Vanilla community. Each entry:
- provides a summary and
- links to the Event where users can see Event details and registration options.
Featured Collections
This Widget is detailed in:
Guest Sign In
Allows Administrators to insert a title, description, and two buttons: Sign In and Register.
- You cannot modify the links for these buttons: they from your site's registration.
- Buttons can have a Primary and Secondary color, which are pulled from your Style Guide, or be plain text.
📝 NOTE: When configuring the Widget, if you're inserting an image via the Image option, the recommended dimensions are 1920x480px. Depending on the size of the layout, the image will scale appropriately. If you're concerned about file size, simply scale the image down from the above dimensions to retain the aspect ratio.
Ideas
A list of Ideas that have been posted in your Vanilla community. Each entry:
- provides a summary,
- displays user activity, and
- links to the Idea so that users can learn more and see feedback and comments.
Leaderboard
A list of the top contributors (those who have earned the most activity-based points) in your Vanilla community during a selected time period. Each entry:
- provides the member's name,
- their earned-points total, and
- links to the member's profile.
📝 NOTE: The "grid" view (shown below) also includes the member's role within the community.
When configuring this widget, you have a range of options, from choosing how points are tallied to which Roles are included. A particularly helpful option is Filter By, which allows you to filter the widget to a particular Category or Subcommunity in your Vanilla Community. This is a great way to set up unique Leaderboards for each of your Categories and/or Subcommunities.
New Post Button
Adds a "new action" button that users can click to start a new Discussion, Question, Idea, Poll, or Event. You can:
- use the default + New Post button which contains all of the "new action" options in a dropdown list - AND/OR...
- add individual "new action" buttons.
📝 NOTE: As you add individual action buttons, they are removed from the + New Post button list.
Excluded Buttons - If there are actions that you do not want presented, add them in this field. They won't be available in the + New Post list or as individual buttons.
Custom Labels - Slide the toggle to the right to enable text fields in which you can customize the label of each button.
📝 NOTE: Customizing button labels is not currently supported on multi-lingual communities; this functionality is in development.
Questions
A list of Questions that have been posted in your Vanilla community. Each entry:
- provides a summary,
- displays user activity, and
- links to the Question so that users can review it, see other members' answers, and submit an answer.
Quick Links
A list of links to the more popular areas of your Vanilla community.
RSS Feed
A list of feeds that you can use to provide easy access to and promote community blog content and/or external news feeds. Each entry:
- provides a summary and
- links to the community blog or external feed where they can see the full content.
Site Totals
Display a range of site totals data, such as total:
- members
- posts
- online users
- discussions
- comments
- questions
You can choose which metrics to display, and in what order, and even filter the data by a specific subcommunity.
📝 NOTE: This Widget is only available in the Full Width layout.
Subcommunities
A list of your subcommunities. Each entry:
- provides a summary and
- links to the subcommunity for better visibility and easy access.
Tabs
Multiple lists of Discussion, Question, and/or Idea content in a tabbed format on one page; users can access the lists by clicking the tabs.
Choose how many (3, 5, or 10) items to display in each list and click the Edit button to manage the tabs and their content. You can:
- drag and drop to arrange the tabs,
- hide and show the tabs,
- choose what content to display, and
- relabel the tabs.
Tag Cloud
A list of the most used tags in your community. Each tag "pill":
- links to a filtered list of all discussions, questions, and ideas to which that tag has been applied.
User Spotlight
A list of noteworthy community users (e.g., new members, most-active members, idea submitters). Each entry:
- provides a bio/description,
- includes the member's name and role within the community, and
- links to the member's community profile.
Who's Online
A list of users who are currently online in the community. Each entry:
- provides a count of online users,
- can have avatars or linked usernames, and
- can include a count of guest users.
