Site Style Guide

HTML Style Elements

CSS separates content from presentation. The vast majority of presentation effects (e.g. background colors, borders, colors, columns, font type, font-size, layout, line height, margins, etc.) of page elements (including headers, subheaders, paragraphs, lists, links, etc.) are determined by the theme CSS files.

Below are the “semantic HTML elements” for your website. Check the source code, via the “Text” tab on the right side of the Page Editor, to see embedded elements within paragraphs.

---

Fonts: Avenir, sans-serif

Heading 1: 36 pixels, bold weight, Avenir 95 Black

Huge Text for short emphasis: 32 pixels

Large Text for emphasized introductions and improved color contrast: 24 pixels

Heading 2: 26 pixels, bold weight, Avenir 95 Black

Lorem ipsum paragraph: 18 pixels, Avenir 45 Book
You can create a non-breaking paragraph (no bottom margin) by holding down the Shift key while pressing Enter/Return.

Heading 3: 24 pixels, bold weight, Avenir 95 Black

Heading 4: 21 pixels, normal weight, Avenir 95 Black

---

This is bold, or strong, text. Nullam dignissim convallis est. Quisque aliquam. This is emphasized, or italicized text. 53 = 125. Water is H²O. Underline – do NOT ever do that because underlines are reserved for links only!

---

List Types (in a 2-column block)

---

Details Block for accordion-style FAQs

Hidden content here

HTML Tables

Do NOT use HTML tables for layout purposes because they are not mobile responsive; use tables for columnar data only.

Header 1	Header 2
Division 1	Division 2
Division 1	Division 2
Division 1	Division 2

Blockquotes

Be sure to style the citation via the Text/HTML tab.

Hoosier marketer? A CSS superman – faster than a 500 Kb page load and able to leap long URLs. He hails from Indiana, the home of General Knight. With his four sidekicking hens, he now guards his Morgan Junction office in West Seattle, Washington.
Scott Marlow –

Pullquotes

Hoosier marketer? A CSS superman – faster than a 500 Kb page load and able to leap long URLs. He hails from Indiana, the home of General Knight. With his four sidekicking hens, he now guards his Morgan Junction office in West Seattle, Washington.
Scott Marlow –

Links

Active links are automatically black and underlined.

Legacy Method to create a Call-To-Action link by adding a style class of “button” the link html – see below:

Editable Button Link

<a href="https://marlowfive-0.com" class="button">Editable Button Link</a>.

Although PDF documents can open in new windows, to adhere to accessibility and usability guidelines links to other sites and pages should never open in new windows.

Colors

The colors used in the site theme are listed below in their hex and RGB equivalents.

Web Content Accessibility Guidelines (WCAG) level AA requires a minimum color contrast ratio of 4.5:1 for normal text; and 3:1 for large text (19 pixels and bold; or 24 pixels)

Sound Generations

Purple Dark: #5d0e8b, rgb(94,13,139) color contrast: 11:1

Purple: #880364, rgb(136,0,99) color contrast: 9.4:1

Purple Light: #b00061, rgb(176,0,96) color contrast: 9.4:1

Orange Dark: #fa4c06, rgb(255,76,0) color contrast: 3.4:1 – must be 19 pixels AND bold, or 24 pixels, to meet WCAG AA

Orange: #fd8204, rgb(255,131,0) color contrast: 2.5:1 – fails to meet WCAG AA

Orange Light: #ff9e19, rgb(255,158,22) color contrast: 2.1:1 – fails to meet WCAG AA

Red: #d13138, rgb(209,50,57) color contrast: 5:1

Black: #000000, rgb(0,0,0) color contrast: 21:1

Lake City Seniors Color Palette

1. Orange: #DE7126, rgb(222,113,38)
2. Light Blue: hex #0099BA, rgb(0,153,186)
3. Dark Blue: #046A73, rgb(4,106,115)
4. Purple: #6F246B, rgb(111,36,107)
5. Green: #7CBA42, rgb(124,186,66)

Posts vs. Pages

The Blog page (Settings/Reading) publishes content from Posts, by default, in chronological order. Therefore, you do NOT edit the Blog page via Pages/Edit. Adding/Editing Posts automatically updates the Blog page.

File Block

Latest Posts Block

Posts should be used for multi-relational, categorical content, as well as any time-sensitive content. Posts can be used more dynamically throughout the site than pages.

Pages should be used for ‘static‘ content that does not need to be archived.

Page Attributes: Page Templates

Page layout can be changed by selecting 1 of 3 Page Templates from the Page Attributes/Template dropdown:

1. Default Template (includes right sidebar)
   The left main content area has a maximum width of 800 pixels
   The right sidebar has a maximum width of 418 pixels
2. Full-Width Template (no Sidebar)
   The full-width content area has a maximum width of 1,440 pixels
3. Programs & Services (TBD)
4. One Column
   A narrower single column template with a maximum width of 800 pixels

