Setting up Your Site Header and Footer

Customize your site-wide header and footer elements.

Classic Flex UI

This information refers to the Classic version of the UBCMS.

Only those with a Specialist role in the UBCMS can edit these files.

On this page:

Overview

Header and footer elements are stored in your site's special Site-Wide Configuration folder.

Each area can hold several special components, which will be listed in the Sidekick when you are viewing the header or footer page.

Please be very carefully making your changes. They will be reflected throughout your site.

Example Site-Wide Configuration directory for this website.

The Site-Wide Configuration folder for this website in the admin console.

Old Brand Cleanup

You can delete any -oldbrand header or footer files left over from the 2017-18 brand transition.

Editing the Header

These Header components are available through the Sidekick.

Open the Header page (double-click or right click). You will now see just your site's header elements, and the Sidekick will show any applicable components.

Here you can modify the elements in your site's header to reflect your organizational identity and affilliations, as well as provide navigation links for tasking, audience and social media.

Headers can have several components, although not all will occur on every site. From top to bottom:

  1. UBCMS system-wide header
    • Present on all UBCMS Web pages, the system header cannot be edited.
  2. Emergency Alert Banner
    • Once added, this component will automatically display any emergency UB Alert messaging.
  3. Header
    • Your site's master header, with branding as well as supporting social media and navigational elements.
  4. Mobile Menu
    • This is required for most sites to generate navigation on small screen devices using RWD.
  5. Top Navigation
    • The main horizontal navigation bar with its dropdowns can be added here using this component, but it cannot be edited here. The UBCMS builds it dynamically from your site's secondary pages.
    • Jumbo Top Navigation is also turned on here.  
  6. Breadcrumbs
    • Secondary navigation shows your users their location within your site. Can be in the header and the footer, as desired.

Customizing Your Header

It is possible to create custom headers, but this step requires great care to follow UB brand and accessibility rules and you will need to get special permission for an exception to a traditional lockup.

This is for experts only, please contact the DCT Help Desk if you are considering developing your own custom header.

Developer Tip

Google Analytics codes can be placed in an HTML Snippet on the header (or footer), or in the Page Properties of your site's home page, not in the header or footer's Page Properties.   

Editing the Footer

These Fat Footer components are available through
the sidekick.

Open the Footer page (double-click or right click). You will now see just the footer elements, and the Sidekick will show any applicable components.

Here you can modify the elements in your site's footer, including the main unit title, parent affiliation(s), as well as additional navigational links for tasking, special audiences, and your social media channels.

All of these features are housed in the Fat Footer Container.

There are several layout options, each with additional space for links and content.

Sites will have a 'simple' or 'enhanced footer,' plus an optional 'fat footer,' with the fat footer displayed on top.

The 'simple footer' holds identity and contact details, while the 'enhanced footer' holds those same identify and contact details, plus some additional elements (usually links). Pages can also have a 'fat footer' with multple columns that usually contains links and social media buttons.  All are built from the same component, the Footer (formerly 'Fat Footer') Container.  

How To Build Your Footer?

Jakob Nielsen's post "Footers 101" provides a handy overview including tips and shortfalls.

Accessibility

Third Party and Custom Code Must be Accessible

Authors are responsible for any custom coding and the use of third party content that is hosted in their UBCMS pages.  This includes applications such as Formstack forms that have their own UBCMS component. If you have concerns that external vendor content is not accessible, please contact Mark Greenfield.

Best practice: for Formstack forms, avoid the date picker and use of 'other' in dropdowns.

An H1 Is Required on Every page

To meet accessibility requirements, every page must have an H1 Title (using the Title component).

Sometimes it is preferable for stylistic reasons not to show an H1 on a page. In such cases, a setting in Page Properties allows the Header container to serve in stead of the 'Heading 1' title, and will be visible to assistive technology.

  • This setting is ON by default for every home page, but can be turned off if needed.
  • This setting is OFF by default for any page that is not a home page, but can be turned on if needed.
  • This setting works for standard heading types. For custom headings, additional coding may be required.

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)