-
Notifications
You must be signed in to change notification settings - Fork 0
/
Instructions.html
136 lines (99 loc) · 8.49 KB
/
Instructions.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if (gt IE 9)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Instructions - CA State Template</title>
<meta name="Author" content="State of California" />
<meta name="Description" content="State of California" />
<meta name="Keywords" content="California, government" />
<!--#include virtual="/ssi/head-css-js.html" -->
<script type="text/javascript">
var defaultActiveLink = "Instructions";
</script>
</head>
<body>
<header role="banner" id="header" class="global-header">
<div id="skip-to-content"><a href="#main-content">Skip to Main Content</a></div>
<!-- Include Branding -->
<!--#include virtual="/ssi/branding.html" -->
<!-- Include Mobile Controls -->
<!--#include virtual="/ssi/mobile-controls.html" -->
<div class="navigation-search">
<!-- Include Navigation -->
<!--#include virtual="/ssi/navigation.html" -->
<div id="head-search" class="search-container">
<!-- Include Search -->
<!--#include virtual="/ssi/search.html" -->
</div>
</div>
<div class="header-decoration"></div>
</header>
<div id="main-content" class="main-content">
<div class="wrapper">
<main role="main" class="main-primary">
<ol class="breadcrumb">
<li><a href="../index.html">Home</a></li>
<li><a href="index.html">Examples</a></li>
<li class="active">Instructions</li>
</ol>
<div class="group">
<div class="half">
<h2>Step 1</h2>
<p><a href="http://webtools.blogs.ca.gov/files/2015/04/CA_State_Template_v4.zip">Download</a> and extract the zip file to your <strong>web root directory</strong> (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: <p><code><root/css/colorscheme-oceanside.css></code> to <code><root/your_sub_directory/css/colorscheme-oceanside.css></code></p>
</p><p>Make sure your web server is configured to process <strong>SSI</strong>. 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.</p>
<h2>Step 2 - Navigation Type</h2>
<p><a href="/sample/index.html#navigation-samples">Select your navigation type</a>:
<p><strong>Megamenu</strong></p><p><code><nav id="navigation" class="main-navigation megadropdown"></code></p>
<p><strong>Dropdown</strong></p><p><code><nav id="navigation" class="main-navigation dropdown"></code></p>
<p><strong>Single level</strong></p><p><code><nav id="navigation" class="main-navigation singlelevel"></code></p>
<p>Open <strong>/ssi/navigation.html</strong> and update line 8.</p>
<h2>Step 3 - Color Scheme</h2>
<p><a href="/sample/index.html#color-schemes">Select a color scheme</a>:
<p><strong>Oceanside</strong></p><p><code><link rel="stylesheet" href="/css/colorscheme-oceanside.css"></code></p>
<p><strong>Orange County</strong></p><p><code><link rel="stylesheet" href="/css/colorscheme-orangecounty.css"></code></p>
<p><strong>Paso Robles</strong></p><p><code><link rel="stylesheet" href="/css/colorscheme-pasorobles.css"></code></p>
<p><strong>Santa Barbara</strong></p><p><code><link rel="stylesheet" href="/css/colorscheme-santabarbara.css"></code></p>
<p><strong>Sierra</strong></p><p><code><link rel="stylesheet" href="/css/colorscheme-sierra.css"></code></p>
<p>Open <strong>head_css_js.html</strong> and update line 25.</p>
<h2>Step 4 - Google Analytics</h2>
<p>Open <strong>/ssi/analytics.html</strong> and insert your <strong>Google Analytics ID</strong> at line 4.
Learn more about Google Analytics by visiting <a href="http://webtools.ca.gov/services/analytics/">this page</a>.</p>
<h2>Step 5 - Header Images</h2>
<p>Replace the sample <strong>/images/template2014/header-organization.png</strong> with your own logo and organization name. Replace <strong>/images/template2014/*(Chosen Color Scheme)/header-background.jpg</strong> with your own image. You can download a Photoshop template for the organization logo and name on the <a href="http://webtools.ca.gov/tools/state-template/2013-responsive-design/2013-organization-title/">WebTools</a> website.</p>
<p>If using the optional slideshow banner open <strong>/ssi/header-slideshow-banner.html</strong> and add your own images and captions. If NOT using the slideshow banner open <strong>index.html</strong> and delete the include reference on line 55.</p>
<p>The reference code will be:
<p><code><!--#include virtual="/ssi/header-slideshow-banner.html"></code></p>
</div> <div class="half">
<h2>Step 6 - Search Format</h2>
<p>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:</p><p><code><div id="head-search" class="search-container"></code></p><p>ADD the <strong>.featured-search</strong> class to the existing <strong>.search-container</strong> class:</p><p><code><div id="head-search" class="search-container featured-search"></code></p>
<h2>Step 7 - Search Engine</h2>
<p>Create a search engine results page (SERP) or customize the sample <strong>serp.html</strong> found in the root directory. Open <strong>/ssi/search.html</strong> and enter your search engine ID at line 9 and line 21.</p>
<p>Open <strong>serp.html</strong> 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 <strong>search.js</strong>, line 6, with your new path.</p>
<h2>Step 8 - Page Templates</h2>
<p>There are four <strong>(4)</strong> master template page layouts to choose from. A pages layout can be controlled by applying two <strong>(2)</strong> classes to the <code><body></code> element. By default pages will have the smaller banner area and single column.
<p>Adding a class of <strong>.primary</strong> will designate a landing page and use the taller header banner. Adding a class of <strong>.two-column</strong> will add a sidebar on the right side of the page. You are free to mix and match <strong>.primary</strong> and <strong>.two-column</strong> classes to achieve the layout desired. For an interactive demo please see the following <a href="/sample/page-templates.html">sample page</a>.</p>
<h2>Step 9 - Icons (optional)</h2>
<p>Replace the "favorites" icons with your own:</p> <p>/images/template2014/<strong>apple-touch-icon-*(Various Sizes).png</strong> <br> /images/template2014/<strong>favicon.ico</strong></p>
<h2>Step 10 - Content</h2>
<p>The <a href="/sample/index.html">/sample/index.html</a> file contains links to examples of the new content styles as well as documentation and code that can be copied.</p>
<h2>Custom CSS (optional)</h2>
<p>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. </p>
<p>For custom CSS required for your website a <strong>custom.css</strong> file has been included in the <strong>/css/</strong> directory. This file will not modify any original styles in the State Template but load on top of them in addition to any new styles you may add.</p>
<br>
<h2 class="alert alert-warning">Questions/Feedback?</h2>
<p>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 <a href="mailto:[email protected]">[email protected]</a>.</p>
</div>
</div>
<div>
</div>
</main>
</div>
</div>
<!--#include virtual="/ssi/global-footer.html" -->
<!--#include virtual="/ssi/scripts.html" -->
</body>
</html>