Themes

Application: 
OSU Drupal 6

 

Themes are the "look and feel" of a site.  This includes everything from the font types and sizes used in headers or titles, background and foreground colors, the number and location of regions where blocks can be placed, even right down to the amount of space that exists before and after a paragraph.  Everything that relates to style and appearance is controlled by the theme.

The great thing about Drupal themes is that changing the entire look and feel of your site only takes six simple mouse clicks by a site administrator.

Drupal themes are not easy to build, though.  The development of a high-functioning, professional looking, and cross-browser compatible theme can also be quite expensive. In an attempt to minimize cost and maximize options, Central Web Services has teamed up with University Relations & Marketing/WebComm to create an interesting and varied collection of exceptionally customizable OSU-centric themes that promote the OSU Brand Identity Guidelines.

Common OSU Theme Elements

Application: 
OSU Drupal 6

There are some common elements in the Theme-specific settings that both OSU Standard and OSU Confident share.

OSU Confident
osu confident theme

OSU Standard
osu standard

 

Following are some general instructions regarding how to configure these settings.  The instructions apply equally to both themes.

 

 

Block Hoverlinks

Application: 
OSU Drupal 6

block hover links in upper right corner of block

Block hoverlinks are small, contextual links that appear when a permitted user passes a mouse over a hotspot on the block.  These links make configuring the block, or the menu or view related to the block, very fast and efficient by bypassing the typical navigation path to the appropriate configuration panel.

By default, when blocks are enabled and displayed on a site using OSU Standard or OSU Confident, the block hoverlinks should be enabled.

 

To turn these links off, or turn them back on if they have been turned off, just do the following:

Go to Admin menu > Site building > Themes > Configure > OSU Standard or OSU Confident.

Locate the Theme-specific settings field set and uncheck the Show block editing on hover check box, to turn off, or check it to turn the feature on.

Click the Save configuration button at the bottom of the screen.

show block editing on hover check box in theme settings

Breadcrumb Display

Application: 
OSU Drupal 6

Breadcrumbs are small navigational tools, typically found at the top of a web page, that display a path that the user has traveled into the website.

breadcrumb links at top of content area

The breadcrumbs displayed in an OSU Drupal 6 site are actually quite configurable.  Permitted users can add special characters as separators between links, append the current page to the breadcrumb trail, and even add external links at the beginning of the breadcrumb trail.

To configure the breadcrumb display, go to Admin menu > Site building > Themes > OSU Standard or OSU Confident.

Locate the Breadcrumb settings group in the Theme-specific settings fieldset.

breadcrumb settings inside of the theme-specific settings fieldset

Display breadcrumb field = Determines whether to display the breadcrumb at all.

Breadcrumb separator field = Allows a character to be placed in to act as a separator between breadcrumb links. Note: add a space before and after the character.

Show home page link in breadcrumb checkbox = includes or excludes home page in breadcrumb trail.

Append a separator to the end of the breadcrumb checkbox = includes or excludes a separator at the end of the breadcrumb trail.

Text in First Breadcrumb field = text to display for first breadcrumb.

Breadcrumb Prefix Text field = provides option to add an external link at beginning of breadcrumb, such as for a parent organization's web page.  Note: HTML is required here.

Post Information Settings

Application: 
OSU Drupal 6

Post information, in Drupal, is what would be considered a "by-line" in print media.  This information includes the username and creation date of the node.

post information example with username and date of post

Post information, by default, is set to display when a node is created, but it can be easily controlled via the Global Theme Settings of your Drupal site.

To change the appearance of post information, just do the following:

Go to Admin menu > Site building > Themes > Configure > Global settings.

In the upper right of the screen is a fieldset called Display post information on. To display a post setting on a particular content type, just check the content type you wish to display it on.  To hide the post settings, just uncheck the boxes.

When completed, make sure to click the Save settings button at the bottom of the screen.

global theme settings with emphasis on the display post information on fieldset

Please note that if a new custom content type is created, the post information settings will be automatically toggled on.  You will need to use the instructions above to turn it off.

