For the Web Theme template, there are 3 sub-brand logo lock-ups available to represent various areas across campus. Information about the different types of official UCSB logos and how they should be used can be found in the lock-up section of the Brand Identity site.
Newly created sites issued through the ServiceNow portal will receive a lockup from the Office of Public Affairs & Communications. You can also request an official logo lockup to use on your site, and our department will be happy to deliver those in a variety of formats for use in your digital and print materials.
Note: UCSB does not allow the use of unofficial or custom-designed logos in the header of UCSB websites.
Since all Web Theme sites use SVG as markup into the HTML, it's essential to have the necessary accessibility measures in place. Most measures, like color contrast for desktop and mobile, are already baked in. To ensure your lockups is accessible, make sure you have the following added to the SVG:
role="img" in the SVG tag.
aria-labelledby="departmentname" in the SVG tag.
A <title> tag with id="departmentname" that includes the department name, in order to link it to the aria-labeledby for a screen reader to read this alternative text, if it doesn't yet exist.
Download the svg file from the website. They are available in BOX or directly from the website at Content > Site Settings > Wordmark Lockup
Use any code editor to modify the svg file.
Edit the SVG file to include:
role="img" in the SVG tag.
aria-labelledby="departmentname" in the SVG tag.
A <title> tag with id="departmentname" that includes the department name, in order to link it to the aria-labeledby for a screen reader to read this alternative text, if it doesn't yet exist.
Completed example:
<svg role="img" aria-labelledby="departmentname"> <title id="departmentname">UC Santa Barbara Health and Wellness</title>
Log back into the Drupal website and remove the old SVG file by clicking the Remove button at Content > Site Settings > Wordmark Lockup
Upload the new svg
Clear the cache to see the changes.
TO VERIFY THE CHANGE : Open the DOM inspector by right clicking the logo and choose inspect. Verify in the DOM inspector that you see the new code with the role=img, aria-labeledby, and correct title tag with ID
For reference, the following sites that have recently updated their SVG lockups: