Add custom CSS to an IU Web Framework site

On this page:


Overview

The IU Web Framework allows website developers to add custom Cascading Style Sheets (CSS) to a website created with IU's Web Content Management System (WCMS). As a website developer, you can use this custom CSS to adjust the IU Web Framework's built-in styles or to add new styles to support custom sections.

Important:
The following instructions assume you are familiar with writing CSS and using Cascade CMS's advanced code editor. To learn more, see Hannon Hill's documentation on writing code in Cascade CMS.

Add your custom CSS to site.css

Each IU Web Framework site comes with an _assets/css/site.css file in which you can write any custom CSS needed for your website.

Styles declared in this file take precedence over the IU Web Framework's built-in CSS styles.

Note:
While the IU Web Framework allows you to add custom styles to your website, keep in mind that all IU websites must adhere to the branding guidelines described in the Web Style Guide and the accessibility requirements described at accessibility.iu.edu.

Available fonts

The following IU-branded web fonts are available for use in your site.css file:

  • BentonSans: normal, bold
  • BentonSansCond: normal, bold
  • BentonSansLight: normal (no bold variant)
  • GeorgiaPro: normal (no bold variant)

Example use

/* Benton Sans normal */
.some-class {
  font-family: 'BentonSans', sans-serif;
  Font-weight: normal;
}

/* Benton Sans bold */
.some-class {
  font-family: 'BentonSans', sans-serif;
  Font-weight: bold;
}

/* Benton Sans Condensed normal */
.some-class {
  font-family: 'BentonSansCond', sans-serif;
  Font-weight: normal;
}

/* Benton Sans Condensed bold */
.some-class {
  font-family: 'BentonSansCond', sans-serif;
  Font-weight: bold;
}

/* Benton Sans Light normal */
.some-class {
  font-family: 'BentonSansLight', sans-serif;
  Font-weight: normal;
}

/* Georgia Pro normal */
.some-class {
  font-family: 'GeorgiaPro', Georgia, serif;
  Font-weight: normal;
}

CSS classes in use

The IU Web Framework makes frequent use of the CSS classes listed below when styling built-in elements like headers, footers, sections, and chunks.

Avoid using these CSS class names in custom elements you add to your website (like custom sections) unless you intend to use the IU Web Framework's built-in styles for these elements.

Likewise, avoid redefining these CSS classes and take care when overriding or adding to the styles defined by them, as this can have a significant (and unintended) impact on the appearance of your website.

  • .site-header
  • .section
    • .collapsed
    • .extra-space
    • .bg-none
    • .bg-gray
    • .bg-secondary
    • .bg-dark
    • .bg-mahogany
    • .bg-crimson
  • .row
  • .layout
  • .button
  • .belt
    • .social (social media icons in the belt)
  • .skirt
  • .external (applied by the IU Web Framework to external links)
  • .visually-hidden
  • .show-for-sr
  • .landmarks

HTML element IDs in use

The IU Web Framework applies CSS styles to elements with the IDs listed below. Take care when overriding or adding to the CSS styles applied to elements with these IDs, as this can have a significant (and unintended) impact on the appearance and behavior of your website.

HTML element IDs must be unique to a page, so avoid using these IDs for custom elements you add to your website.

  • #home
  • #header
  • #skipnav
  • #branding-bar
  • #toggles
  • #search
  • #nav-main
  • #content
  • #footer
  • #offCanvas

This is document aung in the Knowledge Base.
Last modified on 2023-07-17 14:53:21.