Home

SILK Wrapper

The SILK wrapper allows Localist to apply the same header, footer, and styles to every calendar page which translates to a seamless experience for your users (they won’t even know they’re using a third party platform). The added advantage is if links change in your header and footer, you won’t need to mirror those changes in Localist; they’ll just happen.

 

In this article you’ll find:

  • Template Clean Up Steps
  • Adding Wrapper Comments
  • Configuring a SILK Wrapper in Localist
  • Customer Examples

Template Clean Up Steps

Start by identifying the wrapper source you would like to use then follow these steps:

1. Remove any content specific for that page (body content), so only the “shell” of the design remains (ie. head, header and footer).

2. Remove any <title> tags in the source. These are added by Localist.

3. Remove any references to the jQuery library in the source. This is added by Localist.

4. Remove any references to Google Analytics. This is added by Localist when you specify your UA number in Calendar Settings.

5. Ensure all references to CSS, JavaScript, images and other pages on your website are absolute URLs.

6. If your wrapper supports responsive design, you must check off Responsive Design in your Calendar Settings.

  • Non-absolute URLs: /external/wcpages/styles/styles.css
  • Absolute URLs: yourdomain.com/external/wcpages/styles/styles.css

 

Your Vision + Our Technical Chops

Don’t have the time or resources to customize your platform? Let us do the work and put your best calendar forward with a seamlessly branded visitor experience.

Get in touch!

 

Adding Wrapper Comments

  • Comments must be on their own line.
  • Comments must use double dashes and not emdashes.
  • Comment names (head_tags) must remain lower case. 

 

Directly after the opening <head>
<!-- LOCALIST COMMENT - START head_tags -->

 

…your styles/CSS/JS/etc. will be here.

 

Directly before the closing </head>
<!-- LOCALIST COMMENT - PLACEHOLDER localist_styles -->
<!-- LOCALIST COMMENT - PLACEHOLDER localist_js -->
<!-- LOCALIST COMMENT - END head_tags -->

Directly after the opening <body>
<!-- LOCALIST COMMENT - START before_grid -->
your header code will start here.

 

Directly after the closing </header>
<div class="content-wrapper">

<div class="wrapper">

<!-- LOCALIST COMMENT - END before_grid -->

<!-- LOCALIST COMMENT - START body -->

<!-- LOCALIST COMMENT - PLACEHOLDER user_menu -->

<!-- LOCALIST COMMENT - PLACEHOLDER search_bar -->

<!-- LOCALIST COMMENT - PLACEHOLDER top_bar -->

<!-- LOCALIST COMMENT - PLACEHOLDER content -->

<!-- LOCALIST COMMENT - END body -->

<!-- LOCALIST COMMENT - START after_grid -->

</div>

</div>
…your footer code will start here.

 

Directly before the closing </body>
<!-- LOCALIST COMMENT - END after_grid -->

 

 

Configuring a SILK Wrapper in Localist

Localist automatically refreshes wrappers over night, but if you can manually deploy your changes by selecting Refresh Wrapper.

Steps to follow:

1. In your admin dashboard, navigate to Settings > Appearance

2. While on the Appearance page you will see a field called SILK Wrapper URL

3. Insert the new URL.

4. After saving, click Refresh Wrapper, which will appear under the URL field.

 

 

Customer Examples