Skip to main content

Bootstrap Template

This guide will help you install and configure OSU's responsive theme and introduce its features. Please refer to the OmniUpdate Guide for basic Omni tasks such as creating content, menu items, etc.


Features

Tiles Region

Tiles region, 5 tiles, default images and text

The tiles feature replaces the slider from the previous templates. This feature provides the same functionality in a more accessible and user-friendly format. The tiles region can contain up to 5 slides. Each number of slides has a different layout and different image requirements. Refer to the table below for more information. 

Managing the tile feature is identical to managing the slideshow. You will enter a title, subtitle, and image on a page. Be sure to link each title to an external site or the Tiles Region will not display correctly.

Consult the table for the image dimensions needed for each tile in each layout. Image dimensions are based on the largest size a tile would output for any screen size.

Layout Tile 1 Tile 2 Tile 3 Tile 4 Tile 5
One Tile 730x317 -- -- -- --
One Tile - No Sidebar 1140x495 -- -- -- --
Two Tile 730x459 730x668 -- -- --
Two Tile - No Sidebar 730x459 730x668 -- -- --
Three Tile 863x375 430x430 430x430 -- --
Three Tile - No Sidebar 1140x495 568x568 568x568 -- --
Four Tile 730x679 730x403 363x274 363x274 --
Four Tile - No Sidebar 730x679 730x403 363x274 363x274 --
Five Tile 730x459 397x363 363x363 469x363 363x363
Five Tile - No Sidebar 730x459 463x423 363x363 469x363 363x363

Responsive Social Media Icons

This feature standardizes social icons across OSU's sites. The left side navigation displays your social links in the left sidebar along with any other links you'd like to include. If the left side navigation is turned off for a particular page, your social icons will not display.

To configure your social accounts:

  1. Go to Content ⇒ Pages
  2. Check out and open your props.pcf file and click the "Properties" tab
  3. Under Page Parameters, scroll down until you see a sub-section called "Social Icons"
  4. All social icons are visible by default. Simply uncheck the ones you wish not to display and update the links to include your department's specific social media site.
  5. Click "Save" and "Publish"

Using the Bootstrap Grid

Bootstrap layouts are based on a grid consisting of 12 total columns. Predefined CSS classes tell your block how many columns it can occupy. If your block does not use all 12 columns, the next element will display beside it creating columns.

For example:

  • Adding a single block that uses all 12 columns would result in 1 column: 1 block x 12 columns = 12 total columns.
  • Adding 2 blocks that use 6 columns each will result in 2 equal columns: 2 blocks x 6 columns = 12 total columns.
  • Adding 3 blocks that use 4 columns each will result in 3 equal columns: 3 blocks x 4 columns = 12 total columns.

For a cheatsheet with additional layout examples, refer to the official bootstrap documentation.

Mobile First

The Bootstrap grid system is designed to be mobile-friendly out of the box. Sometimes, you might want your page to take up the full width of a phone, but to be 1 of 3 columns on the desktop layout. Bootstrap classes can be combined to create this effect. In the current Omni theme the small, medium and large breakpoints have roughly the same screen real estate. It is usually enough to have one class for the phone and one class for everything else. If your page does not have settings for a break point, it will use the settings for the next smallest break point. For example, if a page only has a phone class and a tablet class, the desktop layout will use the tablet class.



SVG directory not found.