Basic Style Guide for Portland Meadows
Paragraphs and line breaks
Hey there! This page shows you the various styles to use when laying out content.
First things first: all paragraphs of text should be surrounded by "paragraph tags"
<p>This is an example paragraph with some <strong>bold text</strong></p>
You can, in the code view of the text editor, manually add these HTML tags, or you may add paragraph tags in the "rich text editor" mode by pressing "return". Or, if you don't need a new paragraph (which will add extra visual space) but just need something on a new line, you may use a "break tag" which looks like this: <br />. You can also get a break tag in the rich text editor mode by holding down "shift + return".
Important! make sure to only have one line break between paragraphs or extra paragraph tags will add extra empty space and things won't look consistent!
Important! make sure to NOT copy and paste directly from Microsoft Word or a similar program as the native formatting will be preserved. Either copy and paste and then highlight everything and click the "eraser" icon above to remove format, or copy and paste into "code mode" and switch back to "rich text" mode to format your text. You will need to do all text formatting within the CMS from scratch. This is very important to maintain the look and feel of the site.
<p class="intro">This is an example paragraph with a special treatment to make it larger and is used for an "introduction" to the page. To acheive this, add the class "intro" to the paragraph tag in code view.</p>
If you need a subheading, use h3 tags like this:
<h3>This is a subheading</h3>
For subheads, you may use the formatting dropdown and select "heading 3".
Now, there is another type of subheading you may use, which is larger and meant for use at the top of the page under the page title. It is an h2 tag with a special class applied to it like this:
<h2 class="subhead">This is a subheading</h2>
You will have to first highlight your text, and apply a "heading 2" style using the formatting dropdown. Then you will need to swith to "code mode" and add your class exactly as shown above. You can also copy and paste the example above directly into "code mode".
Now, if you need a list of items you will use a numbered or bulleted list with ordered or unordered list tags, respectively. Each list item will get list item tags. Here is an example:
You may, again, enter this code manually, or, in rich text editor mode, use the buttons for lists.
Here is what a styled list looks like:
- list item
- list item
- list item
There you go, have fun styling!
This is intro paragraph