Website Style Guide
The following content outlines the best practices for using the CMS page editor. Under no circumstances should you copy and paste content from a word processor or existing internet page directly to the Pages WYSIWYG editor. When content is directly pasted from word processors or an internet page, the copy may retain its existing styling which will make it look different than the rest of the Website.
Header Styles
This is the Proper Styling for a Sub Title Header
The above title is created by selecting Heading 2 from the format dropdown in the WYSIWYG. The Sub Title Header provides an easy way to break your page up into Sub Sections.
This is the Proper Styling for a Third Level Header
The above title is created by selecting Heading 3 from the format dropdown in the WYSIWYG. The Third Level Header is used to separate sub sections with a clear sense of hierarchy within a Sub Section.
This is the Proper Styling for a Fourth Level Header
The above title is created by selecting Heading 4 from the format dropdown in the WYSIWYG. The Fourth Level Header provides yet another level to help break a page up into easily digested sections.
HTML Example (Headers):
<h2>This is the Proper Styling for a Sub Title Header</h2>
<h3>This is the Proper Styling for a Third Level Header</h3>
<h4>This is the Proper Styling for a Fourth Level Header</h4>
List Styles
An Unordered List
- This is an unordered list item.
- This is a second item.
- This is a third item.
- This is a list item that links back to this page.
An Ordered List
- This is an ordered list item.
- This is a second item.
- This is a third item.
- This is a list item that links back to this page.
HTML Example (Lists):
<h3>An Unordered List</h3>
<ul>
<li>This is an unordered list item.</li>
<li>This is a second item.</li>
<li>This is a third item.</li>
<li><a href="https://baystate.dev.fastspot.com/web-style-guide/">This is a list item that links back to this page.</a></li>
</ul>
<h3>An Ordered List</h3>
<ol>
<li>This is an ordered list item.</li>
<li>This is a second item.</li>
<li>This is a third item.</li>
<li><a href="https://baystate.dev.fastspot.com/web-style-guide/">This is a list item that links back to this page.</a></li>
</ol>
Paragraph Styles
Lorem ipsum dolor sit amet, velit jugis dignissim scisco typicus, feugait abico, vel in. Brevitas persto quidne feugait lucidus this is bold copy premo opes saluto. Vindico interdico ingenium macto hendrerit facilisi os typicus accumsan dignissim velit feugait adipiscing pagus autem. Proprius letalis exerci nisl facilisi, pala this is italic copy. Sit, blandit magna haero hos, pala minim. Enim tincidunt conventio macto abico delenit refoveo si nobis, quibus typicus rusticus. Gravis odio nutus ludus, inhibeo, importunus, nisl tamen nunc gemino, distineo in feugait ex. Accumsan nobis commodo consequat pagus ulciscor dolore.
Paragraph Sub Title
Paragraph subtitles can be made by bolding the title and then using a soft return (shift + return).
Dolor nostrud usitas facilisi commoveo paratus ille facilisi autem dolus eligo iaceo augue exputo. Mauris camur paulatim sagaciter defui typicus suscipit. Praesent roto ut multo quibus inhibeo autem, ne nimis torqueo ventosus vicis, nonummy ut.
HTML Example (Paragraphs):
<p>Lorem ipsum dolor sit amet, velit jugis dignissim scisco typicus, feugait abico, vel in. Brevitas persto quidne feugait lucidus this is bold copy premo opes saluto. Vindico interdico ingenium macto hendrerit facilisi os typicus accumsan dignissim velit feugait adipiscing pagus autem. Proprius letalis exerci nisl facilisi, pala this is italic copy. Sit, blandit magna haero hos, pala minim. Enim tincidunt conventio macto abico delenit refoveo si nobis, quibus typicus rusticus. Gravis odio nutus ludus, inhibeo, importunus, nisl tamen nunc gemino, distineo in feugait ex. Accumsan nobis commodo consequat pagus ulciscor dolore.</p>
<p><strong>Paragraph Sub Title</strong><br />
Paragraph subtitles can be made by bolding the title and then using a soft return (shift + return).</p>
<p>Dolor nostrud usitas facilisi commoveo paratus ille facilisi autem dolus eligo iaceo augue exputo. Mauris camur paulatim sagaciter defui typicus suscipit. Praesent roto ut multo quibus inhibeo autem, ne nimis torqueo ventosus vicis, nonummy ut.</p>
Link Styles
This is a paragraph that contains different kinds of links. This is a link to a page inside the Parks & People site. This is a link to a PDF document. This is a link to a PowerPoint document. This is a link to an Excel document. This is a link to a Word document. You can add these icons to your document links by clicking on the link in the WYSIWYG then clicking on the Insert/Edit anchor link, then clicking on the advanced tab and typing in the Classes field. Type pdf for a PDF; type ppt for a PowerPoint document; doc for a Word Document; and xls for an Excel Document.
Sometimes you need to add an External Link to your page. To add this icon to your link, click on the link in the WYSIWYG then click on the Insert/Edit anchor link, then click on the advanced tab and type external_link in the Classes field.
Unordered List with Links
HTML Example (Document Classes):
<ul>
<li>
<a href="https://baystate.dev.fastspot.com/Document.pdf" class="pdf">Adobe PDF Document</a>
</li>
<li>
<a href="http://www.web.com/Document.ppt" class="ppt">PowerPoint Document</a>
</li>
<li>
<a href="http://www.web.com/Document.doc" class="doc">Word Document</a>
</li>
<li>
<a href="http://www.google.com" class="external" target="_blank">External Link</a>
</li>
<li>
<a href="https://baystate.dev.fastspot.com/">Internal Link</a>
</li>
</ul>
Same Page Link Styles (Anchor Links)
Sometimes a page you have created is very long, or people may be coming to it for a very specific reason. If this is the case, you can create a special set of links that will jump to points that you specify on the page. These are called Anchor Links. We have used them on the top of this page so that it is easy to jump around the page. Below we have created a mock list of links. Below these links, we have created a back to top link that will jump back to the top of the Anchor Links.
HTML Example (Anchor Links):
<div class="container">
<div class="anchor_links">
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</div>
<div class="anchor_links">
<ul>
<li><a href="#link3">Link 3</a></li>
<li><a href="#link4">Link 4</a></li>
</ul>
</div>
<br class="clear"/>
</div>
These Must Link Somewhere
This HTML would be placed at the corresponding places on the page you want to
jump to:
<p>
<a name="link1">This is Link 1</a>
</p>
<p>
<a name="link2">This is Link 2</a>
</p>
strong><p>
<a name="link3">This is Link 3</a>
</p>
strong><p>
<a name="link4">This is Link 4</a>
</p>
Table Styles
| Data Type | Number | Letter |
|---|---|---|
| Data 1 | 1 | A |
| Data 2 | 2 | B |
| Data 3 | 3 | C |
How to Style Tables
To make a new table that is styled properly, you can either copy and paste the HTML from an existing table over to the page you need it to be and edit the content, or you can start fresh. We have a video explaining how to build a table from scratch on our Help Page.
We created the Table Title by selecting Header 3 for the title then eding the HTML by adding class="table_header" inside of the desired h3 tag.
HTML Example (Tables):
<h3 class="table_header">This is a Table Title</h3>
<table>
<thead>
<tr>
<th>Data Type</th>
<th>Number</th>
<th>Letter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>1</td>
<td>A</td>
</tr>
<tr>
<td>Data 2</td>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>Data 3</td>
<td>3</td>
<td>C</td>
</tr>
</tbody>
</table>
CSS Classes
.block_left
Sets an item to the left and creates some white space around the borders.
HTML Example:
<img src="https://baystate.dev.fastspot.com/files/pages/med_picture-8.png" alt="" class="block_left"/>
.block_right Sets an item to the right and creates some white space around the borders.
HTML Example:
<img src="https://baystate.dev.fastspot.com/files/pages/med_picture-8.png" alt="" class="block_right"/>
.anchor_links
Creates an unordered list without bullet points that is half the width of the content area.
HTML Example:
<div class="container">
<div class="anchor_links">
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="#link3">Link 3</a></li>
<li><a href="#link4">Link 4</a></li>
</ul>
</div>
<br class="clear"/>
</div>
These Must Link Somewhere
This HTML would be placed at the corresponding places on the page you want to
jump to:
<p>
<a name="link1">This is Link 1</a> <a name="link2">This is Link 2</a> <a name="link3">This is Link 3</a> <a name="link4">This is Link 4</a> </p>
.back_to_top
Creates a link with an arrow pointing up, to be used for in page links back to the top of the content.
Back to Top
HTML Example:
<p>
<a href="#top" class="back_to_top">Back to Top</a>
</p>
This Must Link Somewhere
This HTML would be placed at the top of the page:
<p>
<a name="top"></a>
</p>