Updating Default Branding

Updated February 16, 2023 18:09

Expand-All Collapse-All

Your database contains the default "Slate University" branding template that can be modified to include elements of your institutional branding, such as logos and colors. This template initially includes a simple header with a background color and a logo. Your web development team should adjust these elements before moving onto customizing additional elements such as navigational links in the header or adjusting the footer.

The self-service Branding Editor can be used to modify the Slate default branding template. This tool should be managed by someone in your office with basic web development skills using HTML and CSS. Technolutions does not support the use of custom JavaScript within the Branding Editor.

We suggest contacting one of our Preferred Partners to request custom branding assistance.

Important!

If you create the custom branding in your test environment, remember that all logos and graphic files must be uploaded to your production environment when activating the branding there.

Favicon

Need a favicon image? A favicon is the small 16x16 icon that appears next to the name of your site on a browser's address bar.

To get your institution's favicon:

In your web browser, open http://www.google.com/s2/favicons?domain=www.example.org and replace www.example.org with your institution's domain.
Copy the full URL to the favicon (browser dependent - in Chrome, right-click on the image and select "Copy image address").

To add or update your institution's favicon in your Slate database:

1. Click Database on the Slate navigation bar.

2. Select Files in the Configurations area. The Files page appears.

3. Click Upload File. The Upload File popup appears.

4. Set the Upload Type to "Upload File by URL."

5. Enter (paste) the full URL to the favicon file.

6. Click Upload. The Edit File popup appears.

7. Set the Path value to "/favicon.ico".

8. Click Save.

Note: It may take up to 15 minutes for the file to propagate across all production nodes, and you may need to wait a bit longer (up to 24 hours) for your browser to expire the cached favicon. You may be able to open an incognito window after the 15-minute mark to see the new favicon.

Header Logo

1. Upload your new logo file to the File Editor > Images folder in your production database.

2. Once uploaded, use the Branding Editor to adjust the referenced path to the header logo.

The HTML <img> tag is used to embed an image on a web page. To adjust the header logo, locate the

section and modify the path that comes after "src" in
<img src="/images/slate_logo.svg
to reference your uploaded image.

If you uploaded your logo to the images folder, replace slate_logo.svg with your logo's filename.

3. The href attribute specifies the link's destination. To change the header logo link, replace the # with the URL.

Header Color

In the Branding Editor, open the build.css file.
In the build.css file, locate the "#c_header-span" section, where you can adjust the "background:" value by updating the RGB value to the desired color. HEX codes and RGB values are accepted. Click here for more information on HEX codes and RGB values.

By default, the header includes a gradient effect. This styling is included in the build.css file. Comment out this line of code out unless you feel comfortable changing the styling.

Comments in HTML

Comments can be used to hide content from appearing in a browser, and they are only visible to those viewing the page source code. Everything between the  will be hidden from the page display.

Example:

This text will appear.

Header Menu Links

To add menu links, uncomment the section under
<--Navigation menu links-->

Adjust Menu Links

When you uncomment the Navigation menu link section, three URLs are needed to make the Visit, Request Information, and Apply links function. An href indicates the link's destination. Update each link's href with the desired URL by replacing the #.

The link text is the part that appears. Clicking the link text will open the specified URL. If you'd like to adjust what text appears as a link, modify the text in this section.

Tip

The target="_blank" attribute tells the browser to open the link in a new window or tab.

Footer

Within your /build.xslt file, you have access to the default footer's code. This footer includes:

Logo
Address block
Social media icons
Quick links
Copyright section.

If you would like to add the footer section, uncomment the section following .

Footer Logo

1. Upload your new logo file into Production via the File Editor, and place it in the Images folder.

2. Once uploaded, use the Branding Editor to edit the path to the header logo. The HTML <img> tag is used to embed an image on a web page. To adjust the header logo, located the  section and modify the path (after src in <img src="/images/slate_logo_ft.svg") to reference your uploaded image. If you uploaded your logo to the images folder, you'll need to replace slate_logo_ft.svg with your logo's filename. (If you want to place an example logo in the footer as a placeholder, refer to the link to an included SVG file at the end of this article.)

3. The href attribute specifies the link's destination. To change the header logo link, replace the # with the desired URL.

Address Block

To change the address that appears on the page, locate the section in the footer under the <address> tag.

Replace the New Haven address and phone number in this section with the desired address and phone number. Any content placed between  and  will appear bold.

Social Media Icons

1. Upload your new social media files into Production via the File Editor, and place them in the Images folder. (If you need social media icons, a link at the end of this article provides a zip file with a collection of basic icons.)

2. Once uploaded, use the Branding Editor to update the path referenced for the social media icons. The HTML <img> tag is used to embed an image on a web page. To change the icons, locate the

section in the shared/build.xslt file and modify the path (following src in <img src="/images/icons/icons8-facebook-50.png" to reference your uploaded image. Replace facebook050.png with the new filename.

3. The href attribute specifies the link's destination. To change the social media icon links, replace the # with the desired URL (the <a> is above the <img> for the icon files you referenced in Step 2 above.

Contact Links and Quick Links

Contact Links and Quick Links are sections within the footer that can be used to add various links to your institution's website. Comment out any sections that you do not plan to use within the shared/build.xslt file (note separate sections for Contact Links and Quick Links).

To modify the links, replace the # in
<a href="#" class="c_ft_main_item_link_color cr">Example Link</a>
with the URL to the desired link location.
You can then edit the Example Link text to change the link title that appears in the footer.

Copyright

Copyright information is located in the c_ft_legal cr section.
Two links are available, one for Terms & Conditions and one for Privacy Policy. An href indicates the link's destination. Replace the # in each link's href with the desired URL.
The link text is the part that appears on the page, and clicking on the link text opens the specified URL. If you'd like to change the text that appears for a link, edit the text in this section:
The footer legal section also includes code for a dynamic copyright year in the footer. To have a static year value appear instead, replace fw:year() with the desired year value.

External Resources: