Department of Agency Name

IMPLEMENTATION GUIDE

OVERVIEW

There are two primary tasks in implementing the MONTANA.GOV template:

  1. Add code from the State Information Technology Services Division (SITSD) to receive template CSS and JavaScript and the page header, footer and background image
  2. Modify your existing markup if necessary

RECEIVING TEMPLATE RESOURCES

By working with these hosted resources, your site will stay consistent with other MONTANA.GOV sites and you will have access to the SITSD responsive design.

The template's CSS, JavaScript, and also the required header, footer and background images are provided through either SITSD hosted files or the Template Loader application. These resources are rendered on your site by including a call to the hosted files or customer-specific Template Loader URL in the <head> element of your web page or site template document, as follows:

<link href="//template.mt.gov/resources/template/template.css" rel="stylesheet" type="text/css">
<script src="//template.mt.gov/resources/template/template.js" type="text/javascript"></script>

Resources will be offered in packages clearly labeled for their business purpose. The base template resources will be contained in one package. Another package will, for example, include the style and script to enable an agency-specific option in the state website search form. The code for the optional agency footer content section is another example of a specific resource that customers can request.


MODIFYING YOUR MARKUP

If you are referencing the SITSD hosted files for template elements, use the following universal HTML markup within your pages. The browser-visible <body> section is shown below.

<body> <div id="template-header-wrapper"> <header id="template-header"></header> </div> <div id="template-page-wrapper">

AGENCY CONTENT GOES HERE

</div> <div id="template-footer-wrapper"> <footer id="template-footer"></footer> </div> </body>

If you are already using the Template Loader to receive template elements, you do not have to alter your existing markup. You may wish to, as this version of the markup does include a responsive design framework to render optimized website views for all user agents including tablets and smartphones.

More details are in this basic conversion guide for web developers (MS Word format).

MODIFYING YOUR MARKUP FOR DNN

If you are referencing the SITSD hosted files for template elements, use the following universal HTML markup within your skins. A section of the DNN skin is shown below.

<div id="template-header-wrapper"> <header id="template-header"></header> </div> <div id="template-page-wrapper"> <div id="pagecontent-wrapper">

AGENCY CONTENT GOES HERE

</div> </div> <div id="template-footer-wrapper"> <footer id="template-footer"></footer> </div>

IMPLEMENTING AGENCY SEARCH WITH THE TEMPLATE

The template allows for easy agency search integration. When Agency Search is enabled, an arrow appears on the template search to allow you to select where you want to search. The option will always have MONTANA.GOV first and any additional Agency Search listed below. To use this feature you only need to add one small snippet of javascript to each page you wish the agency search to appear.

MTGOV.addEvent(window, "load", function () advancedSearch.init([ {"id":"Your agency abbreviation", "gcs":"Your google custom search id"} ]); });

If you would like to implement multiple agency searches on the template then your javascript should look like this:

MTGOV.addEvent(window, "load", function () advancedSearch.init([ {"id":"Your agency abbreviation", "gcs":"Your google custom search id"}, {"id":"Second agency abbreviation", "gcs":"Second google custom search id"}, {"id":"Third agency abbreviation", "gcs":"Third google custom search id"} ]); });

The template takes care of everything else for you including adding the option to search all of MONTANA.GOV automatically.

CONSIDERATIONS

The template header Search form returns results for the full base Google custom search that includes all state websites. An optional search feature has been developed with a pop-down menu to filter the search results for specific agency.

The footer element is coded to a specific height to enable it to always render at the bottom of the page in all browsers and devices. Users may need to set their own height value if they need their footer to be taller, and may need to enable text wrapping on some footer elements.


Page History Link

You can include a link on your page that points to the Montana State Library's mt.gov Connect Web Archive. An example of this page history link can be found at the bottom of the Montana State Library home page. Use the following code to insert this link:

<a title="Get Webpage History" href="javascript:location.href='http://wayback.archive-it.org/499/query?type=urlquery&url='+ document.location.href + '&dates=';">Page History</a>

MORE INFORMATION

We hope you'll enjoy working with the MONTANA.GOV template. For any questions, open a case to the SITSD Service Desk at http://servicedesk.mt.gov or call 444-2000 and one of our team members will help you.