Branding

Owned by Emily Bivona (Deactivated)
Last updated: Apr 06, 2023 by Heather Smith
3 min read

Overview

The Student Experience Portal allows each school to customize the branding of the site to suit their needs.  The Branding configuration options are located within Institution Setup, as a subtab to Portal Setup, called General Configuration, and are accessible to users with permission to change these settings.  See  Student Experience Portal Setup Data Elements for details on the various General configuration settings.


Branding Options

The Branding Configuration allows schools to provide the following:

Site LogoThe logo URL provided here will display in the Header throughout the portal.  The URL must be publically available, it cannot be on a password-protected site.  The recommended size of the logo is an approximate width of 120px and a height of 32px, or generally, a 3.75:1 ratio.  URLs provided for the links must be valid, meaning they begin with http:// or https://.  Clients are encouraged to preview their available logos on the portal and adjust the logo files as needed for optimal display. 

Site Logo Alt Text

Brief text description of the logo for visually impaired users. The text is available to screen readers as the alternative text ("Alt-Text") for the image in the Site Logo.

100 characters maximum. If Site Logo is not blank, the Site Logo Alt Text is required.

PDF LogoThe logo URL entered here will display at the top of the downloadable PDF for any Smart Form. The URL must be publically available, it cannot be on a password-protected site.  The recommended size of the logo is an approximate width of 120px and a height of 32px, or generally, a 3.75:1 ratio.  URLs provided for the links must be valid, meaning they begin with http:// or https://.  Clients are encouraged to preview their available logos on the pdf output and adjust the logo files as needed for optimal display.
Primary Color

The hexadecimal color code entered here will be used for the primary color throughout the portal. Use the slider bars located at the bottom of the color grid and within the color grid to choose a color, or enter the hexadecimal color code value in the input field. Then click "Apply."

The primary color will be applied to the following site elements:

  • Selected Menu Item
  • Header Bar
  • Direct Cost Widget Title
  • Direct Cost Widget Border
  • Component Help
  • Payment Link and Amount
  • Tile Close Text
  • Remaining Direct Cost Title
  • Payment Link and Amount
  • Payment Details Field Titles
  • Dropdown Caret
  • Menu / Expand Collapse Icon
  • Unread Email Heading
  • Button (All button text is white)
  • Instructional Message Border
  • Instructional Message "Show Full Info" Text
  • Tile Expansion Text
  • Profile Horizontal Rule Bar
  • Email Icon
  • Password Icon
  • Selected Button
  • Unselected Button Text
  • Button Border
Secondary Color

The hexadecimal color code entered here will be used for the secondary color throughout the portal. Use the slider bars located at the bottom of the color grid and within the color grid to choose a color, or enter the hexadecimal color code value in the input field. Then click "Apply."

The secondary color will be applied to the following site elements:

  • Title Bar
  • Statement of Understanding Background
  • Student Profile icon and Student name in the Header bar
Primary Background Color

The hexadecimal color code entered here will be used for the primary background color throughout the portal. Use the slider bars located at the bottom of the color grid and within the color grid to choose a color, or enter the hexadecimal color code value in the input field. Then click "Apply."

The primary background color will be applied to the following site elements:

  • Background
  • Sign In Background
Secondary Background Color

The hexadecimal color code entered here will be used for the secondary background color throughout the portal. Use the slider bars located at the bottom of the color grid and within the color grid to choose a color, or enter the hexadecimal color code value in the input field. Then click "Apply."

The secondary background color will be applied to the following site elements:

  • Menu
  • Instructional Message Background
  • Direct Cost Widget Background
  • Input field Background