Web 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 drop down 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 drop down 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 drop down in the WYSIWYG. The Fourth Level Header provides yet another level to help break a page up into easily digested sections.
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.
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.
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 els 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
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.
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.