Upgrading to Version 1.20

If you have already converted your website to the new State Template Version 1.0, or if you are in the middle of the conversion, please upgrade to Version 1.20 by following the instructions below. Please read the complete set of instructions before making any changes. Line numbers are provided for guidance, however, our numbers might vary from yours depending on the size of your window and whether or not you have added, modified, or deleted lines of code.

  • Download State Template Package¬†-V1.20 (zip) and save into a new folder separate from the website you are upgrading.
  • The javascript folder contains two files:
    • department.js
    • navigation.js.
  • Open “javascript” folder v1.20, copy both files inside this folder and paste into your website’s “javascript” folder. Replace older versions. If you have modified the previous “navigation.js” or “department.js,” please compare code and incorporate your changes into the new code.
  • In version 1.0 “deparment.js” was empty; version 1.20 contains the javascript needed for search. If you are not using the state’s search service you may delete code provided in department.js v1.20.
  • The CSS folder contains 17 files:

  • Open “css” folder, copy all files except for “ca_department.css” (see screenshot above) and paste into your website’s “css” folder. If you have modified any of the original css files, please compare code and incorporate your changes into the new code.
  • Regarding “ca_department.css,” this is your department stylesheet. You may add custom styles to ca_deparment.css. Version 1.20 has one change for this file. We removed the breadcrumbs style, lines 125-128 (approximately) in the original ca_department.css version 1.0 (see below). If you are planning on using breadcrumbs you may keep these few lines of code.
  • Lines 125-128 (breadcrumbs style in “ca_department.css” v1.0):

.breadcrumbs {


padding:5px 5px 5px 10px;


  • IMAGES Folder:Copy the “imagesca_master” folder v1.20 and paste into your images folder. Replace V1.0 “imagesca_master” folder. Please note that the state template package does not contain animated gifs. This new folder offers two options for the governor’s banner. The amber alert images are required for the new amber alert fluid module.NOTE: images/ca_department contains the “block_with_image_corners.gif” which you will need if you plan to implement the block with rounded cornersmodule.images/ca_master:
  • MASTER TEMPLATE: CAtemplate.html v1.20- Apply changes below to all related files or templates within your website. Please note that package V1.20 does not contain sample1.html, sample2.html, or sample3.html files. It contains the CAtemplate.html only. The screenshots below are from CATemplate V1.20, and they display what the final updated code should look like. Code to be updated is also provided in simple text below so you can easily copy and paste. Three sections have been updated in CAtemplate.html:
  • Line 30 in V1.0 (empty) –Version 1.20 contains the javascript needed for the search. If you are not using DTS site search service, you will not need to update this section.Add department.js (see screenshot of V1.20 below)<script type=”text/javascript” src=”javascript/department.js”></script>
      1. Fix IE bug – In version 1.0, there was an IE bug that caused the slanted shape on the left navigation to disappear at times. This issue is fixed with the new code. Switch order of </div> and comment, lines 116-117 in V1.0Version 1.0<!– End content –></div>Version 1.20 – Should be </div> before comment – See screenshot of V1.20 below</div><!– End content –><img src=”/images/ca_department/switch_line_order.gif” alt=”Movebefore comment (switch order of lines 116-117)” width=”375″ height=”155″ />Cannot find this line of code? Do you have a left include? Some webmasters have chosen to place this information inside a server side include.

      2. Amber Alert code – This section has changed from a solid graphic to a fluid design.Version 1.0(lines 157-165)<!– **************************************************************** –><!– Begin Amber Alert – Uncomment to turn on –><!–<div id=”amber_alert_on”><a href=”http://www.chp.ca.gov/html/amber-en.html”><img src=”images/ca_master/amber_alert_on.gif” alt=”Amber Alert is on. Please visit CHP’s website for more information” width=”580″ height=”57″/></a></div>–><!– End Amber Alert –><!– **************************************************************** –>Version 1.20 – (lines 169-173) – Screenshot below. Update to fluid Amber Alert code.<!– **************************************************************** –>

        <!– Begin Amber Alert – Uncomment to turn on –>


        <div id=”amber_alert_on”>

        <span id=”amber_alert_on_left”></span>

        <span id=”amber_alert_on_right”></span>

        <p><strong>Amber Alert is on</strong><br /><a href=”http://www.chp.ca.gov/html/amber-en.html”>Please visit CHP’s website for more information</a></p>



        <!– End Amber Alert –>

        <!– **************************************************************** –>


    Please note that we have also added width and height dimensions to the governor’s banner: width=”199″ height=”62″. If you choose to use the flex your power and amber alert logos provided in the template package, please note that the dimensions are: width=”234″ height=”60″.

    Finally, when you have completed updating your master file please remember to change the date and version number at the top of the document.

    <!– *********************************** –>

    <!– State of California master template –>

    <!– Version 1.20 –>

    <!– Last Updated 03/23/2007 –>

    <!– *********************************** –>

    See a Side-by-Side Comparison of Version 1.0 and 1.20 (pdf)

  • SSI folderHEADING v1.20Regarding “heading.html” – The top section of this file, relating to search and CA logo, has been updated. Please replace lines 1-to-40 (everything before the comment line introducing the tabbed navigation: <!– Begin Primary Navigation – Modify list to meet your needs –>). Replace with lines 1-35 from heading.html V1.20. Remember to restore your agency branding banner and accessibility page/link (view sample accessibility page).UPDATED SEARCH
  • Radio buttons were added to the search box to accommodate local and Statewide search.
  • The Office of Technology¬†offers all State departments a no-cost website search service utilizing the DTS Google Site Search service. The search include is called from line 19 in ssi/heading.html v1.20.<!–#include virtual=”ssi/search.html” –>After opening a Help Ticket with DTS, you will receive the parameters for “site”, “client” and “proxystylesheet”, which you will use to customize your “ssi/search.html” file.Open “ssi/search.html” and follow the instructions (commented out) within this file to update the parameters. The resulting code should look something like this:<input name=”site” value=”ca_webtools” type=”hidden” />

    <input name=”client” value=”ca_webtools” type=”hidden” />

    <input name=”proxystylesheet” value=”ca_webtools” type=”hidden” />
    If the search box does not appear, your server might not support server-side includes. Ask your web adminstrator to correct this.

    Or, if enabling SSI is not possible, do the following:

    1. Open the file “search.html”.
    2. Copy its contents and paste into “heading.html” between the Begin and End Search comments.
    3. Delete include statement.

    To hide the radio buttons and perform only local site search, comment line 46 in the /javascript/navigation.js file, like this:

    //radioContainer.style.display = “inline”;

    1. Run a website report to check for broken links, orphan files, missing attributes, etc.
    2. XHTML Validator
    3. CSS Validator


Submit a Comment