Using Pockets & Widgets to Enhance your Theme - HL Vanilla Community
<main> <article class="userContent"> <p>Widgets (formerly known as “Modules”) allow you to easily add pre-built features to different parts of your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) site. Widgets are great for:</p><ul><li>customizing your layouts and</li><li>pulling dynamic content into a page.</li></ul><p>This article provides an overview of all Vanilla widgets so that you can quickly determine the purpose of each and then decide which is the best widget for what you want to do!</p><p><span class="safeEmoji nativeEmoji">✔️</span> <strong>TIP</strong>: Each widget has a dedicated article (linked below and in the navigation on the left) that provides in-depth details for installing, configuring, placing, and using that widget.</p><h2 data-id="list-of-vanilla-widgets">List of Vanilla widgets</h2><p><a href="https://success.vanillaforums.com/kb/articles/401-leaderboard-widget" rel="nofollow noreferrer ugc">Leaderboard Widget</a> - Showcase the <strong>users who have earned the most activity-based points</strong> in a given time period. Choose either the List view (shown below) or the Grid view.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/8TC6KETGR4BC/q6ei5j4bgs4rimabuspobnii2yokcwb6r8cwp2b1nizh-lidyvett1qdifwftqb244gy3akfnn39hh8-06zr9iu-wtnqunnre2-cnlxr0sotulobhroaikcjdifpdmsxn7d0fjq.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/8TC6KETGR4BC/q6ei5j4bgs4rimabuspobnii2yokcwb6r8cwp2b1nizh-lidyvett1qdifwftqb244gy3akfnn39hh8-06zr9iu-wtnqunnre2-cnlxr0sotulobhroaikcjdifpdmsxn7d0fjq.png" alt="q6eI5j4BGs4RiMabUSpobniI2YOKcwb6R8CWP2B1NIzh_lIDyveTT1QdifWFTQB244gY3akFnn39HH8-06Zr9iu-wtNQuNnre2_cNlxr0soTulobhROaikCJDIfpDMSxn7D0fjQ_.png" height="192" width="303" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p><a href="https://success.vanillaforums.com/kb/articles/404-help-centre-home-widget" rel="nofollow noreferrer ugc">Help Centre Home Widget</a> - Feature a <strong>Knowledge Base Help Center</strong> on a page of your community (such as your homepage).</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/M46LT1UYC3SL/helpcntrhome-widget.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/M46LT1UYC3SL/helpcntrhome-widget.png" alt="HelpCntrHome widget.png" height="340" width="756" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><a href="https://success.vanillaforums.com/kb/articles/408-who-s-online-widget" rel="nofollow noreferrer ugc">Online Users Widget</a> - Display a list of <strong>users who are currently online</strong> in the community.</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/C6JQZYJSP190/who-e2-80-99s-online-widget.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/C6JQZYJSP190/who-e2-80-99s-online-widget.png" alt="Who’s Online widget.png" height="108" width="303" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p><a href="https://success.vanillaforums.com/kb/articles/409-rss-feed-widget" rel="nofollow noreferrer ugc">RSS Feed Widget</a> - Promote <strong>community blog content</strong> and/or <strong>external news feeds</strong> in one widget.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/AIG13ILEY7GX/rss-feed-widget.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/AIG13ILEY7GX/rss-feed-widget.png" alt="RSS Feed widget.png" height="683" width="1462" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><a href="https://success.vanillaforums.com/kb/articles/410-user-spotlight-widget" rel="nofollow noreferrer ugc">User Spotlight Widget</a> - Spotlight <strong>noteworthy users</strong> (e.g., new members, most-active members, idea submitters) on your community pages.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/95IQ64BCHZC9/user-spotlight-widget.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/95IQ64BCHZC9/user-spotlight-widget.png" alt="User Spotlight widget.png" height="304" width="1597" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><a href="https://success.vanillaforums.com/kb/articles/412-discussion-list-widget" rel="nofollow noreferrer ugc">List Widget</a> - Showcase <strong>dedicated lists of community content</strong>, based on type (such as discussions, questions, ideas, and announcements). Add several to showcase the various types of content.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/9TU8PRCV45N3/list-widget.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/9TU8PRCV45N3/list-widget.png" alt="List widget.png" height="391" width="922" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><a href="https://success.vanillaforums.com/kb/articles/399-featured-categories" rel="nofollow noreferrer ugc">Featured Categories Widget</a> - Promote <strong>key community categories</strong> as tiles or a carousel to visually enhance your home page and drive traffic to the categories.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/F4UJ7DF6BLFE/featured-categories-widget.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/F4UJ7DF6BLFE/featured-categories-widget.png" alt="Featured Categories widget.png" height="226" width="1122" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><a href="https://success.vanillaforums.com/kb/articles/419-tabs-widget" rel="nofollow noreferrer ugc">Tabs Widget</a> - Add a <strong>tabbed discussion list</strong> to your community pages.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/HOWV6E4YRP1B/tabs-widget.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/HOWV6E4YRP1B/tabs-widget.png" alt="Tabs widget.png" height="634" width="1182" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="add-and-manage-widgets-via-pockets"><strong>Add and manage widgets via pockets</strong></h2><p>1. Enable the Pockets addon.</p><p>2. On the Pockets page in <strong>Dashboard > Settings</strong>, add a pocket.</p><p>3. In the <strong>Content</strong> tab, select the widget you'd like to add using the Type option.</p><p>4. Depending on the type selected, configuration options will appear to help you customize your widget settings.</p><p>5. Go the the <strong>Placement & Conditions</strong> tab to configure where, when, and for whom the widget will load.</p><ul><li>Learn how to <em>enable pockets</em>, <em>add a pocket</em>, and then <em>configure the pocket</em> for your Vanilla community:</li></ul><div class="js-embed embedResponsive" data-embedjson="{"body":"Overview Pockets add areas to your forum where you can inject custom HTML, CSS or Javascript into your theme. It is a powerful tool that makes Vanilla flexible for ad placement, Google Analytics, and other small customizations. Freeform HTML Pockets are designed to be used by advanced users and developers who can write and…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/19-pockets","embedType":"link","name":"Pockets - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/19-pockets" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/19-pockets </a> </div><h2 data-id="widget-display-settings">Widget display settings</h2><p>Vanilla widgets and their contents inherit their properties from the <strong>Global Styles</strong> and <strong>Widget</strong> sections in <a href="https://success.vanillaforums.com/kb/articles/279-style-guide-editor-overview" rel="nofollow noreferrer ugc">Theme Editor</a>. These settings determine the appearance of the widgets on your community pages.</p><p><strong>Global Styles</strong> - The <em>Text</em>, <em>Background</em>, and <em>Link</em> colors that are set affect different sections of the different widgets. The individual widget pages have the relevant specifics.</p><p><strong>Widget</strong> - Use this section to change other aspects of the widget styling, such as setting borders and backgrounds for tile widgets, image options, and overall container options.</p><h2 data-id="upcoming-documentation">Upcoming documentation</h2><p>We are hard at work on a new version of our theme guide. It will include written guides, as well as a <em>theme API reference</em> that documents all variables (the same ones with autocomplete and descriptions in the theme editor).</p><p>Additionally, we are working on variable documentation for the following components.</p><ul><li>global</li><li>searchResult</li><li>button</li><li>homeWidget</li><li>events</li></ul> </article> </main>