Doug Fir

Assignment Info
Assigned To: 
fenns
Content Due Date: 
03/15/2013
Status: 
In Review
Application: 
OSU Drupal 6

The Doug Fir theme, designed by WebComm and engineered by Central Web Services, is the newest theme release for OSU Drupal 6.

This new theme retains many of the same configurable options as OSU Standard, but has some surprises of it's own.

The biggest benefit to using Doug Fir, is the fact that it's responsive.  What this means is that it's able to nicely adjust to a mobile layout, whether that mobile device is a tablet or a smart phone.

doug fir full size

 

doug fir tablet view

doug fir phone view

 

 

Switching to Doug Fir

Assignment Info
Assigned To: 
fenns
Content Due Date: 
03/15/2013
Status: 
In Progress
Application: 
OSU Drupal 6

Switching a theme isn't really very difficult if you're organized about it.  There are generally two main things you need to consider

  • Theme Configurations
  • Block Layout

By following the instructions contained within this section, you can actually configure everything behind the scenes on your production site and then just toggle a setting and switch your theme seamlessly.  Prior to beginning, you may want to review the Blocks and Themes sections of this manual.

If, however, your site happens to be a large, high profile site, such as a college site, a frequently visited service site such as admissions - or if you're just nervous about making a live switch like this - you may want to request a clone of your production site to be put into drupaldev to avoid any mishaps.  Please take into consideration that, if this option is taken, your live site will be blocked from any changes, probably for a couple of days, while we queue up the push to production.

Additionally, the following instructions are written regarding a switch from OSU Standard to Doug Fir, which have similar regional layouts.  If you're using an older OSU theme such as OSU Grey or Confident, you may want to request a development version of your site and experiment a little bit due to the fact that these older themes use a different type of regional layout than OSU Standard or Doug Fir.

So, keeping that in mind, let's take a look at the first thing we need to address, which are the theme configurations.

Theme Configurations

Assignment Info
Assigned To: 
fenns
Content Due Date: 
03/15/2013
Status: 
Assigned
Application: 
OSU Drupal 6

Doug Fir and OSU Standard have some shared configurations.  These configurations are first thing you'll want to adjust, so just do the following.

Go to Admin menu > Site building > Themes.

Locate the Doug Fir theme in the list and check ONLY the square enable checkbox.

doug fir row on theme configuration list

Scroll down and click the Save configuration button.

Scroll to the top of the page and first click the Configure tab.  After the Global configuration screen loads, click the OSU Standard tab.

click osu standard tab

Scroll to about midway down the screen and take a screen shot of the Theme Specific Settings for Standard so you have a reference.

screen shot of osu standard settings

Scroll back up to the top of the screen and click the Doug Fir tab.  Keep in mind that you haven't set Doug Fir as your default theme yet, so you're still seeing things with OSU Standard as the default theme.  This is normal.  You can actually configure any theme while using another theme as the default...the settings just won't show until you change the default theme.

click doug fir tab

It will be easiest for you if you open up your screen shot and resize your windows so that your configuration panel is open in one window and your screen shot is open in another one.  Place the two side-by-side, as shown in the picture below. If you want your Doug Fir settings to resemble your OSU Standard ones, the arrows shown below correlate the settings.  If you want your Doug Fir settings to be different, then adjust them as you wish.

site's doug fir theme settings side-by-side with screenshot of standard's theme settings

After all adjustments are made, make sure to scroll down and click the Save configuration button.

That's it for your theme configs, now we need to take a look at block layout and adjust it accordingly.

Block Layout

Assignment Info
Assigned To: 
fenns
Content Due Date: 
03/15/2013
Status: 
In Progress
Application: 
OSU Drupal 6

After your theme configurations have been addressed, you'll want to turn your attention to your block layout.  Doug Fir has some of the same regions as OSU Standard...in this case, the blocks will transfer over smoothly.

