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.
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.
accessibility.iu.edu
.
Available fonts
The following IU-branded web fonts are available for use in your site.css
file:
BentonSans
: normal, boldBentonSansCond
: normal, boldBentonSansLight
: 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.