Skip Navigation
Oklahoma State University

Drupal Responsive Guide

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

Important - Read First

Upgrading from older themes to the new responsive theme is meant to be easy. We have reused many of the features and processes that you are already comfortable using. Yet some of the new features are not backwards compatible. Once you have enabled the new theme you will not be able to switch back to the old themes. 

For complex sites, we recommend updating a staging site and pushing the changes to your live site. For more information on this, please contact OSU Communications.

Installing the Themes

The OSU Responsive Migration module facilitates the installation and configuration of the new theme. This module enables the new theme, its features and remaps your content blocks to new regions.

To install the themes:

  1. Click Modules in the administration toolbar, and find the section labeled Oklahoma State University.
  2. Check the box to enable the OSU Responsive Migration module. Scroll down to the bottom and click save. This process is not reversible. Do not enable this module on your live site until you have tested and are comfortable with the changes.
  3. Drupal will inform you that it needs to enable extra modules. These are required theme features, click continue to install them.
  4. Once the module finishes installing, your site should be using the new themes.

Features

Tiles Region

Sample tiles region showing 4 tile layout

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. Then use the Add to Homepage Tiles link at the bottom of that page to add a tile to the nodequeue.

A new content type 'Link' allows you create tiles that link to external sites.

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 N/A N/A N/A N/A
One Tile - No Sidebar 1140x495 N/A N/A N/A N/A
Two Tile 730x459 730x668 N/A N/A N/A
Two Tile - No Sidebar 730x459 730x668 N/A N/A N/A
Three Tile 863x375 430x430 430x430 N/A N/A
Three Tile - No Sidebar 1140x495 568x568 568x568 N/A N/A
Four Tile 730x679 730x403 363x274 363x274 N/A
Four Tile - No Sidebar 730x679 730x403 363x274 363x274 N/A
Five Tile 730x459 397x363 363x363 469x363 363x363
Five Tile - No Sidebar 730x459 463x423 363x363 469x363 363x363

Responsive Social Media Icons

Social Media Sidebar Example

This feature standardizes social icons across OSU's sites. This block displays your social links in the left sidebar. If there are no other blocks in the sidebar (such as a menu), this block will not display.

To configure your social accounts:

  1. Hover over the social media block in the sidebar, click the cog wheel that appears and choose 'Configure Block' from the dropdown.
  2. Make sure the "Use theme's social media integration block." is checked.
  3. Check the boxes for the accounts you would like to display and plug in the links to these pages.
  4. Uncheck any social platforms you do not wish to display.
  5. Click Save Configuration at the bottom of the page.

Homepage Bottom Region

Homepage bottom region example showing a three column layout

This region displays below the homepage tiles. Most of the time you will use this area by placing blocks in it. To create columns and ensure the content responds on different screen sizes use bootstrap classes on blocks placed in this region.

To add responsive classes to a block:

  1. Hover over the block you wish to edit
  2. Click the cog and choose configure block.
  3. In the CSS classes field, enter the bootstrap column classes you wish to use. 
  4. Click save block at the bottom of the page.

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 block 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 new 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 block does not have settings for a break point, it will use the settings for the next smallest break point. For example, if a block only has a phone class and a tablet class, the desktop layout will use the tablet class. 

Sample Usage

Let's assume we have 3 blocks in the content bottom region. We wish for each block to take up the full width on the phone, but only one-third of the page on other devices. The result is three blocks stacked on top of each other on a phone, but three side-by-side blocks in other layouts.

We would first tell each block to take up all the availalbe space on the phone by giving each of them a class of col-xs-12.

Then we would need to tell each block to take up 1/3 of the space at all the other breakpoints. 12/3 = 4 so we want each block to use 4 columns. We need to give each block an additional class of col-sm-4.

We do not need to set a additional classes for medium and large because they will default to using the small class.

In the above scenario, this is how the classes would look on each block:

Illustration showing classes of col-xs-12 and col-sm-4 in the CSS classes region of the block page.