Some of the regions are different, though.  For example, in OSU Standard the large sidebar on the right hand side is named "Right Sidebar".  In Doug Fir, it's named "Primary Sidebar".  In cases such as this, when a theme is switched over, the blocks don't know where to relocate, so they disable themselves and remain disabled until you manually come in and relocate them.

We're going to show you an easy way that you can do this, which can actually be done behind the scenes on a production site.  Just do the following:

Go to Admin menu > Site buliding > Blocks.

Before Making Any Block Layout Changes

If you're using OSU Standard's header menu region, for whichever block that you're using within this area, you will want to go into that block's configurations and make sure that the block title field is hidden.  To change the block configuration:

Locate the header region.

Click the configure link for whatever block is within this region.  This will take you into the block's configuration panel.

click block configure link

Once inside the configuration panel, in the Block specific settings group:

Block title field = <none>

enter <none /> in block title field

Click the Save block button.  You will be returned back to the Blocks manager.

Block Layout

From inside the Blocks manager, re-lay out your blocks by doing the following:

Take a screen shot of the block settings.

screen shot of enabled blocks in block manager

Scroll up to the top of the screen and click the Doug Fir tab.

click the doug fir tab at the top of the screen

You'll see your theme change.  Please note that this is only to change the block layout.  Your site's theme has not actually changed for your audience.

It will be easiest for you if you open up your screen shot and resize your windows so that your configuration panel is open in one window and your screen shot is open in another one.  Place the two side-by-side, as shown in the picture below. If you want your Doug Fir layout to exactly match your OSU Standard layout, use the guide provided below to correlate your regions.

put site window next to screen shot window

After moving your blocks to the desired locations, make sure to click the Save blocks button.

You will not see an immediate change, because the final step we have to make is to change the default theme for the site.

Creating Columns in the Body Content Area

This little layout below has started increasing in popularity as of late.

Column 1

These columns were created within the main body content. This could be done on any page to achieve a multi-column layout.

Column 2

You can use the Bootstrap 'row-fluid' and 'spanx' classes to get a 2, 3, or 4 column layout.

Column 3

For now this requires typing in the HTML

Column 4

These columns were created within the main body content. This could be done on any page to achieve a multi-column layout.

 

And here's the code that makes it happen:

Please keep in mind that this works only with Doug Fir, which utilizes Twitter Bootstrap.  If you put it into OSU Standard it will not make columns until you switch to Doug Fir.

HTML to create a four column layout in the content area using the Doug Fir theme

<div class="row-fluid">

  <div class="span3">
    <h4>Column 1</h4>
    <p>These columns were created within the main body content. This
could be done on any page to achieve a multi-column layout.</p>
  </div>

  <div class="span3">
    <h4>Column 2</h4>
    <p>You can use the Bootstrap 'row-fluid' and 'spanx' classes to get a
2, 3, or 4 column layout.</p>
  </div>

  <div class="span3">
    <h4>Column 3</h4>
    <p>For now this requires typing in the HTML</p>
  </div>

  <div class="span3">
    <h4>Column 4</h4>
    <p>These columns were created within the main body content. This
could be done on any page to achieve a multi-column layout.</p>
  </div>

</div>


Another note on the 12 point grid system: the "span" numbers must add to
-you guessed it- 12.

<div class="row-fluid">

  <div class="span8">//content</div>

  <div class="span4">//content</div>

</div>

Would make a 2 column layout, with one content taking 66.6% (span8) and
the other tanking 33.3% (span4).
So you could do span6, span6 (for equal 2 columns). span4 span4 span4 (3
column, equal sizes) etc.

Again, it's a 12 point grid, as long as the numbers inside the <div
class="row-fluid"> add up to 12 you can create the columns you want, with
the desired widths.

Switch Default Theme

Assignment Info
Assigned To: 
fenns
Content Due Date: 
03/15/2013
Status: 
In Progress
Application: 
OSU Drupal 6

The final step to switching your theme from OSU Standard to Doug Fir requires you to set a default theme.  To do this:

Go to Admin menu > Site building > Themes.

Locate the Doug Fir theme in the list and click the radio button the Default column.

