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

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.

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 (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.

config-files

 

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.

upload_file_by_url

 

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

8. Click Save.

edit_file_path

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
<!---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.

file_path

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

new_logo_href

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. Click here for more information on HEX codes and RGB values.

header_color

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. 

Example:

<p>This text will appear.</p>

<!-- <p> This text will not appear </p> -->

commenting

Header Menu Links

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

uncomment

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 #.

adjust_menu_links

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.

 

adjust_link_text

Tip

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

target_blank_attribute

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 content section -->.

uncomment_footer_1

uncomment_footer_2

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 <!---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.)

 

fooer_logo_1

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

footer_logo_2

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

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
<!---Social media links !-->
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. 

social_icons

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

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.

contact_links

Copyright

Copyright information is located in the c_ft_legal cr section.

copyright_info

 

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

 

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

 

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

 

External Resources:

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.