Brand Template Set-Up

Your Brand Template will be the header & footer of your calendar! You’ll need to identify a page with the header & footer you’d like to use and then just follow the steps below.

Platform Admin

Template Clean Up Steps

  • When you’re on the page with the header & footer, right click > View Page Source
  • (optional) Copy all/paste into Dirty Markup and clean to make it easier to read
  • Select all copy/paste into your favorite text editor — here at Localist, Atom is our favorite!
  • Remove all content after </header> and before <footer>
    • If your navigation is below </header> locate this content and leave it intact
  • Remove title tags
    • These are automatically added by Localist
  • Remove all <meta> content
  • Remove Google Analytics reference (you can keep Google Tag Manager)
    • This is added by Localist when you specify your UA number in Global options
  • Remove anything that says <base href=””> and/or ”canonical”
  • Make all URLs absolute
    • Ensure all references to CSS, JavaScript, images, etc., use complete URLs
      Non-absolute URLs: /external/wcpages/styles/styles.css
      Absolute URLs: https://yourdomain.com/external/wcpages/styles/styles.css

Adding your Header & Footer to Localist

Step 1: Head

  • Once you’ve completed the steps above, navigate to the Admin Dash > Settings > Platform Settings > Appearance
  • Click Edit HTML for your Active Theme, which will take you to the Theme Editor
  • Go back to the HTML file in your text editor > copy <head> content 
  • Paste <head> content into Global Site Shell on the line just before the <!-- begin include javascripts --> comment > Save Changes

Step 2: Header

  • In your HTML file, copy <header> content (beginning with the <body> tag) and paste it into the _header file on the line before the {% if site.show_navigation %} statement > Save Changes
  • Then, go to the _user_menu Theme File and delete the line of code (snippet below) > Save Changes
 <a class="em-desktop-menu-title" href="{{ site.home_link }}">
 {% if site.has_logo %}
 <img src="{{ site.emphasis_logo_url }}" alt="{{ site.name }}" height="{{ site.emphasis_logo_height }}" width="{{ site.emphasis_logo_width }}" {{ site.emphasis_logo_srcset }}>
 {% else %}
 {{ site.name }}
 {% endif %}

Step 3: Footer

  • Back in your text editor, copy <footer>content
  • In the Theme Editor, paste <footer> content into _footer on the line before <div class="em-subfooter"> > Save Changes

Once you’ve completed these steps, navigate to Admin Dash > Settings > Appearance > click on the paint brush icon for your Active Theme to begin corrective CSS + adding colors, fonts, etc.