Click the Save configuration button.

select default for doug fir

And that's all there is to it.

OSU Standard

Application: 
OSU Drupal 6

OSU Standard is the default theme provided in our OSU Drupal 6 installation. This theme has been designed to complement the OSU Home Page in appearance and functionality.

OSU Standard is an ever-evolving, dynamic Drupal theme.  The goal of both Central Web Services and WebComm is to create a theme with a variety of different configurable options such as color palettes, icon sets, and theme setting options.  This way, our users have the ability to make a variety of customizations but are still guaranteed to be compliant with the OSU Brand.

OSU Standard with Feature Story Block
osu standard theme with feature story block included

 

Add Custom Google Analytics Code

Application: 
OSU Drupal 6

 

By default, all of our OSU Drupal sites use Google Analytics to gather data about site traffic. In this default, all OSU sites under oregonstate.edu have statistics available, which can be obtained via WebComm.

If you prefer to create and maintain a separate Google Analytics account for your organization, you can add custom Google Analytics tracking code to your OSU Drupal site, as follows:

Obtain the Google Analytics ID for your organization (this will require a separate Google account for your organization). Please note that after you create a Google Account and log in to Google Analytics, your sites Tracking ID will be on your Google Administrative Dashboard as well.

In your OSU Drupal site, using the OSU Standard theme, go to Admin menu > Site building > Themes > Configure > OSU Standard.

Scroll down the page to the OSU Theme Options fieldset and locate the Custom Google Analytics Tracking Code field.  Paste your Google Tracking ID into this field.

custom google analytics tracking code theme setting

Click the Save button at the bottom of the page.

Change Book Page Auto Navigation Display

Application: 
OSU Drupal 6

When a site makes use of the Drupal core Book module, one of the features of this module is the automatic display of navigational items that appear on the bottom of the book page.

full screen view of drupal node with auto book navigation at bottom

For parent book pages, a table of contents related to its child items are displayed.

For all book pages a "Previous, Next, and Up" navigation feature is included, which allows the audience to easily navigate through pages and sections of the book.

This feature is a normal, default feature of the Book module.

OSU Standard contains a toggle that provides site administrators the ability to turn this display off, if desired.  To toggle this feature off, simply do the following:

  1. Go to Admin menu > Site building > Themes > OSU Standard configure link.
  2. Once on the OSU Standard configuration panel, scroll down to the OSU Theme Options fieldset and check the Hide the book navigation links checkbox.
  3. Click the Save configuration button at the bottom of the screen.

steps to toggle the book navigation display off

From this point on, the automated book navigation at the bottom of the book page content will not display.

OSU Standard Theme Variants

Application: 
OSU Drupal 6

OSU Standard comes with several different color scheme/icon set options that can be used.  These options can be found by going to Admin menu > Site building > Themes > Configure > OSU Standard.

Locate the OSU Theme options group.

In the Color Scheme drop-down, select Marine Sciences.

The Select Background Image drop-down will appear.  Select an option from the drop down.

Click the Save configuration button at the bottom of the page.

osu theme options with marine sciences option in color scheme drop down box

Currently the available color scheme options are the OSU Standard default and the Marine Sciences scheme set.  New color scheme packages are currently in development.

the three variations in the marine color scheme package

Social Media Links

Application: 
OSU Drupal 6

OSU Standard makes it easy to show your social media networks as a clean, attractive collection via the Social Media Links configuration in the theme settings.

The configuration allows for links from the following social media networks:

  • Facebook
  • YouTube
  • Flickr
  • LinkedIn
  • Twitter
  • Google+

Setting this up couldn't be easier.  Just do the following:

Go to Admin menu > Site building > Themes > Configure > OSU Standard.

In the Social Media Links - Footer fieldset at the bottom of the page, simply paste the URL to your organization's social media presence in the appropriately labeled field.

Make sure to click your Save configuration button after adding your URL(s).


social media link fields in osu standard theme settings


social links including new google+ link

Your new links and their corresponding icons will then automatically show in the bottom left corner of your site.