The site layout is mobile responsive, optimized for 1,440 pixel x resolution monitors. The site Theme (design) is a custom theme, based on _Underscores.

Each Multisite domain has a unique CSS class applied to its body HTML tag so that infinite custom styling can be achieved for each domain.

For example:

<body class="site-1">

Site IDs

• SoundGenerations.org: site-1
• LakeCity: site-4
• Ballard: 7
• Central: 8
• Sno-Valley: 9
• Southeast: 10
• Northgate: 11
• Shoreline: 12
• Project Enhance: 13
• Test: 14

Appearance: Widgets (header, ‘homepage’, sidebar, and footer)

“Widgets” can be used in 4 content Areas, and configured to show/hide on respective Pages/Posts/etc. via “Visibility”:

1. Header (Custom ‘Utility’ Menu)
2. Calls To Action (up to 4, or more, ‘boxes’ intended for homepage)
   Currently unused on soundgenerations.org
3. Right Sidebar
4. Footer (up to 4 ‘columns’ on desktop)

Only site Administrators can edit Widgets via Appearance/Widgets, from within the WordPress Dashboard.

Appearance: Menus

Each site has 3 custom navigation Menus that, by default, display in the header:

1. Main Menu (Primary) – configurable to emphasize or de-emphasize Published Pages, Post Categories, etc.
2. Social Media (Social Menu) – with up to 5 Custom Links to third-party social media sites
3. Utility (Utility) – with up to 4 Calls-To-Action links

Only site Administrators can edit Menus via Appearance/Menus, from within the WordPress Dashboard.

Media Library

The Media Library contains all your uploaded images and file documents (PDFs, .DOCs, etc.). Although images can be uploaded as any dimension, your custom WordPress theme provides 3 default sizes to maintain better brand consistency:

1. Thumbnail: 260 pixels wide x 260 pixels tall (max)
2. Medium: 300 pixels wide x 300 pixels tall (max)
3. Large: 982 pixels wide x 655 pixels tall (max)
4. Homepage (masthead) Images are 1350 pixels wide x 700 pixels tall – these images expand up to 1,600 pixels wide on larger desktop monitors; the height is flexible
   Administrators can edit Homepage images via Appearance/Header

Image settings can be configured by site Administrators via Settings/Media within the WordPress Dashboard.

The Media Library includes a Title and Alt Text associated with each image. The Title displays as a ‘tip’ when a visitor hovers over the image; the Alt Text is what screen readers ‘see.’

Youtube Block

Use semantic naming conventions for both the Title and Alt Text. For example, an appropriate Title might be: headshot: FirstName LastName; and appropriate Alt Text might be: FirstName LastName, headshot. Why list headshot first in the Title? Because that method allows all of your headshots to display in order in the Media Library, under headshot, instead of by name – making them easier to find.

User Roles

• Super Admin – somebody with access to the site network administration features and all other features.
• Administrator – somebody who has access to all the administration features within a single site.
• Editor – somebody who can publish and manage posts including the posts of other users.
• Author – somebody who can publish and manage their own posts.
• Contributor – somebody who can write and manage their own posts but cannot publish them.

Software Updates

Periodically, Automatic (the makers of WordPress) release feature updates. Super Administrators can update WordPress. Some updates includes security patches; these updates are more critical than feature-only updates.

Site Credits

Graphic Design: David Owen Hastings
WordPress Development: Scott Marlow

This site is powered by WordPress – an award-winning, open source, semantic Content Management System (CMS) used by over 80 million sites. WordPress powers 1 of every 5 new websites.

Help & Support

You can find support at wordpress.org (NOT wordpress.com, the free blog hosting platform). The most recent WordPress for Dummies book is also a good resource.

Developer Notes

• Never underline text that is not a link. Instead use bold or emphasis (italics)
• Use only lower case for all html tags and file names (like images and documents)
• Do NOT open links to other websites in new windows.
• Do NOT double-space after periods, colons, etc. Digital typesetting now handles the spacing after characters. Also, double spaces can create odd characters in HTML.
• Avoid the use of inline styles – like <span style=”color: #000000″>. Instead, create new styles in the CSS file to achieve new presentation effects
• For more precise control of layout, try editing within the HTML (“Text”) editor instead of the “Visual” editor.
• All headers and subheaders should contain some text, e.g. like a paragraph. Try not to follow a header directly by a subheader.
• Include alternate text for all images uploaded to the Media Library
• Be cautious of installing third-party Plugins (and Themes), which can contain code conflicts or malicious code that can break your theme design or site functionality. Deactivate and remove all unused Plugins and Themes to help secure your website.
• Admins, Editors and other users should always use secure passwords:
  10-character, alpha-numeric passwords with at least one uppercase letter and one special character are most secure.

Note: You may notice minor layout discrepancies between operating systems (PCs and MACs) and various browsers (e.g. Chrome, Firefox, Internet Explorer, Opera, Safari, etc.). This is due to how browsers render HTML and CSS; not all browsers, particularly older ones, conform to W3C specifications.