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:
- Click Modules in the administration toolbar, and find the section labeled Oklahoma State University.
- 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.
- Drupal will inform you that it needs to enable extra modules. These are required theme features, click continue to install them.
- Once the module finishes installing, your site should be using the new themes.
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 - No Sidebar||1140x495||N/A||N/A||N/A||N/A|
|Two Tile - No Sidebar||730x459||730x668||N/A||N/A||N/A|
|Three Tile - No Sidebar||1140x495||568x568||568x568||N/A||N/A|
|Four Tile - No Sidebar||730x679||730x403||363x274||363x274||N/A|
|Five Tile - No Sidebar||730x459||463x423||363x363||469x363||363x363|
Responsive Social Media Icons
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:
- Hover over the social media block in the sidebar, click the cog wheel that appears and choose 'Configure Block' from the dropdown.
- Make sure the "Use theme's social media integration block." is checked.
- Check the boxes for the accounts you would like to display and plug in the links to these pages.
- Uncheck any social platforms you do not wish to display.
- Click Save Configuration at the bottom of the page.
Homepage Bottom Region
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:
- Hover over the block you wish to edit
- Click the cog and choose configure block.
- In the CSS classes field, enter the bootstrap column classes you wish to use.
- 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.
- 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 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.
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: