Skip to Main Content

Gleeson Library Design System

Administration, layout, components, and content guide for the Gleeson Library website.

Stylesheets & Scripts

Custom CSS and JS, fonts, and icons.

Stylesheets and Scripts We Use

We use stylesheets and scripts to align the look and feel of the library website with the USFCA.edu site.

  • Google Fonts — Google Fonts provides access to free, open source fonts. We use Google Fonts to exactly the match the typography on the USFCA.edu site.
  • Font Awesome Icons — Font Awesome is a popular icon library. We pay for a Pro account, allowing us to use any icon on their site. Font Awesome icons closely match those used on the USFCA.edu site.
  • Custom CSS & JS — We use several custom CSS files to closely match the layout, navigation, components, etc. on the library website with the USFCA.edu site. We are in the early stages of testing and using custom JS scripts.
  • Favicons — Favicons are the small images/logos displayed next to page titles in the browser tab. We use the same USFCA logo favicons used on the USFCA.edu site.

Where They Are & What They Look Like

Where our stylesheets and scripts are and what they look like depends on the platform.

LibGuides, LibCal, and LibAnswers all include the same code for Google Fonts, Font Awesome, and Custom Global Styles. The remaining stylesheets and scripts are unique to each platform.

Where To Find It

Follow this path in LibGuides: Admin > Look & Feel > Custom JS/CSS > Custom JS/CSS Code

Note:

  • We maintain a unique custom stylesheet and unique scripts for LibGuides.
  • Favicons are managed separately in LibGuides, so are not included in the Custom JS/CSS Code field. Follow this path: Admin > Look & Feel > Header / Footer / Tabs / Boxes > Favicons
 

What It Looks Like


<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/6571d979a3.js" crossorigin="anonymous"></script>
<!-- Custom Global Styles (Header, Footer, Typography, Custom Components) -->
<link rel="stylesheet" type="text/css" href="https://libapps.s3.amazonaws.com/sites/9656/include/gleeson-global.css">
<!-- Custom LibGuides Styles -->
<link rel="stylesheet" type="text/css" href="https://libapps.s3.amazonaws.com/sites/9656/include/gleeson-libguides.css">
<!-- Custom LibGuides Scripts -->
<script type="text/javascript" src="https://libapps.s3.amazonaws.com/sites/9656/include/gleeson-libguides.js"></script>

Where To Find It

Follow this path in LibCal: Admin > Look & Feel > Code Customizations > Custom JS/CSS Code

Note:

  • We maintain a unique custom stylesheet and unique scripts for LibCal.
  • Favicons are included in the Custom JS/CSS Code field.
 

What It Looks Like


<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/6571d979a3.js" crossorigin="anonymous"></script>
<!-- Custom Global Styles (Header, Footer, Typography, Custom Components) -->
<link rel="stylesheet" type="text/css" href="https://libapps.s3.amazonaws.com/sites/9656/include/gleeson-global.css">
<!-- Custom LibCal Styles -->
<link rel="stylesheet" type="text/css" href="https://libapps.s3.amazonaws.com/sites/9656/include/gleeson-libcal.css">
<!-- Custom LibCal Scripts -->
<script type="text/javascript" src="https://libapps.s3.amazonaws.com/sites/9656/include/gleeson-libcal.js"></script>
<!-- Custom Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="https://libapps.s3.amazonaws.com/customers/3999/images/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="https://libapps.s3.amazonaws.com/customers/3999/images/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="https://libapps.s3.amazonaws.com/customers/3999/images/favicon-16x16.png"/>
<link rel="manifest" href="https://usfca.edu/sites/default/files/favicons/site.webmanifest"/>
<link rel="mask-icon" href="https://usfca.edu/sites/default/files/favicons/safari-pinned-tab.svg" color="#5bbad5"/>

Where To Find It

Follow this path in LibCal: Admin > System Settings > Look & Feel > Custom JS/CSS Code

Note:

  • We maintain a unique custom stylesheet for LibAnswers.
  • Favicons are included in the Custom JS/CSS Code field.
 

What It Looks Like


<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/6571d979a3.js" crossorigin="anonymous"></script>
<!-- Custom Global Styles (Header, Footer, Typography, Custom Components) -->
<link rel="stylesheet" type="text/css" href="https://libapps.s3.amazonaws.com/sites/9656/include/gleeson-global.css">
<!-- Custom LibAnswers Styles -->
<link rel="stylesheet" type="text/css" href="https://libapps.s3.amazonaws.com/sites/9656/include/gleeson-libanswers.css">
<!-- Custom Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="https://libapps.s3.amazonaws.com/customers/3999/images/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="https://libapps.s3.amazonaws.com/customers/3999/images/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="https://libapps.s3.amazonaws.com/customers/3999/images/favicon-16x16.png"/>
<link rel="manifest" href="https://usfca.edu/sites/default/files/favicons/site.webmanifest"/>
<link rel="mask-icon" href="https://usfca.edu/sites/default/files/favicons/safari-pinned-tab.svg" color="#5bbad5"/>

Storing Custom CSS & JS Files

The custom CSS and JS files we use for LibGuides, LibCal, and LibAnswers are maintained by the Electronic Resources & Systems department on LibGuides and GitHub.

LibGuides

Custom CSS and JS files stored in LibGuides are in production; any changes made to these files will be reflected on the live website.

Follow this path on LibGuides: Admin > Look & Feel > Custom JS/CSS > Upload Customization Files

The Include Code / URL field for each file is what we use in the Custom JS/CSS Code field for each corresponding platform.

Springshare Documentation

GitHub

Copies of our custom CSS and JS files are stored on GitHub.

University of San Francisco Logo

2130 Fulton Street
San Francisco, CA 94117-1080
415-422-5555

Follow Us

Copyright © 2025 University of San Francisco