Step 1

Download and extract the zip file to your web root directory (usually htdocs or wwwroot). If you want to run the template from a sub-directory you will have to update all root-relative references, for example:

<root/css/colorscheme-oceanside.css> to <root/your_sub_directory/css/colorscheme-oceanside.css>

Make sure your web server is configured to process SSI. It might be configured to process only files with certain file extensions such as .stm. In that case, you'll need to either name your pages with a .stm extension or configure your server to process .html as well.

Step 2 - Navigation Type

Select your navigation type:

Megamenu

<nav id="navigation" class="main-navigation megadropdown">

Dropdown

<nav id="navigation" class="main-navigation dropdown">

Single level

<nav id="navigation" class="main-navigation singlelevel">

Open /ssi/navigation.html and update line 8.

Step 3 - Color Scheme

Select a color scheme:

Oceanside

<link rel="stylesheet" href="/css/colorscheme-oceanside.css">

Orange County

<link rel="stylesheet" href="/css/colorscheme-orangecounty.css">

Paso Robles

<link rel="stylesheet" href="/css/colorscheme-pasorobles.css">

Santa Barbara

<link rel="stylesheet" href="/css/colorscheme-santabarbara.css">

Sierra

<link rel="stylesheet" href="/css/colorscheme-sierra.css">

Open head_css_js.html and update line 25.

Step 4 - Google Analytics

Open /ssi/analytics.html and insert your Google Analytics ID at line 4. Learn more about Google Analytics by visiting this page.

Step 5 - Header Images

Replace the sample /images/template2014/header-organization.png with your own logo and organization name. Replace /images/template2014/*(Chosen Color Scheme)/header-background.jpg with your own image. You can download a Photoshop template for the organization logo and name on the WebTools website.

If using the optional slideshow banner open /ssi/header-slideshow-banner.html and add your own images and captions. If NOT using the slideshow banner open index.html and delete the include reference on line 55.

The reference code will be:

<!--#include virtual="/ssi/header-slideshow-banner.html">

Step 6 - Search Format

By default the search field is smaller and located in the upper right corner of the site. The primary page templates (often the homepage) can have a large "Featured Search Box" in the center of the header. To enable this format open any page template and locate the following div:

<div id="head-search" class="search-container">

ADD the .featured-search class to the existing .search-container class:

<div id="head-search" class="search-container featured-search">

Step 7 - Search Engine

Create a search engine results page (SERP) or customize the sample serp.html found in the root directory. Open /ssi/search.html and enter your search engine ID at line 9 and line 21.

Open serp.html and enter your search engine ID at line 63. If you change the filename or location of your SERP page, you'll need to update search.js, line 6, with your new path.

Step 8 - Page Templates

There are four (4) master template page layouts to choose from. A pages layout can be controlled by applying two (2) classes to the <body> element. By default pages will have the smaller banner area and single column.

Adding a class of .primary will designate a landing page and use the taller header banner. Adding a class of .two-column will add a sidebar on the right side of the page. You are free to mix and match .primary and .two-column classes to achieve the layout desired. For an interactive demo please see the following sample page.

Step 9 - Icons (optional)

Replace the "favorites" icons with your own:

/images/template2014/apple-touch-icon-*(Various Sizes).png
/images/template2014/favicon.ico

Step 10 - Content

The /sample/index.html file contains links to examples of the new content styles as well as documentation and code that can be copied.

Custom CSS (optional)

The State Template Package has been compressed and optimized for better performance. This means that you will not see CSS files that are formatted in a standard and editable way as in the previous versions of the State Template.

For custom CSS on your website a custom.css file has been included in the /css/ directory. This file will not edit any original styles in the core template but only load on top of them in addition to any new styles you may add.


Problems?

We welcome your feedback and want to partner with you to continually improve the State Template to meets your needs. Please report any compatibility issues, bugs, or suggestions to info@eservices.ca.gov.