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:
Remove body content
All content specific to the page (body) should be removed, so only the head, header and footer remain.
Remove title tags
These are automatically added by Localist.
Remove jQuery references
This is automatically added by Localist.
Remove Google Analytics reference
This is added by Localist when you specify your UA number in Global options.
Make all URLs absolute
If your wrapper does not support responsive design, you must uncheck Responsive Design in Global Options.
- Non-absolute URLs: /external/wcpages/styles/styles.css
- Absolute URLs: https://yourdomain.com/external/wcpages/styles/styles.css
Adding Wrapper Comments
When adding comments to your wrapper file, you must adhere to the following requirements:
- 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 -->
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 -->
…any code related to your page’s header should start after this.
Directly after the final bit of header code:
<!-- 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 -->
…any code related to your page’s footer should start after this.
Directly before the closing </body>
<!-- LOCALIST COMMENT - END after_grid -->
Configuring a SILK Wrapper in Localist
Start by logging into your Admin Dashboard
Navigate to Settings > Appearance
Add your wrapper URL to the SILK Wrapper URL field
The URL must be publicly accessible.
Once you select Save Changes a “Refresh Wrapper” link will appear under the wrapper field.
Select the “Refresh Wrapper” link to officially import your new branding. Localist will refresh your wrapper once every 24 hours automatically, but if you need to force an update in the future this link will do the trick.
– Bonus –
Here are some helpful troubleshooting tips to try before you reach out to the support team!
- Styles are not displaying as expected: It’s all in the details here — in order for Localist to display the styles in your wrapper the URLs must be absolute. If you are using SSL on your site, then the URLs must begin with https rather than http.
- Fonts are not displaying as expected: If you have purchased a font that can only be used by your organization’s domain then you will not be able to apply it to your Localist platform unless you add your Localist domain to the font license.
- Content is missing: All comments in your wrapper must be on their own individual lines.
- Localist won’t save the wrapper URL: Likewise, all comments in your wrapper must be on their own individual lines. Also make sure the file is public and that the server hosting the wrapper is providing the file as expected.