Skip Navigation

Extension Web Templates and Style Guide

Web Style Guide

In an effort to move towards a uniform online brand, we have created a Web Style Guide. The Web Style Guide outlines the guidelines on each template and the options available. Please use this guide as a reference when using the HTML Templates or designing any new Extension website.

Includes:

  • Web Page Templates – Descriptions,  Guidelines and Branding Options.
  • Required Elements
  • Navigation Guidelines
  • Right Side Element Options and Guidelines
  • Colors, Fonts, and Wordmarks
  • Accessibility and Best Practices

Download the Web Style Guide (v1.1)

Web Contacts

If you have questions or would like assistance on:

  • Converting your website into the new design
  • Converting an existing site or building a new site in the Content Management System
  • Questions about the templates or Web Style Guide

Please contact Ann Greazel, agreazel@iastate.edu.

Drupal Content Management System (CMS)

The Extension web team is currently working on converting sites into our new content management system, Drupal using these templates. A content management system allows users that do not know HTML to edit content on a website and to easily make changes across an entire site such as menus, layout and dynamic content. If you are interested in using the content management system, please contact one of the web contacts listed above.

HTML/CSS Templates

For those that choose to build their own websites, we have provided the following HTML/CSS templates.

Design #1 – Red Bar with Tabs Template

Tabs Only OptionDownload Design #1-Option 1 (v 1.1)

  • Use when the site does not require a logo or certain colors to tie to a program or project brand.
  • Refer to the Web Style Guide for additional guidelines and options
Design 1 Option 1

Tabs with Left Navigation Option - Download Design #1 – Option 2(v 1.1)

  • To be used on sites that need further navigation under a dropdown menu section.
  • Refer to the Web Style Guide for additional guidelines and options
Design 1 Option 2

Design #2 – Red Bar without Tabs TemplateDownload Design #2 (v 1.1)

  • To be used on sites that would like left navigation vs horizontal navigation.
  • For those that want to be branded as Iowa State University (may also use the template provided by ISU)
  • Refer to the Web Style Guide for additional guidelines and options

Design 2

Design #3 – Small Red Bar TemplateDownload Design #3 (v 1.1)

  • Use when the site requires special branding to build a brand alongside ISU Extension and Outreach or to relate to a specific audience.
  • Refer to the Web Style Guide for additional guidelines and options

Version Updates

We will continue to make updates to the HTML/CSS templates. Please be sure you have the most recent version.

  • v1.1 - Added ISU link on wordmark, added print styles, fixed typo in footer
  • v1.0 - Implementing new design options
Design 3