Style Guide

This style guide for the CM Pros 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: CM Professionals, Inc.

Commonly known as: CM Professionals or CM Pros (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 CM Pros name for member profiles

CM Pros 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 CM Professionals as a collective singular noun. Thus CM Pros "is and does", not CM Pros "are and do."

Look and Feel

The graphic standard for the CM Pros 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. CM Pros 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 CM Pros, 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 CM Pros logo uses URW Grotesk in the colors specified below.

CM Pros - 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.cmprosold.org/images/Logo_eps.zip

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

Add CM Pros logo and link to your website

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



<a href="http://www.cmprosold.org"><img src="http://www.cmprosold.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.

 

Things to Buy

CM Pros merchandise
Help us spread the word with logo products from
cafepress.

CM Pros Merchandise shop

 

Volunteers

Volunteers needed!

CM Pros is looking for volunteers to help us with all the work that has to be done for this organisation.

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