--- title: "Updating Default Branding" slug: "updating-default-branding" updated: 2026-04-08T15:18:54Z published: 2026-04-08T15:18:54Z --- > ## Documentation Index > Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt > Use this file to discover all available pages before exploring further. # Updating Default Branding 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. [![default_template](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/default_tamplate.jpg)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/default_tamplate.jpg) The self-service [Branding Editor](/v1/docs/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. If you create the custom branding in your test environment, all logos and graphic files must be uploaded to your production environment when activating the branding there. > [!TIP] > ⭐ Contact one of our [Preferred Partners](https://technolutions.com/preferred-partners) for custom branding assistance. ## 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: 1. 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. 2. Copy the full URL to the favicon. This may be browser dependent: in Chrome, right-click the image and select *Copy image address*. To add or update your institution's favicon in your Slate database: 1. Go to **Database** → **Files.** 2. Select **Upload File**. 3. Set the **Upload Type** to *Upload File by URL*. 4. Enter (paste) the full URL to the favicon file. 5. Select **Upload**. 6. In the **Path**field, enter `/favicon.ico`. 7. Select **Save**. > [!WARNING] > 📝 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 To change your header logo: 1. Go to **Databse → Files**. 2. Upload your new logo file to *the***Images**folder in your production database. 3. Once uploaded, use the [Branding Editor](/v1/docs/branding-editor) to adjust the referenced path to the header logo. ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/image(59).png) The HTML tag is used to embed an image on a web page. To adjust the header logo, locate the `<!---update logo and link here !--> `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. 4. The `href` attribute specifies the link's destination. To change the header logo link, replace the # with the URL. ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/image(60).png) ## Header color To change the header color: 1. In the Branding Editor, open the `build.css` file. 2. 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. [Select here](https://color.adobe.com/) for more information on HEX codes and RGB values. [![header_color](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/header_color.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/header_color.png) 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. For example: ```xml

This text will appear.

``` [![commenting](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/commenting.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/commenting.png) ## Header menu links To add menu links, uncomment the section under `<--Navigation menu links-->` [![uncomment](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/uncomment.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/uncomment.png) 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 #. [![adjust_menu_links](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/adjust_menu_links.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/adjust_menu_links.png) The link text is the part that appears. Selecting 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. [![adjust_link_text](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/adjust_link_text.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/adjust_link_text.png) The `target="_blank"` attribute tells the browser to open the link in a new window or tab. [![target_blank_attribute](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/target_blank_attribute.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/target_blank_attribute.png) ## 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 . [![uncomment_footer_1](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/uncomment_footer_1.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/uncomment_footer_1.png) [![uncomment_footer_2](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/uncomment_footer_2.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/uncomment_footer_2.png) ### Footer logo 1. Upload your new logo file into Production via the File Editor, and place it in the Images folder. [![fooer_logo_1](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/footer_logo_1.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/footer_logo_1.png) 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](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/slate_logo_ft.svg) 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. [![footer_logo_2](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/footer_logo_2.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/footer_logo_2.png) ### 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 `<strong>` and `</strong>` will appear bold. [![address_section](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/address_section.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/address_section.png) ### 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](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/icon_images.zip) provides a zip file with a collection of basic icons.) 2. Once uploaded, use the [Branding Editor](/v1/docs/branding-editor-Branding-Editor) to update the path referenced for the social media icons. The HTML **tag is used to embed an image on a web page. To change the icons, locate the [![social_icons](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/social_icons.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/social_icons.png) 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. [![social_link](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/social_link.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/social_link.png) ### 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). [![contact_links](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/contact_links.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/contact_links.png) 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. [![copyright_info](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/copyright_info.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/copyright_info.png) 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. [![t_c_links](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/t_c_links.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/t_c_links.png) 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: [![t_c_links_text](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/t_c_links_text.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/t_c_links_text.png) 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. [![copyright_year](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/copyright_year.png)](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/copyright_year.png) ## External resources - [HTML](https://www.w3schools.com/html/) - [CSS](https://www.w3schools.com/css/) - [Color values](https://color.adobe.com/) - [ADA compliance Colors](https://abc.useallfive.com/) ## Attachments - [slate_default_branding (1).zip](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/slate_default_branding (1).zip) - [icon_images(1).zip](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/icon_images(1).zip) - [slate_logo_ft(1).svg](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/slate_logo_ft(1).svg)