St Barnabas Website Style & How-To Guide

This page is intended as a cheatsheet for all those building, maintaining and adding content to the St Barnabas website.

Please use the guidelines here to keep the website looking sharp and consistent.   ok let's go

(Please add to this page)


  • Use "Heading 1" at the top of page to give the page title--this should match the title used in the menu
  • Use "Heading 2" for section headings in the page
  • Use "Heading 3" for any subheadings; writing should be concise, so there are never more than three levels of headings
  • Use "Normal" for typical reading text, in paragraphs and lists
  • When you copy/paste text from an outside source, highlight the text and use the "Remove Format" function (in the top "Edit" bar) to strip external font & style markings
  • Use the standard, unmodified "Heading 1," "Heading 2," "Heading 3," and "Normal" styles whenever possible; resist making headings ALL CAPS, or boldfaced.

Adding a new Page

  • Do NOT edit/modify the "Header" content at the top of a page, just below the Main Nav bar.
  • For "Page Layout", choose "One Sidebar", unless there is a compelling reason to choose "Full Width"

Events & Calendar Stuff

  • The Events Page has been moved into "Not Linked" in the Pages section, for its protection.  Do NOT delete this page-- it will blow away ALL calendar events (yes, this has already been done).  The events can be referenced in other pages, such as "Home" and "Resources" -> "Events and Calendars"
  • There are a couple ways to add an event:
    • Go to Pages -> Not Linked -> "St B Events", then "Add Event"
    • Click on an existing event on "Home" or "Resources" -> "Events & Calendar", then "Add Event"

Adding a New Image Card to the Homepage "Rotator"

  • Image Cards should convey a simple, short message; no more than several words.  The intention is to pique interest, encourage the viewer to click on "Learn More"
  • Use Photoshop, Gimp or a similar editor to add text and the "Learn More" button to an image
  • Font is "Sans" or "Sans Bold"
  • Useful images can be found on our shared Dropbox folder
  • Images will need to be landscape, approximately 2:1 (width:height)
  • Do NOT edit the Gallery block in the Homepage!  (Keep going)
  • Upload images to the "Rotators" gallery page, found under Pages -> Not Linked
    • To make an image part of the rotating set, edit the image (double-click the thumbnail, or click on "gearwheel" icon above the thumbnail), then select "Published" as the status in the lower right corner
    • To "hide" an image (remove it temporarily from the rotating set), edit the image, then select "Draft" as the status in the lower right corner
  • After uploading a new image, set up a "clickthrough link" for when visitors click to "learn more": edit the image (double-click the thumbnail, or click on "gearwheel" icon above the thumbnail), then select "Options" in the upper right, then click on "Clickthrough URL" box to specify.  This should link to an existing page.  If this is for a special event, or requires a temporary page, create a new page under "Not Linked".

Side Nav Bar

  • Intended to be the same for all pages where it appears
  • Do not create a "custom" sidebar for a particular page-- it is confusing for the viewer
  • If the standard sidebar has content which you feel is redundant or perhaps confusing when combined with your page's content, then remove the sidebar completely; change "Page Layout" to "Full Width"

Footer Nav Bar

  • Same idea as the Side Nav-- leave it alone :)

Disclosing Personal Contact Info

  • Do not use "" links in pages-- the email address will be picked up by spambots and abused accordingly
  • Do not list personal phone numbers
  • We can disclose contact information in a secure way to ONLY St Barnabas members ("Barnabites"), in this way:
    • When linking to the directory for members' personal contact information, use this link:
    • This forces the viewer to log in, preventing non-members (and spambots) from accessing and compromising sensitive information
    • Linking directly to members' emails with the link will only work if the person (i.e., "David Millis") is actually in the St B directory; check first!
  • Another way to allow visitors to contact us is to create (insert) a form.


  • Nav banner color is a71e27 (hex)
  • (We need to develop a full color pallet)