The Slate branding bookmarklet allows updating the styling or branding of your public-facing Slate pages by capturing the look and feel of your current institutional web site.
Slate typically creates three files a result of the bookmarklet process, using an existing, source web page. These files determine how your public-facing pages appear.
- build.xslt: Lays out the structure or skeleton of the page.
- build.css: Holds the styles applied to the HTML elements generated by the build.xslt file (putting the flesh on the bones, if you will).
- build-fonts.css: Holds the custom font definitions and declarations.
Additional files may also be created from the source web page.
Preparing Chrome Shortcut or Icon
Completing a branding import requires running an "unsafe" version of Chrome with disabled web security. Some organizations have security policies in place to restrict users from running Chrome in this way or to prevent changing browser settings.
- Create a shortcut or icon to run Chrome.
Important
Only use this shortcut for this purpose. Run Chrome in normal mode at all other times.
-
Set the properties for the shortcut (or icon) to have Chrome run in unsafe mode.
For Target, the value should be "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\temp\SlateBranding
(Make sure that the path to the directory of C:\temp\SlateBranding exists.)
Note: The most recent update of Chrome included various new features surrounding privacy and security. As a result, previous configurations of the --disable-web-security flag are no longer working.
- Close all open Chrome sessions and tabs.
- Restart Chrome in unsafe mode using the newly-created shortcut or icon. Verify that Chrome is running in unsafe mode by confirming that a watch flag appears at the top of the window:
Important
Do not specify an empty data-dir path (--user-data-dir=). Doing so uses your default Chrome profile, which may contain active login sessions to email and more. With Chrome web security disabled, active sessions are vulnerable to malicious, in-browser exploits. A non-empty profile path requirement is now in place to discourage users from the security risk of launching Chrome with their existing profile (--user-data-dir=) when web security is disabled.
Installing the Branding Bookmarklet
To add the branding bookmarklet to your Chrome browser (Chrome is a requirement):
- Click Database on the Slate navigation bar.
- In the Branding section, locate and click Branding Bookmarklet. The Branding Bookmarklet page appears with the bookmarklet link.
- Drag the link to your bookmarks bar.
With the bookmarklet installed, you can now start building your branding content.
Preparing a Template from an Existing Page
- Open a page on your website that has the styling you want to capture (such as http://www.yourcollege.edu/admissions). This page typically has a header and a footer with some content in between. You will use Chrome's built-in developer tools to edit the rendering of the page content, so that only the header and footer remain.
- Right-click on the part of the page to remove and select Inspect. Chrome's developer tools appear, displaying the raw HTML code for the page with the code for the selected element highlighted.
- Right-click on the code for the element and select Delete element to remove the element from the rendered page.
- Repeat this procedure for any element you want to remove. If desired, you can also edit the raw HTML code directly.
Tip
This procedure edits a local copy of the page in your browser rather than editing the original copy on your server. You can always undo any deletion by pressing Ctrl+Z (Command-Z on a Mac).
Running the Branding Bookmarklet
With only the header and footer remaining, this page provides a template for your Slate instance's branding. Add that is needed is to add the Slate content.
- Using the HTML editor in the Chrome developer tools, add the following element between the header and footer:
<div id="slate"></div>
- With the template now ready, capture it by running the bookmarklet. Click the branding bookmarklet link previously saved on your browser's bookmarks bar. A window appears with the generated code and Close and Download buttons.
- Click Download to save the build.zip file. This zip file contains the "build" files, including the following files and any font or other resources needed to build the page:
- build.css
- build.xslt
- and possibly build-fonts.css (depending on the fonts used on the page)
Uploading the Build Files into Slate
The "build" files are the core of your pages' structure and styling. They determine the core elements that appear on every public-facing page.
The zip file generated by the branding bookmarklet contains these core files as well as font files and any other resources required for the branding. When you upload this file, Slate unpacks the zip file using the folder structure stored in the zip file. Using the branding bookmarklet process previously described, these folders are already correctly set in the zip file.
To upload the page template:
- Click Database on the Slate navigation bar and select File Editor.
- Click Upload File.
- Set Upload Type to Upload Archive.
- Click Choose File and select the zip file created by the bookmarklet.
- Click Upload.
Your institution's headers and footers should now appear on every public-facing Slate page for your instance (for example, https://your-slate-url/apply).