Skip to content

Custom Branding

Jump to bottom
Sven Aelterman edited this page Feb 10, 2022 · 1 revision

The instructions here can be used to customize the branding of the UI to use your institution's logo and name. Customizing this branding requires modifying the application's source code.

Concepts

These customizations are done in the strings.en-us.js file. Once you complete your customization, commit and push the changes to the GitHub repo. The GitHub Action will automatically deploy the new application version.

If you'd like to preview the changes in a staging environment, make your customizations on a new branch and push the branch. This will generate a new endpoint you can browse to preview the site. You add additional commits on your branch to keep updating the staging environment. Once you're satisfied with the look, you can merge the branch into the main branch. For more information on this process, refer to the Azure Static Web Apps docs.

Institution Name

The institution name (which defaults to "Americas University") is shown in two places: in the header and the footer of the site. For customizing the header, see below. The footer value is defined in the strings.en-us.js file as companyName. Simply change the value from Americas University to your institution's name.

const strings = {
...
    companyName: 'My Institution Name',
...
}

Header Logo or Text

There are two options for customizing branding in the header:

  1. Supply an image with dimensions 100 x 45 pixels (W x H)
  2. Supply a text representation

The default is a text representation.

If you supply an image, the logo text will be used as alt text for the image.

Logo Image

To use an image in the header, specify the path to the image in the logoImage value in the strings.en-us.js file.

The recommended way to add the image is to add your image to the /src/sas.front/public folder and reference it with a relative path, such as /logo.png.

If you want to display an image hosted on another website, you can use an absolute URL, such as //mysite.com/images/logo.png. In addition to modifying the strings.en-us.js file, you will also need to modify the web application's Content Security Policy to allow loading the image from the remote domain. Modify the CSP by editing the staticwebapp.config.json file in /src/sas.front.

Logo Text

To modify the logo text or alt text for the logo image, change the value of logoText in the strings.en-us.js file.

Clone this wiki locally