Featured Categories Widget - Vanilla Success
<main> <article class="userContent"> <p>The Featured Categories widget is a great way to promote popular and important categories in your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community.</p><p>When you put categories "front and centre," users are more likely to click into them. </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/V8J4MKWU229Q/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/V8J4MKWU229Q/image.png" alt="image.png" height="387" width="781" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: The <em>Location</em> and <em>Page</em> settings of the host Pocket let you target specific pages — and locations on those pages — to place a Featured Categories widget.</p><p>The text and images used for this widget are pulled from your category settings.</p><p>✔️ <strong>TIP</strong>: Be sure to test the widget on your staging site before committing it to your production site.</p><h2 data-id="theme-dependencies">Theme dependencies</h2><p>The Featured Categories widget is optimized for Foundation themes, and this article largely assumes you are using a Foundation theme.</p><p>📝 <strong>NOTE</strong>: This widget is compatible with Legacy (i.e., non-Foundation) themes; review the notes below.</p><h3 data-id="legacy-themes-notes">Legacy themes notes</h3><p>If you are using this widget with a Legacy theme, note that:</p><ul><li>Some additional tweaks to your custom theme may be required.</li><li>Test this widget in your staging site before using it in your production site.</li><li>A default image will not appear for this widget when used with a Legacy theme so be sure that all featured categories have assets uploaded.</li><li>Legacy themes might not be compatible with all pocket locations (such as AfterBanner).</li></ul><h2 data-id="setting-a-category-as-%22featured%22">Setting a Category as "Featured"</h2><p>In order for a Category to be "featured," it has to be edited and the "featured" option enabled. Featured Categories display a <strong>star</strong> icon on the Categories list page.</p><h3 data-id="featured-categories-display-order">Featured Categories display order</h3><p>It's important to note that Featured Categories <strong>display from left to right in the widget in the order in which their "featured" options were enabled</strong>.</p><p>✔️ <strong>TIP</strong>: If you want to adjust the order of your Featured Categories, disable their "featured" options, and then re-enable them in the desired order (this is described below).</p><p>To enable the "featured" option:</p><p>1. Navigate to <strong>Dashboard > Settings > Categories</strong>.</p><p>2. Click the down arrow (shown below) for the Category and then select <strong>Edit</strong>.</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/3DOFOGPINV5P/screen-shot-2021-10-05-at-3-34-31-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/3DOFOGPINV5P/screen-shot-2021-10-05-at-3-34-31-pm.png" alt="User: "Screen Shot 2021-10-05 at 3.34.31 PM.png"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Scroll down to the <strong>Featured category</strong> option and toggle it to the right (ON) to enable it.</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/EIZ7SC8LGH9G/screen-shot-2021-10-05-at-3-35-44-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/EIZ7SC8LGH9G/screen-shot-2021-10-05-at-3-35-44-pm.png" alt="User: "Screen Shot 2021-10-05 at 3.35.44 PM.png"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>4. Click <strong>Save</strong>.</p><p>5. On the Manage Categories page, verify that the Category has a <strong>star</strong> icon.</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/567LZBHG2W7S/screen-shot-2021-10-05-at-3-36-39-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/567LZBHG2W7S/screen-shot-2021-10-05-at-3-36-39-pm.png" alt="User: "Screen Shot 2021-10-05 at 3.36.39 PM.png"" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The Category can now be added to a community page via a pocket as described in the next section.</p><h2 data-id="setting-up-the-featured-categories-widget">Setting up the Featured Categories widget</h2><p>To use this widget in your site, you must add it via a Pocket.</p><p>Many of the settings for Pockets are similar across and available in multiple widgets. To learn more about Pockets and the settings, see:</p><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><p>To add and configure a Pocket:</p><p>1. Navigate to <strong>Dashboard > Settings > Pockets</strong>.</p><p>2. Click the <strong>Add Pocket</strong> button.</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/H3D9GXIJ9RDX/add-pocket-button.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/H3D9GXIJ9RDX/add-pocket-button.png" alt="Add Pocket button.png" height="462" width="1222" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Specify a Name (e.g., <em>Featured Categories</em>) for your pocket.</p><p>4. Select <strong>Featured Categories</strong> as the Type.</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/JULFJ9A7TON0/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/JULFJ9A7TON0/image.png" alt="image.png" height="770" width="1015" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>5. Complete the fields in the lower part of the page.</p><p>✔️ <strong>TIP</strong>: We recommend that you complete even the optional fields (e.g., Description) with information that is helpful to other Admins.</p><p>6. Click <strong>Save</strong>.</p><h3 data-id="notes">Notes</h3><p>The appearance of the widget and its elements (Title, Description, etc.) is controlled by the settings in the <em>Widgets</em> and <em>Global Styles</em> sections of the <a href="https://success.vanillaforums.com/kb/articles/279-style-guide-editor-overview" rel="nofollow noreferrer ugc">Theme Editor</a>.</p><p>The <strong>Max Columns</strong> value that is specified on the Add Pocket page will override the default value in the <em>Widgets</em> section of the Theme Editor (shown below).</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/88FV42QH3WFK/theme-widgets-maxcolmns.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/88FV42QH3WFK/theme-widgets-maxcolmns.png" alt="Theme_Widgets_MaxColmns.png" height="257" width="360" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h3 data-id="placing-the-featured-categories-widget">Placing the Featured Categories widget</h3><p>As you configure the widget on your Staging site, you should try it in various locations to see where works best with your image choices and theme.</p><p>✔️ <strong>TIP</strong>: The section, <em>Sample Configurations</em>, below, offers a great "sneak peek" at how some of the page-and-location combinations actually appear on a community page.</p><p>Also, it might help to consider:</p><ul><li>what the main focus (concept) of your community is, and</li><li>that most users will not scroll very far down the page.</li></ul><p>Therefore, it's important that the content at the top of the page is relevant to the purpose of the community in order to drive the engagement that will make your community thrive.</p><ul><li>Click the <strong>Placement & Conditions</strong> tab to set page and location options as described in <a href="https://success.vanillaforums.com/kb/articles/19-pockets#working-with-pockets" rel="nofollow noreferrer ugc">working with pockets</a>.</li></ul><h2 data-id="widget-settings-in-the-theme">Widget settings in the Theme</h2><p>You can manage many of the <em>default, global settings</em> for all your widgets in the Theme Editor. This is an easy way to apply your "brand" to widgets and to ensure that your branding is consistent across all widgets — no matter the type or location — without having to individually manage each one!</p><p>How your widgets display is dependent on two configuration sections in the Theme Editor: <strong>Global Style</strong> and <strong>Widgets</strong>.</p><h3 data-id="global-styles-section">Global Styles section</h3><p>This section in the Theme Editor controls many of the properties of the widget's content. For example, each widget's:</p><ul><li><em>Background</em> colour is inherited from the <strong>Background</strong> setting.</li><li><em>Title</em>, <em>Description</em>, and <em>article links</em> colours are inherited from the <strong>Text</strong> setting.</li><li><em>View All link </em>colour is inherited from the <strong>Links</strong> setting.</li><li><em>Subtitle</em> and <em>hover-over</em> colours are inherited from the <strong>Brand Color</strong> setting.</li></ul><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/4CUWAP071T2F/theme-globalstyles-settings.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4CUWAP071T2F/theme-globalstyles-settings.png" alt="Theme_GlobalStyles_settings.png" height="390" width="360" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p>The image below shows how the widget displays with the out-of-the-box settings.</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/10TL36CF0CTS/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/10TL36CF0CTS/image.png" alt="image.png" height="420" width="881" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="widgets-section">Widgets section</h3><p>This section in the Theme Editor controls the appearance of the widget container and widget content tiles. For example:</p><ul><li><strong>Max Columns</strong> is the number of columns of widget tiles to display. Additional tiles trigger "line wrapping" and add rows, as necessary. If the Carousel option is enabled, line wrapping doesn't occur.</li><li>The two <strong>Border</strong> settings let you select whether to apply a border to the widget container and the individual widget tiles.</li><li>The two <strong>Background</strong> settings act separately as the "fill colour" of the widget container and the individual widget tiles.</li></ul><h4 data-id="notes-1">Notes</h4><p>It's important to test the <strong>Max Columns</strong> setting so that you can get a preview of how the widget tiles will display with the different widget-placement options, and then set an appropriate number.</p><p>Pockets set to the Content - Before location have a fixed maximum of four columns. Use the AfterBanner location if you want to use more columns.</p><h2 data-id="display-types">Display types</h2><p>The Featured Categories widget can appear in a variety of ways on your Vanilla community pages. Their appearance is controlled by the <strong>Image Type</strong> setting in the <em>Widgets</em> section of the Theme Editor:</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/AOBSB6ELNJA9/theme-widgets-imageoptions.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/AOBSB6ELNJA9/theme-widgets-imageoptions.png" alt="Theme_Widgets_ImageOptions.png" height="481" width="357" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h3 data-id="none-(text-only-display)"><strong>None (text-only display)</strong></h3><p>Choose this option to have the widget tiles display only the Category title, description, and number of discussions, as in:</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/Q2DD7DKW7P2Z/image-11.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/Q2DD7DKW7P2Z/image-11.png" alt="image 11.png" height="348" width="900" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="icon"><strong>Icon</strong></h3><p>Choose this option to have the widget tiles display the Category photo and title, description, and number of discussions, as in:</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/X3ENNHZFVY0S/displaytypes-icon.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/X3ENNHZFVY0S/displaytypes-icon.png" alt="DisplayTypes-Icon.png" height="438" width="900" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="image">Image</h3><p>Choose this option to have the widget tiles display your banner image, Category title, description, and number of discussions, as in:</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/VKAYO21QDRVD/displaytypes-image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/VKAYO21QDRVD/displaytypes-image.png" alt="DisplayTypes-Image.png" height="458" width="900" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="background"><strong>Background</strong></h3><p>Choose this option to have the widget tiles display your banner image as a shaded background, the Category title and a <strong>View More</strong> button (links to the Category) as overlays, and the number of discussions display below, as in:</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/QFI05OB2WZVX/displaytypes-background.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/QFI05OB2WZVX/displaytypes-background.png" alt="DisplayTypes-Background.png" height="461" width="900" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: The <strong>Background CTA</strong> option is similar, but replaces the number of discussions with the description.</p><h2 data-id="featured-categories-in-a-carousel">Featured Categories in a Carousel</h2><p>If the Carousel option is enabled and the number of Featured Categories exceeds the <strong>Max Column</strong> value, left and right arrows automatically display so that users can manually navigate through the Featured 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/SZFUGSIAC2HE/carousel.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/SZFUGSIAC2HE/carousel.gif" alt="carousel .gif" height="466" width="908" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>To learn more about the Carousel option, see:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"The Carousel feature is a great way to add an element of action to your Higher Logic Vanilla (Vanilla) community. Instead of your Featured Categories displaying as a static row in the widget, you can configure them to horizontally scroll! 📝 NOTE: The automatic horizontal scroll will become user-controlled (via left and…","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/536-featured-categories-widget-carousel","embedType":"link","name":"Featured Categories Widget Carousel - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/536-featured-categories-widget-carousel" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/536-featured-categories-widget-carousel </a> </div><h2 data-id="configuration-examples">Configuration examples</h2><p>The examples in this section are based on choosing the Image option as the <strong>Image Type</strong> (refer to Display Types, above) in the <em>Widgets</em> section of the Theme Editor.</p><h4 data-id="configuration%3A-1-column-with-carousel-set-to-the-panel-before-location">Configuration: 1 Column with Carousel, set to the Panel Before location</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/WO1663LIPESO/1-column-carousel-panel-feat-cat.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/WO1663LIPESO/1-column-carousel-panel-feat-cat.gif" alt="1 column carousel panel feat cat.gif" height="530" width="822" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="configuration%3A-2-columns-with-carousel-set-to-content-before-location">Configuration: 2 Columns with Carousel, set to Content - Before location</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/IH0X3Z7P57Z3/2-ckumns-carousel.gif" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/IH0X3Z7P57Z3/2-ckumns-carousel.gif" alt="2 ckumns carousel.gif" height="522" width="1058" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="configuration%3A-3-columns-no-carousel-3-featured-categories-set-to-afterbanner-location">Configuration: 3 Columns, no Carousel, 3 Featured Categories, set to AfterBanner location</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/7YCPC617V1BZ/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/7YCPC617V1BZ/image.png" alt="image.png" height="784" width="1241" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="configuration%3A-3-columns-no-carousel-3-featured-categories-set-to-content-before-location">Configuration: 3 Columns, no Carousel, 3 Featured Categories, set to Content Before location</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/OO3E9DCBAI66/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/OO3E9DCBAI66/image.png" alt="image.png" height="759" width="1237" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="configuration%3A-4-columns-no-carousel-set-to-after-banner-location-with-only-subtitle-set-(no-title-or-description)">Configuration: 4 Columns, no Carousel, set to After Banner location with only <em>subtitle</em> set (no <em>title</em> or <em>description</em>)</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/RTB3BFX02BV4/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/RTB3BFX02BV4/image.png" alt="image.png" height="783" width="1230" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="configuration%3A-4-columns-with-carousel-set-to-content-before-location">Configuration: 4 Columns, with Carousel, set to Content - Before location</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/BC3P6GDJG6Q7/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/BC3P6GDJG6Q7/image.png" alt="image.png" height="791" width="1241" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="configuration%3A-5-columns-set-to-after-banner-location">Configuration: 5 Columns, set to After Banner location</h4><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/16OCDTBQKLVZ/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/16OCDTBQKLVZ/image.png" alt="image.png" height="748" width="1249" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>You can further customize the appearance of the widget by adding borders to the widget container and/or the individual widget tiles. To learn how, refer to <em>Theming Featured Categories</em>, below.</p><h2 data-id="images-icons-and-backgrounds-in-widgets">Images, icons, and backgrounds in widgets</h2><p>Images, icons, and backgrounds are a great way to "dress up" your widgets. You can add these graphical elements in two ways:</p><ul><li><em>Globally</em>, in the Theme Editor, as <strong>defaults for all widgets</strong> and</li><li><em>Individually</em>, when you edit a Category, as <strong>unique to that Category</strong>.</li></ul><p>📝 <strong>NOTE</strong>: Images, icons, and backgrounds that are added at the Category level override any that are set for widgets in the Theme Editor.</p><p>Let's look at how to add images, icons, and backgrounds in the Theme Editor and at the Category level.</p><h3 data-id="theme-editor">Theme Editor</h3><p>To set global, default images:</p><p>1. Navigate to the Theme Editor.</p><p>2. Under GLOBAL & HOMEPAGE, select <strong>Widgets</strong>.</p><p>3. In the <strong>Image Options</strong> section (shown below):</p><ul><li>select an Image Type and</li><li>choose a Default image.</li></ul><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/TR5EPFAM3NMA/theme-widgets-imageoptions.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/TR5EPFAM3NMA/theme-widgets-imageoptions.png" alt="Theme_Widgets_ImageOptions.png" height="481" width="357" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <h3 data-id="category">Category</h3><p>To set an individual Category's images:</p><p>1. Navigate to <strong>Dashboard > Settings > Categories</strong>.</p><p>2. Edit the category you want to customize and manage either or both of the following image options.</p><ul><li>In the Photo section, click <strong>Browse</strong> and select an image to be used as the Icon.</li><li>In the Banner Image section, click <strong>Browse</strong> and select an image to be used as the Image and Background.</li></ul><p>📝 <strong>NOTE</strong>: Wait until the image has uploaded before continuing.</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/VW42TEAI1ASI/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/VW42TEAI1ASI/image.png" alt="image.png" height="640" width="690" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Scroll down and click <strong>Save</strong>.</p><p>📝 <strong>NOTE</strong>: These changes are applicable <em>only to the Category that you edited</em>.</p><p>✔️ <strong>TIP</strong>: Repeat these steps to edit a different Category and use entirely different images!</p><h2 data-id="theming-featured-categories">Theming Featured Categories</h2><p>You can theme featured categories using the Theme Editor. Simply go to the dashboard, then themes, and edit your current theme.</p><p>Once you are in the theme editor, you can click the widget area on the left, or choose “Widgets” from the drop down on the right:</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/WPPQWS9CUPRG/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/WPPQWS9CUPRG/image.png" alt="image.png" height="779" width="1393" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="container-settings">Container Settings</h3><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/S0OEM1NJ1BXO/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/S0OEM1NJ1BXO/image.png" alt="image.png" height="636" width="1171" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>The container holds all individual category tiles. The exact area included in the container will depend on the placement and other settings of the Featured Categories widget. If you are unsure, set the Container Background to an odd colour and save (on staging!) to easily see the container.</p><h4 data-id="max-columns">Max Columns</h4><p>Set the default number of columns for the widget to display.</p><p><strong>Note that if you have something different set in the pockets, the # of columns set in the pocket settings will take precedence.</strong></p><p>It may still be useful to set the # of columns to match here when working on a particular Featured Categories widget just to have as accurate a representation as possible in the live theme editor example and reduce saving and reloading the site.</p><h4 data-id="border">Border</h4><p>In the Theme Editor, you can add a (solid or shadow) border to the widget container to distinguish it from the other content on the page. The border is applied to the container, so it "groups" all of the Featured Categories widgets.</p><p><strong>Container > Border: Solid</strong></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/KCDM8V20FLD6/containerborder-solid.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/KCDM8V20FLD6/containerborder-solid.png" alt="ContainerBorder-solid.png" height="553" width="898" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>Container > Border: Shadow</strong></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/4YIP8C1N8OAT/containerborder-shadow.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4YIP8C1N8OAT/containerborder-shadow.png" alt="ContainerBorder-shadow.png" height="805" width="1321" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>Container > Border: None (only the widget tiles have borders)</strong></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/1VLSBSIYXB57/containerborder-none.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/1VLSBSIYXB57/containerborder-none.png" alt="ContainerBorder-none.png" height="750" width="1282" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="background-1">Background</h4><p>You can set the background color for the Featured Categories container (as well as the discussions list, unless explicitly set separately).</p><h4 data-id="need-more">Need more?</h4><h5 data-id="homewidget-container-variables">HomeWidget container variables</h5><p>You can edit the the container more granularly by using theme variables:</p><p><a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#homewidgetcontainer" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#homewidgetcontainer</a></p><p>Theme Variables may require developer resources, but allows more control of the grid spacing.</p><h3 data-id="tiles">Tiles</h3><p>You can also edit settings for individual tiles in the theme editor:</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/4N7BBFLQRZAZ/screen-shot-2021-10-05-at-3-48-50-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4N7BBFLQRZAZ/screen-shot-2021-10-05-at-3-48-50-pm.png" alt="Screen Shot 2021-10-05 at 3.48.50 PM.png" height="730" width="1368" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="border-1">Border</h4><p>In the Theme Editor, you can add a (solid or shadow) border to the widget tiles to give them a little bit of definition within the group. If you choose a solid or shadow border, you can also set how "rounded" the corners are; refer to <em>Border Radius</em>, below.</p><p>📝 <strong>NOTE</strong>: The border is an "all or none" option; when applied, it appears on <em>all the tiles</em> in the Featured Categories widget.</p><p><strong>Tiles > Border: Solid</strong></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/PLWAQBWD4XTW/tilesborder-solid.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/PLWAQBWD4XTW/tilesborder-solid.png" alt="TilesBorder-solid.png" height="456" width="898" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>Tiles > Border: Shadow</strong></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/GSG1C74P5VQ9/tilesborder-shadow.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/GSG1C74P5VQ9/tilesborder-shadow.png" alt="TilesBorder-shadow.png" height="454" width="900" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><strong>Tiles > Border: None</strong></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/P31FH3WRFF64/tilesborder-none.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/P31FH3WRFF64/tilesborder-none.png" alt="TilesBorder-none.png" height="450" width="900" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="border-radius">Border Radius</h4><p>If you choose a solid or shadow border for the tiles, you can also set the how "rounded" the corners of the tile borders are. Set <strong>Border Radius</strong> to <strong>0</strong> to have the corners be square; set it to <strong>100</strong> to have the corners be completely rounded.</p><ul><li>Specify any number from 0 to 100 to set the preferred "roundness" of the borders on the tile corners.</li></ul><p>✔️ <strong>TIP</strong>: In the Theme Editor, try a variety of settings and watch the home widget examples in the left panel update in real time to display the "roundness."</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/2XI5CC3058U3/screen-shot-2021-10-05-at-3-50-35-pm.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/2XI5CC3058U3/screen-shot-2021-10-05-at-3-50-35-pm.png" alt="Screen Shot 2021-10-05 at 3.50.35 PM.png" height="468" width="1360" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h4 data-id="background-2">Background</h4><p>The background of the individual tiles. This will cover the background of most tile types, and the bottom of the “Image” and ‘Background” display types.</p><h4 data-id="text-color">Text Color</h4><p>Affects the Title and Description text of all widgets except the “Background” display type which displays white text by default.</p><h4 data-id="content-alignment">Content Alignment</h4><p>Can be left or centre aligned.</p><h3 data-id="image-options">Image options</h3><h3 data-id="image-type">Image Type</h3><p>Set the default image display type for additional options.</p><p>Note that if you have something different set in the pockets,<strong> the image option settings set in the pocket settings will take precedence.</strong></p><p>It may still be useful to set image display type to match here when working on a particular Featured Categories widget just to have as accurate a representation as possible in the live theme editor example on the left and reduce saving and reloading the site when trying things out.</p><p><strong>Changing the Image Type will also change the possible options below.</strong></p><h3 data-id="none-(text-only)">None (text-only)</h3><p>Image Type None (Display Type Text)</p><ul><li><strong>Description</strong> - Toggle the visibility of the category description</li><li><strong>Counts</strong> - Toggle the visibility of the discussion and subcategory counts</li></ul><h3 data-id="icon-1">Icon</h3><p>Set a default image for categories that do not have an image (photo) set in the category settings.</p><ul><li><strong>Description</strong> - Toggle the visibility of the category description</li><li><strong>Counts</strong> - Toggle the visibility of the discussion and subcategory counts</li></ul><h3 data-id="image-1">Image</h3><p>Set a default image for categories that do not have an image (banner) set in the category settings.</p><ul><li><strong>Height & Width</strong> - Set the height and width of the background image</li><li><strong>Description</strong> - Toggle the visibility of the category description</li><li><strong>Counts</strong> - Toggle the visibility of the discussion and subcategory counts</li></ul><h3 data-id="background-3">Background</h3><p>Set a default image for categories that do not have an image (banner) set in the category settings.</p><ul><li><strong>Height & Width</strong> - Set the height and width of the background image</li><li><strong>Vertical Alignment</strong> - Set the vertical alignment of the background image (top, centre, or bottom)</li><li><strong>Description</strong> - Toggle the visibility of the category description</li><li><strong>Counts</strong> - Toggle the visibility of the discussion and subcategory counts</li></ul><h4 data-id="other-background-settings">Other background settings</h4><p>You can set the overlay color and more by using theme variables. Learn about theme variables in:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"This document contains a reference to the various documented theming variables for use in the Theme Editor \"Advanced Settings\" variable pane.","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/370-theme-variable-reference#homewidgetitem","embedType":"link","name":"Theme Variable Reference - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#homewidgetitem" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#homewidgetitem </a> </div><h3 data-id="background-cta">Background CTA</h3><p>Set a default image for categories that do not have an image (banner) set in the category settings.</p><ul><li><strong>Vertical Alignment</strong> - Set the vertical alignment of the background image (top, centre, or bottom)</li><li><strong>Description</strong> - Toggle the visibility of the category description</li><li><strong>Counts</strong> - Toggle the visibility of the discussion and subcategory counts</li></ul><h4 data-id="other-background-settings-1">Other background settings</h4><p>You can edit the individual Home Widget Items more granularly by using theme variables. Learn about theme variables in:</p><div class="js-embed embedResponsive" data-embedjson="{"body":"This document contains a reference to the various documented theming variables for use in the Theme Editor \"Advanced Settings\" variable pane.","photoUrl":"https:\/\/us.v-cdn.net\/6030677\/uploads\/VWGAXAF5OFCO\/microsoftteams-image.png","url":"https:\/\/success.vanillaforums.com\/kb\/articles\/370-theme-variable-reference#homewidgetitem","embedType":"link","name":"Theme Variable Reference - Vanilla Success"}"> <a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#homewidgetitem" rel="nofollow noreferrer ugc"> https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#homewidgetitem </a> </div><h2 data-id="troubleshooting">Troubleshooting</h2><ul><li>Is the pocket enabled?</li><li>Double check placement and condition settings are as desired.</li><li>Are there categories set to featured?</li><li>Does the user viewing the theme have permission to view all the featured categories?</li></ul><p><br></p> </article> </main>