Making a Page Full Width

By default the main content column in the YaleSites 2016 Themes has a limit to the full width of the page to keep text heavy pages from overwhelming the page the site visitor. However, some pages may have a large table that needs to fill the width of the page. In order to create a page layout that spans the entire width of the page, you will need to create a Delta that eliminates that region and assign it to the specific pages using Context

Creating the Delta

In this example we are going to create a new Home Page layout that eliminates the Sidebar Second Region to create a full page width layout. Important Note: The Delta is associated with a specific Theme, so if you switch from Boxed to Wide, you must create a new Delta for the Wide theme.

  1. Go to Appearance > Delta > Add
  2. Enter a title (Full Width Wide Theme) and description - this will show up on the Delta listing. Be sure to be as specific as you want so you will know what each title is when interacting with other modules.
  3. Next, set which YaleSites 2016 Theme should be used as the basis for your Delta. 
  4. Select the Override all Values radio buttonfull width delta
  5. Click Save. You are brought to the Delta listing display.

Configuring the Delta

Now that your Delta is created, you need to configure Content Region and Zone settings. Click on Configure link in the row for the Full Width Delta you are configuring. Then:

  1. Click on Zone and Regions in the Vertical Tabs at the top of the configuration page. 
  2. Click on the Content Zone and click on Regions.
  3. In the Content area, change the Width to 12 Columns.
  4. Add full-width to the Additional region classes field.
  5. Set the Zone to None in the Sidebar First and Sidebar Second Regions.delta settings full width

Note: This will not work correctly if there are any sidebars, the page must only have a main content column that needs to be full-width. Do not use on all pages, only special pages that are set up for this with their own Delta theme settings.  

Assigning the Delta to Specific Pages with Context

Once you have created the Delta, you need to assign the pages that require Full Width. 

  1. Select Structure > Context > Add
  2. Add the Name and Description (shows up in the list of Contexts)
  3. Choose a condition and configure it.
    1. Choose Path to indicate the pages you want this Delta to display; use only the page URL, not the full domain (i.e. sitename.yale.edu) 
      Context Conditions
    2. Enter the URLs for the pages: i.e. about, contact, etc. 
  4. Choose a reaction and configure it.
    1. Choose Delta from the Add a Reaction drop-down to indicate which Delta should be used.
    2. Click on the Full Width Pages Delta radio button.

      Context Reactions