Skip to content Skip to navigation

Introducing our new Drupal 7 theme, Stanford Light

We are excited to announce the release of a new mobile-responsive, Drupal 7 theme, Stanford Light, available now to all users on Stanford Sites. Stanford Light is a new, flexible theme that allows you to easily customize the look-and-feel of your site using several new theme options. In this post I'll walk you through how to customize Stanford Light on your Drupal site.

Who is Stanford Light for?

Stanford Light gives you seven different visual styles and three font families to choose from. All colors and fonts are variations on those recommended in the Stanford Identity Toolkit, but the theme does not include the Stanford brand bar, Stanford universal footer, or Stanford logo. This lets you have a Stanford "feel" without the presence of Stanford branding elements. Because of this, Stanford Light is ideal for personal websites, student group websites, and websites that do not require Stanford branding but still want the look and feel of a professional Stanford website.

Get Stanford Light for your Drupal site

If you would like to enable Stanford Light on your Stanford Sites website, visit the Appearances admin page and enable and set to default. As of September 2014 Stanford Light is now the default theme enabled for newly requested personal and group sites on Stanford Sites.

Spiffy theme options

Once you have the Stanford Light theme enabled and set to default on your Drupal site, go to Appearance > Settings > Stanford Light. Here you will see a myriad of theme options that let you choose whether or not to show the logo, site name, site slogan, etc. For now, we are going to skip down to the section Customize Design.

In the Customize Design section, you can choose from seven visual styles, three font families, and decide whether to enable a global thin red bar at the top of your page. Demo these options live at the Drupal Themes website.

Stanford Light - example 1Stanford Light - example 2Stanford Light - example 3Stanford Light - example 4

Examples of design combinations you can create with Stanford Light

 

If you want to add some splash to your website, consider adding a background image to your header. To do this, find the Header Background section of the theme options and upload your custom image. Make sure your image works as wide and short, and make sure the file is at least 1200px wide for optimal image quality. In the settings, you can choose whether you want your image to stretch to fill the available header space (recommended for big images), or tile as wallpaper (recommended if you are making a patterned background). You can also choose the color of the Site title text that overlays on top of the image. If your image is dark, choose light header text color. If your image is light, choose dark header text.

In addition to adding a header background image, you can also add a body background image in the Body Background section of the theme options.

Stanford Light - example 5

Example of custom header and body background images

 

There are many other theme options you can explore with Stanford Light, including adding border styles to blocks and containers and hiding and showing breadcrumbs and page titles.

Demo time!

To preview the theme options available in Stanford Light, visit http://drupalthemes.stanford.edu/stanford-light. Use the sidebar block to preview different combinations of theme options.

Questions?

If you have any questions regarding this new theme, contact us via HelpSU at http://helpsu.stanford.edu/helpsu.cgi?pcat=webdesign and we will respond as soon as possible.

Categories: 
Tags: