Using Pockets & Widgets to Enhance your Theme

/* * These styles apply ONLY to the header and footer assets. */ * { padding: 0; margin: 0; box-sizing: border-box; } .footer { background: #f5f5f6; color: #555a62; font-size: 14px; line-height: 1.5; padding: 18px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #0291db; } .footer a:hover { color: #0276b3; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -3px; } .footer-col { padding: 0 3px; } .footer-col-copyRight { justify-content: flex-start; } .footer-col-logo { justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { flex: 1; display: flex; } .logo { width: 120px; height: 28px; opacity: 0.6; } @media screen and (max-width: 768px) { .footer-row { display: block; } .footer-col { width: 100%; text-align: center; margin: 6px 0; } .footer-col:first-child { margin-top: 0; } .footer-col:last-child { margin-bottom: 0; } .footer-col-copyRight, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } } /*# sourceMappingURL=styles.css.map */

Using Pockets & Widgets to Enhance your Theme - Vanilla Success

Overview

Widgets (formerly known as “Modules”) allow you to easily add pre-built features to different parts of your site. These are great for customizing your layouts and pulling dynamic content into a page.

Available Widgets:

Featured Categories:

Promote key community categories as tiles to visually enhance your home page.

User: "Screen Shot 2020-10-15 at 5.04.27 PM.png"

Carousels:

Take your Featured Categories to the next level by integrating a carousel.

Leaderboard:

Feature your top ranked community contributors in one of two formats.

User: "User: "Screen Shot 2020-11-16 at 9.46.02 PM.png""

User: "User: "Screen Shot 2020-11-17 at 12.38.33 PM.png""

Help Centre Home:

Integrate a KB Help Centre into a page.

User: "Screen Shot 2020-11-18 at 8.20.42 AM.png"

User Spotlight:

Recognize or introduce community leaders. Configure these widgets by looking up a user and their avatar, title & username will automatically be pulled into the widget. You can also add your own custom text or quote.

Screen Shot 2021-03-03 at 6.43.26 PM.png

RSS Feed:

Add an RSS Feed to your community to promote blog content or important news feeds. Configure widgets with your feeds URL, and thumbnails, titles & descriptions are automatically pulled from the feed provided.

Screen Shot 2021-03-03 at 6.35.58 PM.png

Subcommunities:

Point users to your subcommunity homepages.

User: "Screen Shot 2020-11-16 at 9.57.35 PM.png"

Discussion Lists:

The List widgets allow you to showcase lists of community content based on different discussion types:

List - Discussions
List - Questions
List - Ideas
List - Announcements
List - Articles
List - Events

User: "Screen Shot 2020-11-16 at 9.45.16 PM.png"

Screen Shot 2021-01-25 at 6.22.39 PM.png

Tabs Widget

The Tabs Widget allows you to configure and add a tabbed discussion list to your community pages:

KJGl0qoYNUU2A6OZX-doNXasCUU8cJERA-a7uHJT9FyxqbFm9phjZn60wEtfBCFxwAS0Ve3nTIv6OQ0Yk98Kj0zkSOgKXaP1yLNzx5IAxJe8KMtH-JJaojPv3j0Kzh9Y81GoVbBL=s0

How to add and manage Widgets with Pockets

Enable the Pockets add-on
On the Pockets page in the Dashboard Settings, add a new Pocket
In the Content tab, select the widget you'd like to add using the "Type" setting
Depending on the type selected, configuration options will appear to help you customize your widget settings.
Next, Go the the "Placement and Conditions" tab to configure where, when and for whom the widget will load

Learn more about using pockets in this doc.

Theming your widgets:

Out of the box, the widgets look and feel will be inherited from the Global Styles and Widget sections in the Foundation Theme Editor.

The Global Styles section “Text”, “Background” and “Link” colours will affect different sections of the widgets, please see the individual widget pages for specifics.

The Widget section will allow you to change other aspects of the widget styling such as setting borders and backgrounds for any tile widgets, image options and overall container options.

Upcoming Documentation

We are hard at work on a new and improved version of our theme guide, which will include written guides as well as a theme API reference with all documented variables (the same ones with autocomplete and descriptions in the theme editor).

Additionally we are currently working on variable documentation for the following components:

global
searchResult
button
homeWidget
events