Content area
Most pages on the website are content pages. For this reason, these pages have a clean, simple layout. Pages with siblings can have an optional sidebar, which appears on the right side of the screen. Pages without a sidebar are full-width.
Styling
The content area is white in order to increase text readability and to make the pages clean and modern. The white content area also contrasts with the dark header and footer.
A note on the content area styles: the body background color is blue and the content background color is white. This makes sure the blue behind the footer stretches all the way to the bottom of the window, even on pages with small amounts of content. If the body background color is white, the footer is only a thin blue strip with white below it.
Responsive behavior
Content pages don’t change drastically on small screens. Callout boxes (if present) stack vertically, and the sidebar moves below the other page content (the same as program homepages). No content is hidden when the screen size decreases (this is true across the entire website).
Development info
- Stylesheet location:
/_source/styles/base/_global.scss - Stylesheet location for sidebar:
/_source/styles/layout/_sidebar.scss - In Dreamweaver, use the template property
Layoutto determine if the page has a sidebar or not.two-colincludes the sidebar.one-coldoesn’t include the sidebar.
- In WordPress, check or uncheck the “include sibling navigation” option in the PCC sidebar settings box.
- View more information about the WordPress sidebar navigation in Spaces.
Pages with a sidebar
Most pages on the website have a sidebar. The sidebar includes sibling-level navigation and optional callouts.
Sidebar example
Full-width pages
Full-width pages don’t include the sidebar. They’re reserved for:
- bottom-level content pages
- site homepages
- custom-designed pages
If the page has sibling pages, it should have a sidebar in most cases.
Full-width examples
With page components
Plain text
