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.
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 - No Sidebar||1140x495||--||--||--||--|
|Two Tile - No Sidebar||730x459||730x668||--||--||--|
|Three Tile - No Sidebar||1140x495||568x568||568x568||--||--|
|Four Tile - No Sidebar||730x679||730x403||363x274||363x274||--|
|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:
- Go to Content ⇒ Pages
- Check out and open your props.pcf file and click the "Properties" tab
- Under Page Parameters, scroll down until you see a sub-section called "Social Icons"
- 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.
- 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.
- 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.
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.