Theme Header and Footer - HL Vanilla Community
<main> <article class="userContent"> <p>The theme header sits at the top of your site. You can put whatever you want in your header to ensure that it can pixel-perfect match the rest of your web site (if you have one). It completely belongs to you.</p><h2 data-id="header-and-footer-assets">Header And Footer Assets</h2><p>All of the header/footer information rests in the following assets:</p><ul><li><code class="code codeInline" spellcheck="false" tabindex="0">header.html</code> : This is an HTML file that contain's your header's HTML. You can put whatever you want in this file with one exception: <strong>Don't put script tags in your header</strong>. Vanilla uses strict security headers on many of its pages that will block scripts to protect from XSS attacks. If you want to write some javascript there is a specific asset for that.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">footer.html</code> : This is an HTML file similar to the <code class="code codeInline" spellcheck="false" tabindex="0">header.html</code> , but for your footer.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">styles.css</code> : This is where your CSS header/footer CSS goes. <strong>Your CSS will only affect the header/footer</strong> because it is included within a shadow dom. This allows you to use whatever CSS classes you want without affecting the rest of the site.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">javascript.js</code> : Put all of your javascript here.</li></ul><p>When using the theme editor, you will see tabs for each of these assets. When creating a file based theme, put these files in the <code class="code codeInline" spellcheck="false" tabindex="0">/assets</code> folder. The theming API has endpoints that specifically reference these assets too.</p><h2 data-id="example-footers">Example Footers</h2><p>Here is a very basic footer with a copyright and a watermark logo.</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/785/1732Q2F4LBW4.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/785/1732Q2F4LBW4.png" alt="basic_footer.png" height="108" width="2880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>Here is more complex example with columns of corporate and social links.</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/991/NE8IO4FFTS9W.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/991/NE8IO4FFTS9W.png" alt="footer_knowshar.png" height="456" width="2880" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="accessing-the-header-footer-through-javascript">Accessing the Header & Footer through Javascript</h2><p>The Header and Footer are semi-isolated from the rest of the page. While this makes styling easier, it makes executing javascript on your header and footer slightly more complicated.</p><p>Let's take an example. Let's say you have some call to action button in your header, and you wanted to react to it being clicked.</p><p><strong>header.html</strong></p><pre class="code codeBlock" spellcheck="false" tabindex="0"><header> <a href="/some/link">A Link!</a> <button type="button" id="my-call-to-action">Call to Action!</button> </header> </pre><p>If there was no isolation adding a click handler to your button would look like this:</p><p><strong>not-working.js</strong></p><pre class="code codeBlock" spellcheck="false" tabindex="0">var headerCTA = document.querySelector("#my-call-to-action"); headerCTA.addEventListener("click", function (e) { // Do something here. }); </pre><p>This won't work though, due to the shadow DOM isolation. Instead we need to access the header's element first, then search inside of it. Instead 1 extra line of code is required.</p><p><strong>working.js</strong></p><pre class="code codeBlock" spellcheck="false" tabindex="0">var themeHeader = document.querySelector("#themeHeader"); // Alternatively if you wanted the footer var themeFooter = document.querySelector("#themeFooter"); var headerCTA = themeHeader.shadowRoot.querySelector("#my-call-to-action"); headerCTA.addEventListener("click", function (e) { // Do something here. }); </pre> </article> </main>