Skip to main content

Updating Your School's Fonts, Colors, Logos, and Links Using the Branding Editor

Updating Your School’s Fonts, Colors, Logos, and Links Using the Branding Editor

The Branding Editor provides a self-service, user-friendly way to align your Slate instance with your school’s brand guidelines.

Getting Started

Before jumping into the Branding Editor, it’s best to review your institution’s official brand guidelines. Gather the approved fonts, color codes (usually in HEX or RGB), and logo files from your marketing or communications office. It’s best to upload high-resolution PNG or SVG files with transparent backgrounds so the logo looks professional across all Slate pages. Many institutions choose to include both a primary logo and an alternate version for different background colors. Be sure to preview your changes to confirm that logos display correctly on both desktop and mobile devices. You can also update links in the Branding Editor to ensure users are directed to the right institutional resources. 

Step 1: Gather Your Brand Assets

This includes:

  • Approved fonts or web font links
  • Color codes (HEX or RGB values)
  • High-resolution logo files (PNG or SVG preferred)
  • Standard institutional links (main website, admissions page, privacy policy, etc.)
Step 2: Upload Font/Logo Files
  1. In the Files editor, upload any new font or logo files with the appropriate path.
    • Example of an appropriate font path: “/fonts/helvetica.ttf”
    •  Example of an appropriate logo path: “images/reworkflow_logo.png”
Step 3: Update Fonts and Colors
  1. Open the Branding Editor within your Slate environment.
  2. Navigate to the build-fonts.css and build.css files to make changes to fonts and colors.
  3. Enter the approved web-safe font or link to a hosted web font (depending on what your institution uses).
  4. Input HEX codes for your school’s primary and secondary colors.
  5. Save and preview on different Slate pages (emails, portals, forms) using the Preview function.
Step 3: Upload and Configure Logos
  1. Navigate to the build.xslt file of the Branding Editor.
  2. Add the correct path for your intended logo(s) within the code. It may look something like this: “<img src="/images/reworkflow_logo.png" class="c_slate_logo cr" alt="ReWorkflow Logo" />
  3. Preview your logos on different Slate pages (emails, portals, forms) using the Preview function.
Step 4: Update Key Links
  1. Navigate to the build.xslt file.
  2. Locate any lines of code where links are referenced. Find the links that need to be updated.
  3. Test each link after saving to confirm they point to the right pages.
Step 5: Test and Finalize
  1. Impersonate an application, any portals, and forms where the branding changes may be reflected.
  2. Confirm that all links are functional and up to date.

Troubleshooting/ Best Practices

  • Use the Preview function in the Branding Editor and impersonate a record to verify how branding renders for real audiences before assuming your changes didn’t work.  
  • Always test first in your Test database; broken branding will render incorrectly and cause problems for individuals interacting with any public-facing Slate pages if updates are made first in production.  

1) Changes aren’t showing as expected

  • Make sure you’re reviewing via the Branding Editor Preview (not a cached browser tab). Hard-refresh or try an incognito window.
  • Double check your browser – Google Chrome is the recommended as the best-practice browser to use Slate in.
  • Confirm you edited the correct environment (Test vs Production).  
  • Wait 15 minutes. Changes can take up to 15 minutes to update in your database.

2) Logos won’t load or look wrong

  • Ensure the correct files are uploaded in the File Editor, then double check the path in the Branding Editor (e.g., update the src of the header/footer <img>). A missing or incorrect path is the #1 cause of broken logos.
  • Use PNG or SVG (transparent backgrounds) and verify case-sensitive filenames match exactly.  

3) Fonts and colors aren’t applying

  • Fonts: If using a hosted web font, ensure the link is valid https and loaded before your CSS that references it. Include fallbacks (e.g., "Inter", "Helvetica Neue", Arial, sans-serif) so pages remain readable.
  • Colors: Double-check HEX values (e.g., #003366) and confirm you updated the fields/variables the theme uses (buttons, links, headers). If a section doesn’t change, your CSS selector may be too weak—raise specificity carefully.
  • Update links in the Branding Editor where your theme defines them (header, footer, social icons) and use absolute https URLs. If icons are involved, confirm their image paths just like logos.

5) Layout breaks or the page looks “off”

  • Look for simple syntax issues (unclosed tags, stray quotes) in any custom HTML/CSS you pasted. Small typos can cascade.
  • If a change causes obvious breakage, revert to the last known working state in Test, fix there, and then re-apply to Production.
  1. Branding Editor – https://knowledge.technolutions.net/docs/branding-editor
  2. Updating Default Branding – https://knowledge.technolutions.net/docs/updating-default-branding

 

No comments to display

Back to top
Entity Select