☑️ Prerequisite Skills

Branding in Slate

The Branding Editor enables editing and previewing Slate branding while keeping current branding files unchanged. As you create and maintain a consistent brand identity across all of your Slate pages, you can test new branding ideas before you implement them in production.

Use the Branding Editor to:

• Change your logo, colors, or fonts

• Update your header and footer designs

• Add new branding elements to your pages

• Test different branding layouts

• Create custom branding for specific portals or pages

Accessing the Branding Editor

To access the Branding Editor:

1. Select Database from the Slate navigation bar.

2. In the Branding section, locate and select Branding Editor.

Using the Branding Editor

📝 Note

Make changes in the Branding Editor in your test environment before publishing anything in production. Need to roll any changes back? Use the Files feature’s Version History tool.

To edit Slate branding in the Branding Editor:

1. Click Import Current to load existing branding files.

2. Make edits to the files as needed.

3. Click  Save. 

4. Click Preview.

5. Select a record to impersonate and review your changes.

6. When all the changes have been made and approved, click Publish Changes to update the files in your production environment.

Files

The Files list at left displays any files located in the dev folder of  Database > Files.

To delete a file, click the to the ❌ to the right of the file name. Click OK in the system dialog to confirm deletion.

New

Click New to create an empty file. A prompt appears to enter a file name. Click  Create to create a new blank file. The file is saved to the dev folder in Database > Files.

To edit a file in the Branding Editor, it must have one of the following extensions:

• .css

• .xslt

• .html

Save

Saves changes to the current file.

Preview

Preview your branding. A popup appears with two fields, URL and Preview as:

• The URL field is pre-populated with /apply. Update this field with a page you’d like to see your branding changes reflected on. Example URLs might include:

  • /register

  • /register/<FORM_URL>

• Optionally, enter the name of a record in the Preview as field to impersonate them.

When you click Preview, a new tab opens displaying the URL you entered. A banner indicates you are impersonating your selected record in Development Mode, meaning dev styles are being applied.

Any subsequent pages opened from within the preview will also be in Development Mode until you click the Dismiss link. For example, if a form is opened, it will also display with dev branding.

Upload

Upload branding files from an external source, including text files or a live webpage.

Click  Upload and a popup appears with two options for Type, URL or File:

URL (Branding Wizard)

Also known as the Branding Wizard, this feature lets you pull branding files into Slate from a website you operate.

To use the Branding Wizard:

1. Publish a page on your institutional website that contains the following code:

    <div id="slate">SLATE GOES HERE</div>

2. Copy the URL of the page.

3. Paste the URL in the URL field.

4. Click Upload.

   

File

Select an existing local file to upload to the dev folder to be edited.

📝 Note

You may not overwrite an existing file via upload. Attempting to upload a file with the same name as a file already in the dev directory will cause an error message to appear. Delete the existing file by clicking ❌ prior to uploading a new version with the same name. 

Import Current

Copies all files currently in the share folder in Files to the dev folder for editing.

🔔 Important!

This will overwrite the files that currently exist in the dev folder, and any edits will be lost.

Publish Changes

Copies all the files in the dev folder and writes them to the shared folder in Files, overwriting any existing files with the same names. The dev files are not removed.

Version Control

To roll back published changes:

1. Go to Database > Files.

2. In the dev folder, select a file that you want to revert.

3. At bottom right, select Version History. A list of file versions appears.

   

4. Select the version to be reverted to.

5. Select Revert. Confirm the system dialog.

6. Select Save.

The file in the Branding Editor is reverted accordingly.

Exit

Returns to Database.