User Spotlight Widget - HL Vanilla Community
<main> <article class="userContent"> <p>The User Spotlight widget is a great way to showcase select users in your <strong>Higher Logic Vanilla</strong> (<strong>Vanilla</strong>) community. You can use it to:</p><ul><li>introduce your community team members</li><li>introduce partners / special guests for upcoming webinars</li><li>recognize thought leaders and super users</li><li>recognize active members who are contributing in a special way (answering questions, providing great ideas)</li></ul><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh3.googleusercontent.com/Zd_xgV5k9hEjzlradjo4RiwLFQpgYFN04Ed37_y_yOTdjAx3xCqEUiDqE6oL225sE2Gs8L-Ay8PuhgnO9RzZR1VU6HJ2RlO0s6LuRtZ02HDDLl6M2DJNc77Hok6RnDgTNcIfQzN_" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh3.googleusercontent.com/Zd_xgV5k9hEjzlradjo4RiwLFQpgYFN04Ed37_y_yOTdjAx3xCqEUiDqE6oL225sE2Gs8L-Ay8PuhgnO9RzZR1VU6HJ2RlO0s6LuRtZ02HDDLl6M2DJNc77Hok6RnDgTNcIfQzN_" alt="Zd_xgV5k9hEjzlradjo4RiwLFQpgYFN04Ed37_y_yOTdjAx3xCqEUiDqE6oL225sE2Gs8L-Ay8PuhgnO9RzZR1VU6HJ2RlO0s6LuRtZ02HDDLl6M2DJNc77Hok6RnDgTNcIfQzN_" height="121" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>The widget includes a Title and a Description, so you can customize how you use it and what information you share. The Username is clickable and display the <a href="https://success.vanillaforums.com/kb/articles/322-user-cards" rel="nofollow noreferrer ugc">User Card</a> (if enabled on your site).</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="set-up-the-user-spotlight-widget"><strong>Set up the User Spotlight widget</strong></h2><p>To use this widget in your site, you must add it via a Pocket.</p><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://lh5.googleusercontent.com/Q4a3FP3vxhc5ka-boqm4uTQS-Ednp-fFZLscZ2tMMMAW-aXQ3o6XCfWZSc_RII_lNjVsSGJQdOJhxqguc53t4VsBWc4q-tvr4QgYXzXjL9gvTJ5AhGfMP5L0CmEJmhhZmpSiku-X" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh5.googleusercontent.com/Q4a3FP3vxhc5ka-boqm4uTQS-Ednp-fFZLscZ2tMMMAW-aXQ3o6XCfWZSc_RII_lNjVsSGJQdOJhxqguc53t4VsBWc4q-tvr4QgYXzXjL9gvTJ5AhGfMP5L0CmEJmhhZmpSiku-X" alt="Q4a3FP3vxhc5ka-boqm4uTQS-Ednp-fFZLscZ2tMMMAW-aXQ3o6XCfWZSc_RII_lNjVsSGJQdOJhxqguc53t4VsBWc4q-tvr4QgYXzXjL9gvTJ5AhGfMP5L0CmEJmhhZmpSiku-X" height="241" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>3. Specify a Name (e.g., <em>User Spotlight</em>) for your pocket.</p><p>4. Select <strong>User Spotlight</strong> as the Type.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh4.googleusercontent.com/eCFScXLN4fGtsLgepap_NBh9ccXTK_zT6neysBteNf8ZKR2wMFiCrYkZX516Ym3ZUeuZzYV46Esgpy48D6KBI7bBeQhkCDU29dIBaj8jdUxc1XFgoWAow00pesg-RnDz5tx5c2qd" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh4.googleusercontent.com/eCFScXLN4fGtsLgepap_NBh9ccXTK_zT6neysBteNf8ZKR2wMFiCrYkZX516Ym3ZUeuZzYV46Esgpy48D6KBI7bBeQhkCDU29dIBaj8jdUxc1XFgoWAow00pesg-RnDz5tx5c2qd" alt="eCFScXLN4fGtsLgepap_NBh9ccXTK_zT6neysBteNf8ZKR2wMFiCrYkZX516Ym3ZUeuZzYV46Esgpy48D6KBI7bBeQhkCDU29dIBaj8jdUxc1XFgoWAow00pesg-RnDz5tx5c2qd" height="379" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>5. Click the dropdown and select the user who you want to spotlight.</p><p>6. Specify a Title and Description.</p><p>7. Click <strong>Save</strong>.</p><p>8. Click the <strong>Placement & Conditions</strong> tab to set the 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>.</p><h2 data-id="widget-display-settings">Widget display settings</h2><p>The widget and its contents inherit their properties from the <strong>Global Styles</strong> settings 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><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/1NCY11ORVT2D/theme-globalstyles-for-widgets.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/1NCY11ORVT2D/theme-globalstyles-for-widgets.png" alt="Theme_GlobalStyles for widgets.png" height="622" width="1255" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>📝 <strong>NOTE</strong>: Currently, it is <strong>not</strong> possible to format (i.e., change the properties) the widget elements individually.</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/EJSDTRQQ3OAF/theme-globalstyles-settings.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/EJSDTRQQ3OAF/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 widgets in your Vanilla community inherit most of their properties from the <strong>Global Styles</strong> settings. Some examples of this that are on several widgets are:</p><ul><li><em>Background</em> color is inherited from the <strong>Background</strong> setting.</li><li><em>Title</em>, <em>Description</em>, and <em>article link</em> colors are inherited from the <strong>Text</strong> setting.</li><li><em>View All link</em> and <em>username link </em>colors are inherited from the <strong>Links</strong> setting.</li><li><em>Subtitle</em> and <em>hover-over</em> colors are inherited from the <strong>Brand Color</strong> setting.</li></ul><p><br></p> </article> </main>