Hero Shot Template

Also featured on:

This is the template created for the 2009 redesign of CA.gov. It is based on the standard state template and features a few additions:

  • Navigation tabs with background gradient.
  • A delay is added to the mouseout event of the nav menu to improve usability.
  • Banner with hero shot and carousel.
  • Content section with two fixed-width columns to the left and right, and three fluid-width columns in the middle.

How to Use the Template

Build a new site with this template

The zip file contains a complete copy of the template.

Use Homepage.html and Subpage.html as your templates.

Apply the template to an existing site

Copy the following files to your site:

  • csscarousel.css
  • csscolor_scheme_11.css
  • cssrotatingbanner.css
  • cssslideshow.css
  • images11*.*
  • imagescarousel*.*
  • imageshome*.*
  • imagesslideshow*.*
  • imagesstate_banners*.*
  • javascriptcarousel.js
  • javascriptnavigation.js
  • javascriptrotatingbanner.js
  • javascriptslideshow.js

You may use Homepage.html and Subpage.html as templates, or copy the html code from them for the features you want to implement in your pages.

Add the navigation mouseout delay

Copy navigation.js to your site, replacing the old one.

Hero shot only (slideshow)

Copy the following files to your site:

  • cssslideshow.css
  • javascriptslideshow.js
  • imagesslideshow*.*

Add the following lines to your page, between the <head> tags, after navigation.js.

<script type=”text/javascript” src=”javascript/slideshow.js”></script>

<link rel=”stylesheet” href=”/css/slideshow.css” media=”screen, projection, print, tv” type=”text/css” />

Add the following lines to your page where you want the slide show to appear.

<div id=”slide_show_container”>

<div id=”slide_show_images”>

<a href=”http://weconnect.net/”><img src=”/images/slideshow/01_weconnect.jpg” alt=”WEConnect” /></a>

<a href=”http://coolcalifornia.org/”><img src=”/images/slideshow/04_coolca.jpg” alt=”Cool California” /></a>

<a href=”http://www.parks.ca.gov/”><img src=”/images/slideshow/02_parks.jpg” alt=”California State Parks” /></a>

<a href=”http://www.mycali.ca.gov/” rel=”My Cali Youth Portal”><img src=”/images/slideshow/03_mycali.jpg” alt=”California Youth Portal” title=”California Youth Portal” /></a>

<a href=”http://www.edd.ca.gov”><img src=”/images/slideshow/05_edd.jpg” alt=”Employment Development Department” title=”Employment Development Department” /></a>

<a href=”http://ads.bridgetrack.com/cttc/_redir.htm?BTData=40C0074696E6F684C55494BB1B9A1A0B49B968380F6EEF7E4E6D8DCD7D025A0A131F”><img src=”/images/slideshow/06_visitcalifornia.jpg” alt=”VisitCalifornia.com” title=”VisitCalifornia.com” /></a>


<p id=”slide_show_controls”>

<a href=”#” onclick=”SlideShow.fControl(‘prev’);this.blur();return false;” id=”slide_show_control_prev”></a>

<a href=”#” onclick=”SlideShow.fControl(‘play’);this.blur();return false;” id=”slide_show_control_play”></a>

<a href=”#” onclick=”SlideShow.fControl(‘next’);this.blur();return false;” id=”slide_show_control_next”></a>



You may replace the images and links with your own.

Rotating banner only

The rotating banner is available as a separate download here.


Submit a Comment