Skip to main content

How can we help?

Search

Brand Template Set-Up

Updated: Production Edited:

Brand Template Set-Up

- Important Note -

This functionality requires a subscription to Localist's Developer Theming package.

If you do not see the option to Edit HTML or Custom CSS containers, please reach out to support@concept3d.com or your dedicated Client Success Manager to learn more!

 

Permission Required: Platform Admin, Theme Developer

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.

 

Template Clean Up Steps

When you're on the page with the header & footer you want, right click > View Page Source

  • Pro Tip: Copy all/paste into Dirty Markup and clean to make it easier to read
  1. Select all copy/paste into your favorite text editor -- here at Localist, Atom is our favorite!
  2. Remove all content after </header> and before <footer>
  3. If your navigation is below </header> locate this content and leave it intact
  4. Remove any title tags - These are automatically added by Localist
  5. Remove all <meta> content
  6. Remove Google Analytics reference (You can keep Google Tag Manager) - This is added by Localist when you specify your UA number in Global options
  7. Remove anything that says <base href=””> and/or ”canonical”
  8. 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

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

 

Step 2: Header

  1. 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
  2. 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 %}
 </a>

 

Step 3: Footer

  1. Back in your text editor, copy <footer>content
  2. 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.

Related articles