Style Guide

This style guide for the CMS Consultants website covers many areas, from outward appearance to the inner functionality needed to provide consistent behaviors for users over the several sections and subsections of the site.

Terminology and Branding

To protect our brand and foster brand awareness:

Official (legal) name: CMS Consultants, Inc.

Commonly known as: CMS Consultants or CMS Consultants (note space)

Tagline: The international content management community of practice

CONTENT MANAGEMENT PROFESSIONALS - subtext in the logo

cmpros (run together in lower case) - used in mailing list names, cmpros@lists.cmprofessionals.org and cmpros-org@lists.cmprofessionals.org

CM Profiles CMS Consultants name for member profiles

CMS Consultants Spring 2006 Summit - Spring 2006 Summit , Spring Summit.

Note: The occasional use of CMPros (run together) and CM Pro (or CMPro) singular should not cause a problem. Many people refer to us with these variants. We need Google searches to find us under these names, so we will add them to metadata keywords for expanded search queries. Note: Metadata should also include these variants to ensure successful searches.

Note the American style usage of CMS Consultants as a collective singular noun. Thus CMS Consultants "is and does", not CMS Consultants "are and do."

Look and Feel

The graphic standard for the CMS Consultants website is driven by style sheets for consistency in colors, fonts, and icons. The style sheets are discussed in the Cascading Style Sheets section.

Fonts

Our main font is arial,helvetica,sans-serif. Our logo font is URW Grotesk. CMS Consultants is Regular Narrow. CONTENT MANAGEMENT PROFESSIONALS is Medium Narrow. Both have some letters green, some blue.

Fonts are set using css selectors specific to function in the page. Menu fonts are specified with selectors menu ul li. The text font is arial,helvetica,sans-serif. The logo font is discussed in the logo section.

Colors

Search/Login bar Mid green = #71C04B (of )
Sections links - About CMS Consultants, etc. Medium blue = #307BB6

Logo colors are:

Green #73B42B
RGB: 115 / 180 / 43
PMS Uncoated: 376 U / Coated: 377 U

Blue #247DB3
RGB: 36 / 125 / 179
PMS Uncoated: 300 U
/ Coated: 2935 U

Logo/Graphics

The CMS Consultants logo uses URW Grotesk in the colors specified below.

CMS Consultants - URW Grotesk Regular Narrow, with CM in green and Pros in blue.

CONTENT MANAGEMENT PROFESSIONALS - URW Grotesk Medium Narrow, with CONTENT MANAGEMENT in green and PROFESSIONALS in blue.

Use of logo

The following guidelines establish consistent and appropriate use of the logo. Logos with transparent backgrounds are available anti-aliased against white and black backgrounds.

Color
Against a dark background
A gray scale version
Ad banner for reciprocal sites

Encapsulated Postscript files with vector versions of the logo are online at http://www.cmsconsultants.org/images/Logo_eps.zip

In this zip file you will find the CMS Consultants logo, a smaller variant, a member logo, and a greyscale variant of the CMS Consultants logo.

Add CMS Consultants logo and link to your website

When using the logo on your site, add the accompanying HTML code to create a link to the CMS Consultants website:



<a href="http://www.cmsconsultants.org"><img src="http://www.cmsconsultants.org/images/smaller.gif" title="Content Management Professionals" border="0"></a>

If your site has a dark background, change the name of the image source to 'smallerblack.gif'.


Navigation

The styles used in navigation differ with the type of navigation. For navigation functionality, see the discussion of navigation design.

Global top navigation

Local left navigation

Contextual navigation

Breadcrumbs navigation


Naming Folders and Files

In the original website, templates had names with initial lower case and then medial caps, e.g., howToJoin.html.

The content element was then named howToJoinContent.html. This naming convention still applies in parts of the resources, events, education, and organization sections.

The new naming convention uses the folder as the fundamental reference. This allows other extensions to be appended in the future. Thus we have:

  • Folder name - how_to_join
  • Template file - /how_to_join/index.html
  • Content file - /how_to_join/content.html

Here's the folder and file structure for the new page "How Money Spent" located at /membership/how_money_spent/


Templates and content elements

Each page on the website is built with a template file (index.html), which contains the <html><head><title> preamble, an include file for the banner area with global top navigation (css links are here), an include file of menu items for the local left navigation, an include for the content element (content.html), an include for the footer navigation, and the closing </body></html> structure.

Steps to create a new page template and content element

Style Sheets

Our website has a number of different style sheets corresponding to the site architecture and the back-end intranet. They are currently located in different folders as follows:

  • /css/base_2004.css
  • /design/css/Content-types/base_2004.css
  • /design/css/Content-types/general_2004.css
  • /design/css/Content-types/members_2004.css
  • /design/css/Content-types/menu_2004.css
  • /design/css/v1.base.menu.css
  • /design/css/Content-types/home/base_2004.css (no longer in use)

We need a thorough review and consolidation of these stylesheets to make it easier to locate important rule sets and to make the site more consistent.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Technology

Editable content blocks
Visible only when you have logged in to our intranet, a yellow pencil in one corner and a page turning image
in another indicate that members with edit privileges can edit content elements on these pages.
See how to edit.

 

Volunteers

Volunteers wanted!

CMS Consultants is looking for volunteers.

To inquire about volunteer opportunities, contact the volunteer co-ordinator.