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.
We suggest contacting one of our Preferred Partners to request custom branding assistance.
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.
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.
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
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.
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 <!-- and --> will be hidden from the page display.
Header 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.
The target="_blank" attribute tells the browser to open the link in a new window or tab.
Within your /build.xslt file, you have access to the default footer's code. This footer includes:
- Address block
- Social media icons
- Quick links
- Copyright section.
If you would like to add the footer section, uncomment the section following <!-- Footer content section -->.
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 <!---Footer logo and link --> 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.
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 <strong> and </strong> 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
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
Copyright information is located in the c_ft_legal cr section.
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.