SILK Wrapper: Customizing Look & Feel

SILK is a like-kind exchange defined as “a transaction that allows for the disposal of an asset and the acquisition of another replacement asset.”
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, who don’t know they’re going to a different platform to view events.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:

  • Wrapper Clean Up Steps
  • Wrapper Comment Steps
  • Final Comment Outline
  • Configuring a SILK Wrapper in Localist


WRAPPER CLEAN UP STEPS

Identify the wrapper source you would like Localist to use. A basic page on your current website works well.

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.

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

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


WRAPPER COMMENT STEPS

Important Notes:

  • 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 OPENING HEAD:

<!-- LOCALIST COMMENT - START head_tags -->

DIRECTLY BEFORE CLOSING HEAD:

<!-- LOCALIST COMMENT - PLACEHOLDER localist_styles -->
<!-- LOCALIST COMMENT - PLACEHOLDER localist_js -->
<!-- LOCALIST COMMENT - END head_tags -->


DIRECTLY AFTER OPENING BODY:

<!-- LOCALIST COMMENT - START before_grid -->

.

DIRECTLY AFTER 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>

DIRECTLY BEFORE CLOSING BODY:

<!-- LOCALIST COMMENT - END after_grid -->

FINAL COMMENT OUTLINE

 <head>

<!-- LOCALIST COMMENT - START head_tags -->

Styles/CSS/JS/Fonts

<!-- LOCALIST COMMENT - PLACEHOLDER localist_styles -->
<!-- LOCALIST COMMENT - PLACEHOLDER localist_js -->
<!-- LOCALIST COMMENT - END head_tags -->

</head>

<body>

<!-- LOCALIST COMMENT - START before_grid -->

<header>

Header Code

</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>

<footer>

Footer Code

</footer>

Additional Styles/CSS/JS/etc

<!-- LOCALIST COMMENT - END after_grid -->

</body>


CONFIGURING A SILK WRAPPER IN LOCALIST

In your admin dashboard, navigate to Settings > Appearance

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

Insert the new URL.

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

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