Customize your site-wide header and footer elements.
A Specialist role in the UBCMS is required to edit these files but we strongly encourage your technical lead be directly involved with any changes to these pages.
Last reviewed: September 22, 2021
Every UBCMS site has a Header and a Footer that are displayed throughout your site. These are stored as special pages in your site's Site-Wide Configuration folder (under your home page but hidden from the site navigation).
Each page can hold select regular components plus special components developed just for their use. These components will be listed in the Components when you are editing those pages.
Please be very carefully making changes as they will be reflected throughout your site.
Please unpublish then delete any -oldbrand header or footer files left over from the 2017-18 brand transition.
Open the Header page. You will now see just your site's header elements, and the Components Browser will show any applicable items including components designed specifically for this page.
Here you can modify your site's header to reflect your organizational identity and affilliations and provide additional navigation links for key tasking, audience and social media.
Headers can have several components, although not all will occur on every site. Usually they are implemented in this order, from the top o fthe page down:
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 a custom header.
To work correctly, tracking codes like Google Analytics can be placed in an HTML Snippet on the header (or footer), or in the Page Properties of your site's home page, but NOT in the header or footer's Page Properties.
Open the Footer page. You will now see just your site's footer elements, and the Components Browser will show any applicable items including components designed specifically for this page.
Here you can modify the elements in your site's footer, including the main unit title, parent affiliation(s), and additional navigational links for key tasking, special audiences, and your social media channels.
All of these features are housed in the Fat Footer Container. This supports several layout options (simple to advanced), with additional space for links and content.
Adjusting this Fat Footer Container, sites can have a 'simple' or 'enhanced footer,' plus an optional 'fat footer,' with the simple or enhanced footer displayed at the bottom of the page just above the mandatory UBCMS system-wide footer.
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). The optional 'fat footer' allows multple columns that typically link clusters and a groups of social media buttons.
Jakob Nielsen's post "Footers 101" provides a handy overview including tips and shortfalls.
To meet accessibility requirements, every page must have an H1 heading (e.g. using the Title component).
Sometimes it is preferable for stylistic reasons not to show the main heading, especially on a home page. In such cases, a Properties setting allows the Header container to instead supply the 'Heading 1' title, and be visible to assistive technology such as screen readers.
Best practice: only a developer should modify the standard UBCMS code or styling, and any adjustments should be made thoughtfully, with regard for accessibility and long term maintenance.
Authors are responsible for any third party content that is hosted or linked from their UBCMS pages.
This includes applications such as Formstack forms and Google Maps, that are displayed using their own component, as well as entries from UB's Calendar of Events, and external content hosted using HTML Snippet or External Embed.
Best practice: for Formstack forms, avoid using the date picker and the 'other' option in dropdowns.
Best practice: for the HTML Snippet and External Embed, always run an accessibility test (e.g. using a browser extension), check its behavior in mobile, and consider how it may impact page performance in general.
Best practice: a special 'div' (e.g. the divisioned area created by an HTML Snippet) must have an identifying label, often coded as a 'title', that assistive technology can see. Formstack produces a title automatically, although it is poorly worded, but other applications tend to skip this requirement so it must be added manually on your end.
If you have concerns that external vendor content is not accessible, please contact UB's Web Accessibility officer.