CCSF Web Site (CMS)

The Technology Division has been training Program and Departmental representatives to work on the redesigned CCSF web site (also known as the Content Management System or CMS). These sessions continue: Look for them on the Training Calendar. For information including:
  • History of the web site redesign
  • Directions on how to get an account that allows you to edit pages on the site

Embed a Google Calendar in a CMS page

posted Jan 10, 2012, 2:33 PM by

You can display a Google Calendar in a CMS web page. Here's an example.
To display the calendar, you'll need to copy some code that Google posts explicitly for this into a special CMS component: the snippet. So, the first thing you'll need to do is make sure that you get the snippet component in the page where you want the calendar to display.

Get the snippet component

First, go the CMS page where you want the calendar to go. Since the calendar takes a fair amount of space, you'll need to use a template with one or two columns - not three, which squeezes a calendar into a hard-to-read space.
Copy the address of the page from the address bar and email it to a CMS admin: either Joe Jah ( or Wendy fong ( and ask for the snippet component to be added to that page.

Copy the Calendar's Embed code

Open your Google Calendar and click Setting. Click the Calendar tab and click the name of the calendar that you want:
Choosing a calendar in Google's Calendar ssettings

The settings for that calendar open up.
Scroll down to the Embed code section.
Place your cursor inside the Embed Code window:
Right-click (Control-click on the Mac) and choose Select All

Choose select All on the right-click popup menu

Paste the Embed code into the snippet component

Back in your CMS page, add the snippet component where you want the calendar to appear.
Edit the snippet and Paste the embed code into it: Right-click (Control-click on the Mac) and choose Paste.
When you OK to save the code in the snippet, the calendar appears.

Now whenever you edit that calendar in your Google account, the result will appear immediately in your CMS page.

Editing the CMS? Stick with Firefox 3.6

posted Oct 28, 2011, 2:41 PM by

  • Be sure to use Firefox version 3.6 when working on your CMS web site pages. Later versions of Firefox do not work (yet).
  • Adobe, who owns the software underlying our site, has not yet updated it to work with the latest versions of Firefox.
  • IE and Chrome do not work when editing the CMS. 
  • To check your version of Firefox and find out how to download version 3.6, go to the TLC's Firefox 3.6 page.
  • All browsers can view the site: this message is just for folks editing pages.

Choosing a template

posted Oct 11, 2011, 2:05 PM by   [ updated Oct 11, 2011, 2:06 PM ]

When you create a new page in your site, you must choose a template. This is important, because changing templates once your page is created may mean recreating the page - it's not a click-here-to-change operation. So here are some general comments on templates:

The most useful template: Department 3-column. This provides:
  • Automatic navigation on the left (all subpages will automatically appear on the left; your site's pages also appear there).
  • A central column that is wide enough to accommodate explanatory text, a picture, or even an embedded calendar.
  • A right-hand column for contact information, or a link-arrow list component for your own navigation or for outside resources.
Other useful templates:
  • Department 2 Column Template B: This template features a built-in left navigation that will display all sub-pages (created in the Main site tree) and a wide main column but no right-hand column to add navigation, links, or comments. OK for pages down from your main page. Plenty of space for an embedded calendar or for a table in the wide column.
  • Department 2 Column Template A: OK for pages down from your main page. No left navigation. To get to sub-pages or pages outside your site, you can add the CCSF Link Arrow List Component in the right column to provide navigation. And, of course, you can add links in the main column. Also, the automatically generated breadcrumbs provide a path back and the CCSF logo always leads to the home page of the site. Plenty of space for an embedded calendar or for a table in the wide column.
The following templates have a built-in Title Banner component that requires you to insert a large picture taking up a significant amount of vertical space across the top of the page. If you're OK with that, there are a bunch of approved images in the DAM that can add color to your page. Good at the top of text-heavy pages. See for an example.
  • Generic 3 Column Template: Has built-in left navigation and a right column for additional information or links.
  • Generic 2 Column Template A or B: Same comments as Department 2 Column versions but with that built-in Title Banner component that requires a large picture.
Not for general use:
  • All the Campus templates
  • The MyCCSF template
  • The Library Homepage template
  • The Community Template
  • The Blog and Calendar templates are not currently functional.

Editing your site after a break? Useful online help

posted Oct 3, 2011, 9:43 AM by   [ updated Oct 3, 2011, 11:03 AM by td.comm camias ]

A two-page pdf with answers to the most common questions returning users have when coming back to edit is the Quick RE-Start document. It reminds (and updates) you on:
  • Logging in
  • Finding your pages
  • Using the SideKick
  • Useful components and how to use them
  • What components commonly go together (Component sequences)
  • Adding new pages
  • Activating
For information on adding pictures using image components, take a look at another pdf, CMS Digital Asset Manager Images. It also reminds you of how to use the DAM to retrieve approved, pre-set images taken by professional photographers for CCSF's Public Relations department.

For more detailed information you can consult the page with a complete listing of all documents pertaining to editing the CCSF web site.

1-4 of 4