Pockets can be used to enhance your site in two ways:
- Adding Vanilla Widgets (formerly known as Modules)
- Adding areas to your forum where you can inject custom HTML or Javascript into your theme
Pockets are available on all plan levels. To activate it, simply locate it in your addon list (/dashboard/settings/addons) and toggle it on. If you do not see this addon available, please contact your CSM to enable it. It will then be available in the “Settings” tab of your dashboard, listed under “Appearance” in the left side menu. Our Pockets UI has been updated to offer a cleaner user experience and updated HTML editor:
How to add a new Pocket:
- Click “add a new Pocket” button on the top right corner of the Pockets page
- In the "Content" tab, give your Pocket a Name
- Select "Featured Categories" as your Pocket Type
- You will have some additional options here to configure a title, subtitle or description for your widget, these are optional.
- Once you've configured your Pocket content, go to the "Placement & Conditions" tab
- Select the page on which you'd like to display your widget
- You'll have options to select the location on the page
- Save your settings
- Enable your new Pocket/Widget
Pocket Types have been introduced to allow you to use the power of Pockets to add and configure Vanilla Widgets to your community pages.
The Pockets you know and love can still be built and configured by choosing the "Custom HTML" type.
Pocket Locations: Home & Site Home pocket locations to allow you to place Pockets & Widgets on your homepages.
- Site Home: This will allow those using a subcommunity set up to add pockets & widgets to the site's main page
- Home: This will add a pocket or widget to your configured homepage. If you are using subcommunities, you can use this to add pockets or widgets to each subcommunity's homepage, or it can be paired with the "Subcommunities" setting to target specific subcommunity homepage. Your homepage can be configured on the Layout page of your Dashboard settings.
Setting the Pocket location:
- go to the placement & conditions tab
- select the location (content, panel, head, foot, etc)
- then complete the "Repeat" section to determine which area within the location you want the pocket to go. For example if you choose Panel, but want it to go in the Panel (2) area* you would need to select "Given Indexes" and enter 2 in the Indexes text box:
* To see the locations of each pocket, be sure to toggle on "Enable Pocket Locations" on the Pockets page.
Available Widgets
Some of the widgets you may already be familiar with were previously known as "Modules." These are great for customizing your layouts and pulling dynamic content into a page.
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
Event Lists:
Showcase your community events.
Featured Categories:
Promote key community categories.
Text & images used for this widget are pulled from your category settings. If you choose:
- Image display type: Your banner image will be used
- Background display type: Your banner image will be used
- Icon display type: Your category Photo will be used.
Leaderboard:
Feature your top ranked community contributors
We've also added a second leaderboard type to allow you to display this as a grid:
Help Centre Home:
Integrate a KB Help Centre into a page.
Online Users:
See which users are currently active
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.
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.
Subcommunities:
Point users to your subcommunity homepages.
Tag Cloud:
Add a cloud of your most frequently used tags.
Questions & Answers:
Add a list of Questions and/or Answers.
Custom HTML Style Pockets:
There are all kinds of customization options that can be added with HTML style pockets. We’ve included a few examples below, however please note that creating custom code should be done by a technical developer to ensure it doesn’t cause any issues on your site.
Highlighting Posts by Role / Rank:
If you want to highlight comments made by members of a specific Role or Rank in your community, it can be done using CSS.
Modifying CSS for Roles: If you are not using Ranks, you will want to enable the "Roles Titles" plugin. This adds a role specific CSS class for you to target. In the following example, we can see, using Firebug (but use whatever dev tool you like), that a new class "Role_Administrator" is added for users of the administrator account.
The next step is to add a custom CSS rule to a Custom HTML Pocket. So for example to change the background of comments we can add something like:
<style>
li.ItemComment.Role_Administrator {
background-color: #F5F8E8;
}
<style>
If you want to change colour of the discussions started by the Administrator role use:
<style>
.Item.ItemDiscussion.Role_Administrator {
background-color: #F5F8E8;
}
<style>
If you want all content (comments and discussions) of an admin to be highlighted use:
<style>
.Item.Role_Administrator {
background-color: #F5F8E8;
}
<style>
Finally, remember to change "Role_Administrator" in the above example to the appropriate role as needed. i.e Moderator is Role_Moderator. We have used the example of changing the background, but you can apply any CSS changes you want.
Advanced Settings
The "Advanced Settings" section of the theme editor brings a JSON variable editor and inline documentation for 100s of variables that are not currently included in the visual user interface. Undocumented variables can also be used here and more documentation will be added in the future.
The Advanced Variables Panel
Open the variables panel by clicking on the new "Advanced Settings' button at the bottom of the theme editor. Changes made in this new menu will sync back and forth between the visual editor and the advanced editor.
Inline Documentation
Inline autocomplete and documentation has been added for the following sets of variables:
bannertitleBaruserContent
By typing any of these you should see the full set of documented variables for those components appear.
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:
globalsearchResultbuttonhomeWidgetevents
Theming Engine Changes
This release contained some internal refactoring of the styling engine in order to improve stability and reduce chances of future regressions. In order to complete this refactoring, the way various CSS class names are generated has changed.
Some site owners and developers may have notice that various new foundation components, like the Title Bar, Banner, Events module, and more had some seemingly randomized characters at the end of their CSS classes. (For example .titleBarNav-navigation_f45h). These classes are not stable to apply CSS to, and the recommended way to adjust their appearance is through the variables for their associated components.
In this release the format of these CSS class names are changing slightly. That same component will now have a CSS class name in a format similar to .vanilla-579lyi-titleBarNav-navigation.
This brings a couple of recommendations:
- Any sites that are currently styling on these types of classes should test this release on their staging environment. You may need to update your CSS.
- If possible, try to use the variables for these components (which now have inline documentation in the theme editor).
- If you still must style on the CSS class, be aware that the hash after
vanilla may change in a future release. You should change your CSS selectors to reflect this. For example using [class*="titleBar-navigation"] instead of of .vanilla-579lyi-titleBarNav-navigation. - Be aware that features are actively being added to these types of components that can be easily and safely controlled through the documented theme variables. You may need to validate your CSS again in future releases if the structure of the component changes to accommodate new features or bug fixes.
For more information, including details on setting up other themes, take a look at Vanilla’s Theming Guide.
https://success.vanillaforums.com/kb/theme-guide
Introduction Welcome to Vanilla's theming system! We brought you this new system with the goal of allowing you and your teams to easily customize your site to give your…
