This is H1 Title: 48pt = 64px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a.
This is H2 Title: 36pt = 48px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a.
This is H3 Title: 36px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a.
This is H4 Title: 36px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a.
This is H5 Title: 30px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a.
Paragraph Text
Font: Open Sans, sans-serif;
Color: #555555
Font-Size: 28px; (21pt)
Line-height: 42px or 1.5em
Image size = 350 px x 197 px
Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Etiam ac
velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Above is the space between paragraphs. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue. Proin ornare malesuada odio sed pulvinar. Donec faucibus velit sed nulla sodales et suscipit lectus placerat. Quisque quis gravida augue.
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue. Proin ornare malesuada odio sed pulvinar. Donec faucibus velit sed nulla sodales et suscipit lectus placerat. Quisque quis gravida augue.
Unordered List
- Bullet point as part of an unordered list
- Bullet point as part of an unordered list
- Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue.
When an ordered list reverts to paragraph style the spacing is what we see in this situation.
Unordered List (as links)
When an unordered list reverts to paragraph style the spacing is what we see in this situation.
Ordered List
- Numbered item as part of an ordered list
- Numbered item as part of an ordered list
- Numbered item as part of an ordered list
When an ordered list reverts to paragraph style the spacing is what we see in this situation.
Small Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada.
Links
Important Marketing Questions
Tables
For aligning text into columns:
Color Code |
Color Name |
Color Swatch |
#555555 |
Dark Gray |
|
#ebebeb |
Light Gray |
|
#777777 |
Medium Gray |
|
Colors
#ffd76d |
Yellow |
AAA |
#ffb800 |
Dark Yellow |
AAA |
#ffa63f |
Light Orange |
AAA |
#f0652f |
Orange |
AA |
#C45125 |
Burnt Orange |
AAA |
#94D5F3 |
Light Blue |
AAA |
#68bbe3 |
Medium Light Blue |
AAA |
#0e587a |
Dark Blue |
AAA |
#9CA6F2 |
Lavender |
AAA |
a:hover { color:#9da6f1; }
a:active { color:#0e587a; }
a:visited { color:#0e587a;}
Templates
Our Services Use “services” template
People We Serve Use “clients” template
Family Support Use “Support” template
Service Providers Use “providers” template
About Us Use “about” template
Images
The interior pages of the website have a
default image size in the banner at the top of the page.
- The size is 756 pixels wide and 425 pixels tall at 72 pixels per inch. Most original photos are bigger than the required size. If an existing photo or one provided is not large enough to be cropped to the correct size, find an alternate image. Smaller images are not allowed as a “featured image” on an interior page.
- If you do not know how to use tools to crop images ask for help or for someone to do the task for you. Incorrect sizing of images is not acceptable and is a violation of the design standards for this website.
- Always include description “alt” text when uploading an image to the Media Library.
- The Media Library has lavender and blue graphics with a watermark of the RCOC logo that can be used where a photo is not available or is not needed.
Setting correct height of the interior banner does not happen automatically
- Each page has “Description” field that can hold up to four lines of text that is displayed below the title in the top banner.
- If this field is left empty, it is necessary to add four “break” indicators: <br><br><br><br> — this will make the height of the photo and the banner approximately 360 px high.
- As an example, if the description was two lines of text, then three “<br>” would need to be added to get the height of the photo and the banner approximately 360 px high.
Images added to the “body text” area of the interior pages should be displayed at the full width of the page or slightly less than half the width of the page. Full width = 756 px and partical width = 350 px. Other widths, either less than 350 px or between 350 px and 756 px may create an unprofessional appearance for the website.
The banner image on the home page at 1920 pixels wide and 826 pixels tall at 72 pixels per inch. The smaller images on the home page are sized automatically from the interior page or news item displayed
The image next to the “Welcome” message is uploaded to the Welcome page as a featured image at 756 pixels wide and 425 pixels tall at 72 pixels per inch
Example: Full width of body text area (756 x 425)
Example: Display size 640 x 360 for interior Banner from 756 x 425 original