Quick Links Menu - Vanilla Success
<main> <article class="userContent"> <h2 data-id="overview">Overview</h2><p>The Quick Links menu helps your community members navigate to essential parts of your community:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh5.googleusercontent.com/l0ESEjJ4vZ_xHCMJ05jNZuNPWBm_NPx7mj6I2AfeRIfaI2eU-oO9UBm6Er8NT3YMpyk6oaviQPWWzcCzfRntraL7D2ZqJM8L8jgTLAwReIYA23vX2gEECbAVcGuh-Y-znklSZ6pF" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh5.googleusercontent.com/l0ESEjJ4vZ_xHCMJ05jNZuNPWBm_NPx7mj6I2AfeRIfaI2eU-oO9UBm6Er8NT3YMpyk6oaviQPWWzcCzfRntraL7D2ZqJM8L8jgTLAwReIYA23vX2gEECbAVcGuh-Y-znklSZ6pF" alt="l0ESEjJ4vZ_xHCMJ05jNZuNPWBm_NPx7mj6I2AfeRIfaI2eU-oO9UBm6Er8NT3YMpyk6oaviQPWWzcCzfRntraL7D2ZqJM8L8jgTLAwReIYA23vX2gEECbAVcGuh-Y-znklSZ6pF" height="291" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh6.googleusercontent.com/2byB1TEULHENxd13VdC12DDk1Fn6YnFOeJlMPTnbgOsDdnZm8c-mrYl_sLgcBgcivSNxS5ty4jqV3htDi72mKsCCDAOTcEEDGsUzMZVEDxlZ0EtX--0Un0bB6H55qXGHEliaP9NV" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh6.googleusercontent.com/2byB1TEULHENxd13VdC12DDk1Fn6YnFOeJlMPTnbgOsDdnZm8c-mrYl_sLgcBgcivSNxS5ty4jqV3htDi72mKsCCDAOTcEEDGsUzMZVEDxlZ0EtX--0Un0bB6H55qXGHEliaP9NV" alt="2byB1TEULHENxd13VdC12DDk1Fn6YnFOeJlMPTnbgOsDdnZm8c-mrYl_sLgcBgcivSNxS5ty4jqV3htDi72mKsCCDAOTcEEDGsUzMZVEDxlZ0EtX--0Un0bB6H55qXGHEliaP9NV" height="355" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p> </p><p> By default, this menu appears in your side panel on most community pages, and here we include some helpful links to things like your Categories list, your Recent Discussions page, your drafts, bookmarks, Group pages, Unanswered queue and more.</p><p>Quick Link settings and style options are available in our new Theme Editor. This editor works best with Foundation-based themes which use all editable components. The Quick Links component (edited within the Theme Editor) can also be used with any legacy Vanilla based or custom themes. Read more about this here: </p><p><a href="https://success.vanillaforums.com/kb/articles/403-integrate-foundation-pages-into-your-legacy-theme" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/403-integrate-foundation-pages-into-your-legacy-theme</a></p><p> </p><p>Quick Links are a default part of our Foundation theme system, and can also be used with legacy themes (like Bootstrap3, Deflector & Keystone ) as part of <a href="https://success.vanillaforums.com/kb/articles/400-vanilla-labs" rel="nofollow noreferrer ugc">Vanilla Labs</a>. Legacy themes may require some tweaking and Vanilla Labs features such as Quick Links should be tested out on <a href="https://success.vanillaforums.com/kb/articles/65-staging-site" rel="nofollow noreferrer ugc">staging</a> first. </p><h2 data-id="customizing-quick-links">Customizing Quick Links</h2><h3 data-id="getting-started">Getting Started</h3><p>If you are using a Foundation based theme, navigate to your dashboard, then settings, and edit your Foundation based theme. </p><p><br></p><p>If you are using a legacy theme, you will need to create a theme (copy) for foundation based components like Quick Links. Refer to this article on how to get started: <a href="https://success.vanillaforums.com/kb/articles/403-integrate-foundation-pages-into-your-legacy-theme" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/403-integrate-foundation-pages-into-your-legacy-theme</a> </p><p><br></p><p>Once in the theme editor, select the “Quick Links” option from the left side panel of the Styles tab: </p><p><br></p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh3.googleusercontent.com/yJ-nAcpw5sYre1k_DnUyE9Jani7lYsMyiZBc2Up2dbzh2zD-ht4muEea6dFqb920vsyGcZE9dKzMkqSrPZZaOwcpnGRviQ61vwe3HaU4-o-ttRNzy6Ex3RyXMHwUiZVxrd7p-Uso" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh3.googleusercontent.com/yJ-nAcpw5sYre1k_DnUyE9Jani7lYsMyiZBc2Up2dbzh2zD-ht4muEea6dFqb920vsyGcZE9dKzMkqSrPZZaOwcpnGRviQ61vwe3HaU4-o-ttRNzy6Ex3RyXMHwUiZVxrd7p-Uso" alt="yJ-nAcpw5sYre1k_DnUyE9Jani7lYsMyiZBc2Up2dbzh2zD-ht4muEea6dFqb920vsyGcZE9dKzMkqSrPZZaOwcpnGRviQ61vwe3HaU4-o-ttRNzy6Ex3RyXMHwUiZVxrd7p-Uso" height="208" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Next, click <strong>Edit</strong> next to Quick Links List to proceed: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh5.googleusercontent.com/5qOVrzQNVG6B5ODG2EqUnlys1U_E_UMyBoKpfIKAY5lOytnqvFDNxObr_eg_SRb2nQ77MFRROeOTgj3qSc2e62_B05d5toX3W7_tWWtV4tThF5TqRBHVt0v5WiS5nYSydUVFT3jX" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh5.googleusercontent.com/5qOVrzQNVG6B5ODG2EqUnlys1U_E_UMyBoKpfIKAY5lOytnqvFDNxObr_eg_SRb2nQ77MFRROeOTgj3qSc2e62_B05d5toX3W7_tWWtV4tThF5TqRBHVt0v5WiS5nYSydUVFT3jX" alt="5qOVrzQNVG6B5ODG2EqUnlys1U_E_UMyBoKpfIKAY5lOytnqvFDNxObr_eg_SRb2nQ77MFRROeOTgj3qSc2e62_B05d5toX3W7_tWWtV4tThF5TqRBHVt0v5WiS5nYSydUVFT3jX" height="341" width="366" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Within this menu, you can hover over different links in order to edit or hide them: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh6.googleusercontent.com/nyfz6kbe54Qoo0gy96njK4uuo53myKGcmf29oXRjbVVuUiWVr0GIB-6YTkSzPuLfPDUYR3Rzf7-uhSCF3QZ58cFbH3CgaFTDs2oA1ZIPe82xez094e_zljJdT7n90K1UTGsb4Mui" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh6.googleusercontent.com/nyfz6kbe54Qoo0gy96njK4uuo53myKGcmf29oXRjbVVuUiWVr0GIB-6YTkSzPuLfPDUYR3Rzf7-uhSCF3QZ58cFbH3CgaFTDs2oA1ZIPe82xez094e_zljJdT7n90K1UTGsb4Mui" alt="nyfz6kbe54Qoo0gy96njK4uuo53myKGcmf29oXRjbVVuUiWVr0GIB-6YTkSzPuLfPDUYR3Rzf7-uhSCF3QZ58cFbH3CgaFTDs2oA1ZIPe82xez094e_zljJdT7n90K1UTGsb4Mui" height="420" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h3 data-id="hiding-links">Hiding Links</h3><p>Hidden links will appear greyed out within the Quick Links options UX and will not appear within the Quick Links list on your site. </p><p><br></p><p>To ‘unhide’ a link, hover over to reveal the <strong>Show</strong> options: </p><p><br></p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh3.googleusercontent.com/bqJ-aIe4ZmYSZG0zOdSyZ0_FQvHeOcyEhABdy3X62_-lc_jNlPCvQN4ZvjwsergJWM-BG5XvCuQzDL_xTYs6ffTwaeDk0qMmpN2V3PGy2NmeyMEZ2ot_7QxUKQfDFtbw4ivVmWa6" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh3.googleusercontent.com/bqJ-aIe4ZmYSZG0zOdSyZ0_FQvHeOcyEhABdy3X62_-lc_jNlPCvQN4ZvjwsergJWM-BG5XvCuQzDL_xTYs6ffTwaeDk0qMmpN2V3PGy2NmeyMEZ2ot_7QxUKQfDFtbw4ivVmWa6" alt="bqJ-aIe4ZmYSZG0zOdSyZ0_FQvHeOcyEhABdy3X62_-lc_jNlPCvQN4ZvjwsergJWM-BG5XvCuQzDL_xTYs6ffTwaeDk0qMmpN2V3PGy2NmeyMEZ2ot_7QxUKQfDFtbw4ivVmWa6" height="225" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h3 data-id="editing-links">Editing Links</h3><p>The labels of the links can all be edited by hovering over a particular link and selecting edit. </p><p>The URLs of default components cannot be edited. If you need to edit one, you will have to hide the out of the box URL link and add a new link to replace it. </p><p>Once you have made your changes, you can hit ‘Enter’ or click apply. </p><p>Once you are satisfied with your changes, hit ‘Apply’ to return to the Foundation Editor. </p><p><br></p><h3 data-id="adding-links">Adding Links</h3><p>To add a new link, click the <strong>New Link</strong> button: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh4.googleusercontent.com/xZUW4h0I4jRImR7QSMByjH-7lwuOmvYQ2iNdLzMv5obHYbsYFWi88WQXka19PuJrZdQRvBclyOr9hklxiw1bq6wj7XYnnR9fRmWFQ-R13SdfQ8gFOJz3rH5OH3RoDy071uKiKJ8U" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh4.googleusercontent.com/xZUW4h0I4jRImR7QSMByjH-7lwuOmvYQ2iNdLzMv5obHYbsYFWi88WQXka19PuJrZdQRvBclyOr9hklxiw1bq6wj7XYnnR9fRmWFQ-R13SdfQ8gFOJz3rH5OH3RoDy071uKiKJ8U" alt="xZUW4h0I4jRImR7QSMByjH-7lwuOmvYQ2iNdLzMv5obHYbsYFWi88WQXka19PuJrZdQRvBclyOr9hklxiw1bq6wj7XYnnR9fRmWFQ-R13SdfQ8gFOJz3rH5OH3RoDy071uKiKJ8U" height="268" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Relative paths can be used for internal pages, for example /discussions, /profile, or a full URL may be used to point to external pages. Make sure you use <strong>https: </strong>protocol for these links. e.g. <a href="https://vanillaforums.com." rel="nofollow noreferrer ugc">https://vanillaforums.com.</a></p><p>Once you are satisfied with your changes, hit ‘Apply’ to return to the foundation editor. </p><p> </p><h3 data-id="reorganizing-links">Reorganizing Links</h3><p>To reorganize the order of your links, simply drag and drop them into whichever order you wish. </p><p>Nesting quick links is not a feature at this time.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh3.googleusercontent.com/1DhxVHAlrErB7Ve3shZna7nCivNj6sQO2Hin8KOCElHjuVD2Xl9ShX9HlLr0Ya0mfOfr_LH-d0QmbT0XJYfXdMBYfNTXop8-8tTQGZcNdm9g03gCl_ppkpzQlvfauTHjz4pfyhVl" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh3.googleusercontent.com/1DhxVHAlrErB7Ve3shZna7nCivNj6sQO2Hin8KOCElHjuVD2Xl9ShX9HlLr0Ya0mfOfr_LH-d0QmbT0XJYfXdMBYfNTXop8-8tTQGZcNdm9g03gCl_ppkpzQlvfauTHjz4pfyhVl" alt="1DhxVHAlrErB7Ve3shZna7nCivNj6sQO2Hin8KOCElHjuVD2Xl9ShX9HlLr0Ya0mfOfr_LH-d0QmbT0XJYfXdMBYfNTXop8-8tTQGZcNdm9g03gCl_ppkpzQlvfauTHjz4pfyhVl" height="475" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><h2 data-id="styling-quick-links">Styling Quick Links</h2><p>The theme editor also allows you to apply basic styling options to the Quick Links menu.</p><p><strong>List Divider Style </strong></p><p>Enable borders or horizontal separators for links</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh3.googleusercontent.com/etIV_xl2xV4sNIjvJ5ItI3y1uE6dwaDTzj9qNH7eou9wTD95caqxbqOW0CPrKmBLvSFbCbgvbr-c3YXDW4o__IFlZeQYfRM0FP4__ml_7Xrg8Oxvo7jRyLUOlN0gy_uFoor_IZYu" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh3.googleusercontent.com/etIV_xl2xV4sNIjvJ5ItI3y1uE6dwaDTzj9qNH7eou9wTD95caqxbqOW0CPrKmBLvSFbCbgvbr-c3YXDW4o__IFlZeQYfRM0FP4__ml_7Xrg8Oxvo7jRyLUOlN0gy_uFoor_IZYu" alt="etIV_xl2xV4sNIjvJ5ItI3y1uE6dwaDTzj9qNH7eou9wTD95caqxbqOW0CPrKmBLvSFbCbgvbr-c3YXDW4o__IFlZeQYfRM0FP4__ml_7Xrg8Oxvo7jRyLUOlN0gy_uFoor_IZYu" height="219" width="377" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p> </p><p>No Separation:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh4.googleusercontent.com/W3yLbMrtcyM7bQZOeoUaTZrGI01omkToj4VUwTZWOmFTu43-2FXLjRD7XLZ3O3j3UM-B5gMBYY2idi9anLTNFornzazoJKLqZjLEZmmZRURASxUqYQRpAgVHmOSX8dnoGSOpxcVc" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh4.googleusercontent.com/W3yLbMrtcyM7bQZOeoUaTZrGI01omkToj4VUwTZWOmFTu43-2FXLjRD7XLZ3O3j3UM-B5gMBYY2idi9anLTNFornzazoJKLqZjLEZmmZRURASxUqYQRpAgVHmOSX8dnoGSOpxcVc" alt="W3yLbMrtcyM7bQZOeoUaTZrGI01omkToj4VUwTZWOmFTu43-2FXLjRD7XLZ3O3j3UM-B5gMBYY2idi9anLTNFornzazoJKLqZjLEZmmZRURASxUqYQRpAgVHmOSX8dnoGSOpxcVc" height="235" width="194" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Bordered:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh6.googleusercontent.com/KFQ-NY4nVg5O8I2nS8A5MVZbvWZioacBoOxZrmTDMIy6RiDCiNZ7hEmfX_prohwtvP5JPsZcJhQFsgvETjSaGTvodruqo_TabY46zFBo8SgkXH9KX0V_tUzTcsmpAld_fZELIQQ9" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh6.googleusercontent.com/KFQ-NY4nVg5O8I2nS8A5MVZbvWZioacBoOxZrmTDMIy6RiDCiNZ7hEmfX_prohwtvP5JPsZcJhQFsgvETjSaGTvodruqo_TabY46zFBo8SgkXH9KX0V_tUzTcsmpAld_fZELIQQ9" alt="KFQ-NY4nVg5O8I2nS8A5MVZbvWZioacBoOxZrmTDMIy6RiDCiNZ7hEmfX_prohwtvP5JPsZcJhQFsgvETjSaGTvodruqo_TabY46zFBo8SgkXH9KX0V_tUzTcsmpAld_fZELIQQ9" height="300" width="194" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Separator:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh5.googleusercontent.com/_P5sin8Ujs3KiIYzJt7DkaHp21wus_eaT_82NUDHEYzrwuIeDBNEJTH5qaO-f8soG7AV9Q9psxtRGvJgOsQnuaoaF-qoXHYj9Ns4Z4xaUUbfxsJtL9FaOrpBhAhsnTMmv90Orv9q" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh5.googleusercontent.com/_P5sin8Ujs3KiIYzJt7DkaHp21wus_eaT_82NUDHEYzrwuIeDBNEJTH5qaO-f8soG7AV9Q9psxtRGvJgOsQnuaoaF-qoXHYj9Ns4Z4xaUUbfxsJtL9FaOrpBhAhsnTMmv90Orv9q" alt="_P5sin8Ujs3KiIYzJt7DkaHp21wus_eaT_82NUDHEYzrwuIeDBNEJTH5qaO-f8soG7AV9Q9psxtRGvJgOsQnuaoaF-qoXHYj9Ns4Z4xaUUbfxsJtL9FaOrpBhAhsnTMmv90Orv9q" height="333" width="194" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p> </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh4.googleusercontent.com/9HcSzipu9Ea4J_aUNlh-Yyl6UFN-P0xzwnNThNyAWHHrFzTxz9a8UgjP5RU8RuhYy4OczGgFgBvjIYD0kbErf3QeW9fMuWir5nGRQj9Hat2nyuBuVv3X9_wwTeec4YTLKkA4Y0bA" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh4.googleusercontent.com/9HcSzipu9Ea4J_aUNlh-Yyl6UFN-P0xzwnNThNyAWHHrFzTxz9a8UgjP5RU8RuhYy4OczGgFgBvjIYD0kbErf3QeW9fMuWir5nGRQj9Hat2nyuBuVv3X9_wwTeec4YTLKkA4Y0bA" alt="9HcSzipu9Ea4J_aUNlh-Yyl6UFN-P0xzwnNThNyAWHHrFzTxz9a8UgjP5RU8RuhYy4OczGgFgBvjIYD0kbErf3QeW9fMuWir5nGRQj9Hat2nyuBuVv3X9_wwTeec4YTLKkA4Y0bA" height="407" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p> </p><p><strong>Container Border</strong></p><p>Use the <strong>Border Style </strong>setting to enable a border or shadow for your menu: </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh5.googleusercontent.com/wbuXGLjZQ0bAJe5OsaL0coJ4jPrEoD1Y0hUAqocCzaj2zAFAe5ds2ZUDQti_a7MQxiEB6UNiW-2OLauYvT0P9eh4KCyFIVTvJxGQcmKKIaa9pn2M-NiIJuHRZBf-RuTY6shFMJ0Q" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh5.googleusercontent.com/wbuXGLjZQ0bAJe5OsaL0coJ4jPrEoD1Y0hUAqocCzaj2zAFAe5ds2ZUDQti_a7MQxiEB6UNiW-2OLauYvT0P9eh4KCyFIVTvJxGQcmKKIaa9pn2M-NiIJuHRZBf-RuTY6shFMJ0Q" alt="wbuXGLjZQ0bAJe5OsaL0coJ4jPrEoD1Y0hUAqocCzaj2zAFAe5ds2ZUDQti_a7MQxiEB6UNiW-2OLauYvT0P9eh4KCyFIVTvJxGQcmKKIaa9pn2M-NiIJuHRZBf-RuTY6shFMJ0Q" height="214" width="376" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p> </p><p>Borderless:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh4.googleusercontent.com/B2SJel7pblcraVkRhnHpf2mAz7N50HPvfNLdofMws_sz9azXKMppkFa4lZDLsF9EFr4y4OPsSNVw7u51LtkKb3NMGNRH-f7H6oLxdxG5nqLe-MUalHP12z0_vTYEpjrUTG_j8hQx" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh4.googleusercontent.com/B2SJel7pblcraVkRhnHpf2mAz7N50HPvfNLdofMws_sz9azXKMppkFa4lZDLsF9EFr4y4OPsSNVw7u51LtkKb3NMGNRH-f7H6oLxdxG5nqLe-MUalHP12z0_vTYEpjrUTG_j8hQx" alt="B2SJel7pblcraVkRhnHpf2mAz7N50HPvfNLdofMws_sz9azXKMppkFa4lZDLsF9EFr4y4OPsSNVw7u51LtkKb3NMGNRH-f7H6oLxdxG5nqLe-MUalHP12z0_vTYEpjrUTG_j8hQx" height="232" width="194" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Bordered:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh3.googleusercontent.com/BoO4rI-Ph1PRp1mw06DokykV1_VBEQDrWSSW-NrRUVdgMCJj5P-sho2ChWYkoOcjGzbMBqWd_3rOiXD96XyL71dYDRUhIrq1Anx90VN58EB0CAkAc6sW0_nOJ4xFvmrLIHKoVnh1" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh3.googleusercontent.com/BoO4rI-Ph1PRp1mw06DokykV1_VBEQDrWSSW-NrRUVdgMCJj5P-sho2ChWYkoOcjGzbMBqWd_3rOiXD96XyL71dYDRUhIrq1Anx90VN58EB0CAkAc6sW0_nOJ4xFvmrLIHKoVnh1" alt="BoO4rI-Ph1PRp1mw06DokykV1_VBEQDrWSSW-NrRUVdgMCJj5P-sho2ChWYkoOcjGzbMBqWd_3rOiXD96XyL71dYDRUhIrq1Anx90VN58EB0CAkAc6sW0_nOJ4xFvmrLIHKoVnh1" height="260" width="194" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Shadow:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh4.googleusercontent.com/lALwLqePIA6D7_GQOK4b7S-QFbyh35B1gv4Rskw2Nqo41UK1XhA6rPKwFnR3ynZQgAqFcIuz427hat2tmk1b5GwtdUWlkdTGLRMoRSueKTI29r0awbcVqY2hkWX8j5DKSWl_0ZEJ" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh4.googleusercontent.com/lALwLqePIA6D7_GQOK4b7S-QFbyh35B1gv4Rskw2Nqo41UK1XhA6rPKwFnR3ynZQgAqFcIuz427hat2tmk1b5GwtdUWlkdTGLRMoRSueKTI29r0awbcVqY2hkWX8j5DKSWl_0ZEJ" alt="lALwLqePIA6D7_GQOK4b7S-QFbyh35B1gv4Rskw2Nqo41UK1XhA6rPKwFnR3ynZQgAqFcIuz427hat2tmk1b5GwtdUWlkdTGLRMoRSueKTI29r0awbcVqY2hkWX8j5DKSWl_0ZEJ" height="260" width="194" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p> </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh6.googleusercontent.com/cVWXbbUnSFPpsrg56DxcgrO1xdMrlBwgL2ufMTKMQ4EeDpc_9N0g8wmpjSjotY6dSnINvMqF2jJFpjQZ-hJ9yumDVCF66AXzEgULK8ClopWMNgYFsAYej96On99r8O2O0T42C4H4" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh6.googleusercontent.com/cVWXbbUnSFPpsrg56DxcgrO1xdMrlBwgL2ufMTKMQ4EeDpc_9N0g8wmpjSjotY6dSnINvMqF2jJFpjQZ-hJ9yumDVCF66AXzEgULK8ClopWMNgYFsAYej96On99r8O2O0T42C4H4" alt="cVWXbbUnSFPpsrg56DxcgrO1xdMrlBwgL2ufMTKMQ4EeDpc_9N0g8wmpjSjotY6dSnINvMqF2jJFpjQZ-hJ9yumDVCF66AXzEgULK8ClopWMNgYFsAYej96On99r8O2O0T42C4H4" height="344" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p> </p><p><strong>Text</strong></p><p>Link Color updates the link titles. The “Quick Links” title and the counters will be inherited from the <strong>Global Styles (need link)</strong> ‘text’ colour (the bright pink/red in the example below). </p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://lh5.googleusercontent.com/wAWWgR-d0wV169Mc14CUa_5Kta0T2TJJgBba-xpOxYl0DoMI5N6at8_0XcaIYnu10yjXKeGLcd_hMKLJ9FF_GyKp2fmKKy1_c_RWSlXhNIcJmDuGLHukPTOb-6oTqOeoNkSFjg2O" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://lh5.googleusercontent.com/wAWWgR-d0wV169Mc14CUa_5Kta0T2TJJgBba-xpOxYl0DoMI5N6at8_0XcaIYnu10yjXKeGLcd_hMKLJ9FF_GyKp2fmKKy1_c_RWSlXhNIcJmDuGLHukPTOb-6oTqOeoNkSFjg2O" alt="wAWWgR-d0wV169Mc14CUa_5Kta0T2TJJgBba-xpOxYl0DoMI5N6at8_0XcaIYnu10yjXKeGLcd_hMKLJ9FF_GyKp2fmKKy1_c_RWSlXhNIcJmDuGLHukPTOb-6oTqOeoNkSFjg2O" height="381" width="624" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p> </p><h2 data-id="theme-variables%3A"><strong>Theme Variables: </strong></h2><p>If you have a technical resource, you can also use Theme Variables to update the Quick Links theming more granularly. </p><p><a href="https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#quicklinks" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/370-theme-variable-reference#quicklinks</a></p><p>Using theme variables, you can also: </p><ul><li>Update the background color or use an image as a background</li><li>Update the spacing and padding</li><li>Select a border type</li><li>Update text colors for different states (hover, focus, click, etc)</li><li>Font updates - alignment, color, letter spacing, line height, text shadow, size, decoration, transform, weight, etc. </li><li>Update count colors and styles</li></ul><h2></h2><p><br></p> </article> </main>