2010 State Template Help

This page is for webmasters who are converting their website to the California State template for the first time (or who are creating a new website). Please read the complete set of instructions below prior to making any changes.

  1. Create your test website.
  2. Download 2010 State Template Package (zip) – Unpack template package into the root directory such as htdocs.
  3. Configure web server to process SSI.
  4. Customize the templates.
    • BasicTemplate.dwt (1-column)
    • TwoColumns.dwt (2-column)
    • Ribbon.dwt (CA home page)

The template files have comment tags that include “Step ##” to help you find where to make modifications. For example, for step 1, open the file BasicTemplate.dwt and search for “Step 01” to find where to add the link to the CSS file.

Step 01

Filename: /Templates/BasicTemplate.dwt

Select your navigation type: Mega Drop-Down, Mini Nav or Single Level Nav

For the Mega Drop-Down or Mini Nav, use one of the following CSS files. For the Single Level Nav, leave this line blank.

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

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

Step 02:

Filename: /Templates/BasicTemplate.dwt

Select a color scheme:

Design01 (default) – Oceanside
Design02 – Sierra
Design03b – Santa Barbara
Design03g – Mount Shasta
Design03r – Paso Robles

<link rel=”stylesheet” href=”/css/design01.css” media=”screen, projection, print, tv” type=”text/css” />
<link rel=”stylesheet” href=”/css/design02.css” media=”screen, projection, print, tv” type=”text/css” />
<link rel=”stylesheet” href=”/css/design03b.css” media=”screen, projection, print, tv” type=”text/css” />
<link rel=”stylesheet” href=”/css/design03g.css” media=”screen, projection, print, tv” type=”text/css” />
<link rel=”stylesheet” href=”/css/design03r.css” media=”screen, projection, print, tv” type=”text/css” />

Step 03

Filename: /Templates/BasicTemplate.dwt

Select a footer with or without the dark curve container:

<link rel=”stylesheet” href=”/css/footer-with-dark-container.css” media=”screen, projection, print, tv” type=”text/css” />

<link rel=”stylesheet” href=”/css/footer-without-dark-container.css” media=”screen, projection, print, tv” type=”text/css” />

Step 04

Filename: /Templates/BasicTemplate.dwt

Select your navigation type:

/ssi/header.single_level_nav.html
/ssi/header.mininav.html
/ssi/header.megadropdown.html

<!–#include virtual=”/ssi/header.single_level_nav.html” –>

Note: Within the header files is two pieces of javascript code for Google Analytics. The first one is for state-wide analytics, so do not remove or change that. The second one is for your site only. You can either create your own Google account for this, or contact us to have a profile code set up for you.

Step 05:

Filename: /Templates/BasicTemplate.dwt

To add the dark container to the footer, insert an SSI link to /ssi/footer_1.html

If you want to use the TwoColumns.dwt or Ribbon.dwt templates, repeat steps 1-5 for those template files.

Step 06

Filename: /ssi/header.*.html (Open the file that you chose to use in step 4)

Update the links to header_ca.gov.png and header_organization.png according to the color scheme you chose (standard is using default color scheme “/design01/”).

/images/design01/header_ca.gov.png
/images/design01/header_organization.png

Replace design01 with: design01, design02, design03b, design03g, or design03r.

Replace the sample header_organization.png with your own.

Step 07

Filename: /ssi/header.*.html (Open the file that you chose to use in step 4)

Select your search form type:

/ssi/search.local_and_statewide.html
/ssi/search.local_only.html

<!–#include virtual=”/ssi/search.local_and_statewide.html” –>

Note: You will need a unique search engine ID to embed in the page. Submit a request to the OTech Service Desk if you don’t already know your unique search engine ID.

Step 08:

Filename: /ssi/search.*.html (Open the file that you chose to use in step 7)

Update the link to header_search_submitbutton.png according to the color scheme you chose.

/images/design01/header_search_submitbutton.png

Replace design01 with: design01, design02, design03b, design03g, or design03r.

The file search.local_and_statewide.html has two occurrences.

  1. Create a search engine results page.
  2. Populate new pages with content.
  3. How to highlight navigation items.
  4. Test and Validate. Run a website report to check for broken links, orphan files, missing attributes, etc.

Adding Custom CSS and JavaScripting

* If you wish to add additional styles/scripting to your agency’s website, you can do so by creating your own custom .css and .js files.

When creating your own files, please consider if they could also be helpful for other California agencies. If you feel they might be, please send your suggestions us for consideration.

0 Comments

Submit a Comment