• Setting site-wide narrowed width (applies to certain one column layouts, side-wide)
  • Considerations
  • Impacted page elements
  • Non-impacted page elements
  • Instructions
• Overrides for site-wide narrowed width
  • Setting a single page as full width (aka overriding narrowed width for a single page)
  • Setting an H1 page title to left aligned
• Adjusting content layout widths (applies to one, two, or three column content layouts)
  • Setting a single content layout to be full width
  • Setting a content layout at 800 or 1000 pixels
• Accessibility benefits

Setting site-wide narrowed width

The narrowed width Customizer option will change most one column page elements from a full width view (~1200px) to a narrowed view (~800px). This option enhances readability of the text and makes it more accessible.

Considerations

• The site-wide setting only impacts one column layouts.
• Two and three column layouts are not impacted.
• This change only impacts pages that use the UW Theme page builder (not posts, faculty/staff listings, publications, UW Events or other custom post types).
• H1 Page Titles will be center aligned (excluding Front Page and Blog Posts).
  • This can be overridden at the page level, if needed.
  • Also applied text-wrap: balance to the H1 to prevent lonely words that may wrap. This works on Chrome, Edge and Firefox. It does not yet work with Safari (more info).

Impacted page elements

This setting will narrow the width of the following page elements in a one column layout:

• Text blocks
• Tabbed content
• Accordions
• Featured content blocks
• Latest posts
• UW Events lists

Non-impacted page elements

The following will not be impacted by this setting: 

• Alternating content blocks
• Document lists
• Embed content (just the page element - if entered into a Text Block in a one column layout, the embedded content will narrow)
• Faculty staff lists
• Group of links
• Image and content carousel
• Image gallery
• Image only carousel
• Stylized quotes
• Today events lists

Instructions

To set the site-wide narrowed width option, please follow these steps: 

1. Navigate to Appearance > Customize
2. Click on Page Settings
   
   
   
   
3. Check the box
   
   
   
   
4. Publish the change

Overrides for site-wide narrowed width

Setting a single page as full width

In some cases, a group may want most pages on the site to have narrowed width but wish to keep one or two pages at full width view. 

In these cases, a custom class can be used to override the narrowed width styling at the page level: 

1. Navigate to the page you wish to augment
2. Locate the Page Builder Attributes box (off to the right of the page)
3. Copy the following class: uw-page-full-text



4. Paste into the Body Class CSS field
5. Publish the page

Note: This change will also left-align the H1 page title.

Setting an H1 page title to left aligned

In some cases a group may want to left align a page title perhaps due to the content directly above or below the title. 

In these cases, a custom class can be be used to override the narrowed center aligned H1 page title at the page level:

1. Navigate to the page you wish to augment
2. Locate the Page Builder Attributes box (off to the right of the page)
3. Copy the following class: uw-page-left-h1



4. Paste into the Body Class CSS field
5. Publish the page 

Adjusting content layout widths

The following options apply to one, two, and three column layouts in the UW Theme:

Setting a single content layout to be full width

In some cases, a group may want most content on the page to be narrowed but wish to keep a specific content layout at full width. 

In these cases, a content layout setting can be used to override the site-wide narrowed width setting:

1. Navigate to the page you wish to augment
2. Find the content layout you wish to make full width
3. Click on the gear icon in the top right corner of the content layout
   
   
   
   
4. Locate the Content width area of the content layout settings
5. Select the 1200px option
   
   
   
   

Setting a content layout at 800 or 1000 pixels

Like the full width option, groups may want to adjust the width of a single content layout. This option can either be used on its own or as an override for a single content layout while using the site-wide narrowed width setting:

1. Navigate to the page you wish to augment
2. Find the content layout you wish to adjust
3. Click on the gear icon in the top right corner of the content layout
   
   
   
   
4. Locate the Content width area of the content layout settings
   1. Select the 800px button to narrow the content layout to 800 pixels.
   2. Select the 1000px button to narrow the content layout to 1000 pixels.
      
      

Accessibility benefits

Narrowed widths can improve readability of text (including reading speed and comprehension) and are also a benefit to users with dyslexia.