Hero Shot Template

Also featured on:

What's new

ca.gov screencap This is the template created for the 2009 redesign of the State Portal. 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.

Want to feature a hero shot on CA.gov's hero shot?

If so, you must prepare an image file 575 wide x 250 height and submit your request to info@eservices.ca.gov. Only photos will be accepted (no clipart, please). Include a timeframe for how long you would like your image to appear (if applicable).

How to Use the Template

Download the template here.

I want to build a new site with this template

The zip file contains a complete copy of the template.

Instructions for implementing the state template are available here. Use Homepage.html and Subpage.html as your templates.

I want to apply the template to an existing site

Copy the following files to your site:

\css\carousel.css
\css\color_scheme_11.css
\css\rotatingbanner.css
\css\slideshow.css

\images\11\*.*
\images\carousel\*.*
\images\home\*.*
\images\slideshow\*.*
\images\state_banners\*.*

\javascript\carousel.js
\javascript\navigation.js
\javascript\rotatingbanner.js
\javascript\slideshow.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.

FAQs

I only want to add the navigation mouseout delay

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

I only want the hero shot (slideshow)

Copy the following files to your site:

\css\slideshow.css
\javascript\slideshow.js
\images\slideshow\*.*

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>

	</div>

	<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>

	</p>

	</div>

You may replace the images and links with your own.

I only want the rotating banner

The rotating banner is available as a separate download here.