Customizing The Banner - HL Vanilla Community
<main> <article class="userContent"> <p> There are a lot of variables that control the look of the banner. They are edited in your <code class="code codeInline" spellcheck="false" tabindex="0">variables.json</code> or the <strong>Style</strong> tab of the theme editor.</p><h3 data-id="basic-customizations">Basic Customizations</h3><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">banner.colors.bg</code>: The background color of the banner.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">banner.colors.fg</code> : The foreground (text) color of the banner.</li></ul><h3 data-id="customizing-the-search-bar">Customizing The Search Bar</h3><p>The banner usually contains a large search bar. You can customize it with the following variables.</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">banner.font.color</code> : The text color of the search bar.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">banner.searchBar.border.radius</code> : You can change the border radius of the search text box.</li></ul><h2 data-id="banner-options">Banner options</h2><p>There are different options of banners. The two main elements in the banner are the search bar and the title. You can add a description and a logo too. See below the variants:</p><h3 data-id="banner-with-search-bar-and-title">Banner with search bar and title</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/674/4BM6IRH1RRGP.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/674/4BM6IRH1RRGP.png" alt="Search Hero.png" height="510" width="2880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="banner-with-search-bar-on-the-bottom">Banner with search bar on the bottom</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/139/JGGX87WKH1WT.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/139/JGGX87WKH1WT.png" alt="search_bottom.png" height="638" width="2880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="banner-with-logo">Banner with logo</h3><p>There are 2 options here. You can use the banner with logo and search bar or the banner with logo and search bar on the bottom.</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/182/TV4WOQP3SAOM.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/182/TV4WOQP3SAOM.png" alt="search and center logo2 copy.png" height="506" width="2880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/326/NKKHYYPHPLB0.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/326/NKKHYYPHPLB0.png" alt="search and center logo copy.png" height="635" width="2880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="banner-with-left-alignment-elements">Banner with left alignment elements</h3><p>You can have your elements like title, description and search bar with a left-align position.</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/248/5NGAVH1XOR9T.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/248/5NGAVH1XOR9T.png" alt="Search Hero_left align.png" height="510" width="2880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2></h2> </article> </main>