Updating Program Pages

The pages for Miramar's degree/certificate programs are among the flagship pages for our website.  As such, a level of consistency (and legality) must be maintained. Please review the following best practices prior to making any updates.

It must be remembered that a Program page is, in a sense, a legal document. It must contain the exact information pertaining to that program, that is found in the College Catalog. Artistic license is not an option on Program main pages. Nevertheless, an appealing page that will market the program to potential students can easily be created.

General Information

In order to establish a brand and give students a consistent look and feel, Miramar College uses a set of fonts. These are assigned by the system depending on what style your text is in. Program pages must be in the default font -- do not select or use additional fonts (i.e., pasting fancy fonts from Word).

Text color is also handled by the College template.

Please do not use images that contain a large amount of important text (e.g., an event flyer or rack card). This makes the page unreadable to assistive technologies.  This guideline applies to the entire website.

Header Section

Each program page will contain a header section with 

  • The name of the program, This is the same as it is in the current catalog.
  • The badge for that program's primary Academic/Career Pathway, and
  • An image and optional YouTube video that is relevant to the program.,
Typical program page header

If an image is used, it must be in PNG format to facilitate mobile platforms.

For optimum display, image size must be 570px in width by 360 in height (or a similar proportion). Overly large images may be scaled, but will result in a slow-loading page.

Images will also be cropped and scaled in order to be used as thumbnails in other locations; e.g., the list of programs on each Academic Career Pathway page. Images will be scaled as small as 220 pixels wide by 103 pixels in height. Be sure to choose an image that will look acceptable at various sizes.

If a video is used, it must be on a college YouTube channel and it must be captioned. If you would like to set up a channel for your program or department, contact the PIO's office. For assistance with captioning, contact Audiovisual Services.


Program pages are divided into tabbed subsections. Tab names must be the same across all programs.

The editing screen also has tabbed subsections, each containing a number of fields.

Picture of Program Editing Form



This section contains fields that refer to other data on the website. This enables your program to be displayed in the correct Academic/Career Pathway, and assists students in searching for a program.

If it has not already been done, you can choose the Program's department, school, and one or more interest areas (Academic Career Pathways). For more information, contact the Web  staff.

Watch the Video

There are also three text fields for the "more information" links in the sidebar:

  1. "Interest Form Email" is just the email address of the person who will be receiving student inquiries.
  2. "Catalog Page URL" is the address for the program's catalog page.
  3. "Program Mapper URL" is the link to your program's Program Mapper entry.

If there is no value for any of these, simply leave them blank.


Here, you can designate one or more blocks of relevant content to appear in the program's sidebar area. These will appear along with the Important Documents and the list of subpages, if any.

If you need to add any custom information to the sidebar, please contact Web staff with your request.


This is the section that introduces a student to the basic definition of the program. It must be the opening statement from the College Catalog.

The Overview tab contains two fields: Overview, and Student Learning Outcomes.

The Overview field contains the introductory information for your program, as published in the catalog.

Program page header

If your program is qualified to use an accreditation or partnership logo, a small one such as the one shown below is permissible, but not required. The logo must be of the size shown; i.e., approximately 100 x 100 pixels.

Images on a main Program page should not be for decorative purposes.


Program overview

As with the entire website, large amounts of text should not  be converted to an image and published as-is (e.g., an event flyer or rack card).

The Overview section may also include a sentence or two with basic contact information.

The Student Learning Outcomes field duplicates the SLOs published in the catalog. It should be a bulleted list.

Careers in This Field

This section is in the process of overhaul. For now, the list of careers as published in the Catalog will suffice.  This must be a bulleted list.

If you know of any useful and noncommercial web resources pertaining to careers in your program, they may be included after the catalog information. As always, links must be formatted in a way that adheres to our main Style Guide.

Program page careers subsection

Transfer Options Section

This section will reproduce the Catalog information regarding transfer options. No other information is acceptable in this section.

To add a transfer section, click the "Transfer Options" tab. 

Click the "Add Simple Content" button.

Transfer Options 1


Now, enter a title or headline (you must have a title), and the body.

Transfer Information 2


Save the page and you're done.

Certificates/Degrees section

Once again, this section reproduces the Catalog verbatim. The list of awards is generated and formatted automatically.

If it has not already been done, under "Awards," begin to type "Degrees by Program." When correct, it should look like the picture.

Under "Display," select "Degree List for Program Pages."

Picture of Program Editing Form


A Note About Copying/Pasting

As noted in the Style Guide, please do not directly copy and paste any text which might contain formatting; e.g., from Word or a PDF. If you have a large amount of text, paste it into Notepad first to remove formatting. Then paste that into the Drupal text editor and use the formatting options provided.

Program Faculty

This is where you add and remove contact information for program faculty. These will appear under the Faculty tab on your page.

Watch the Video


You can create as many pages as you wish, to promote your program and provide information. Create the page, add content, and associate it with your Program. If you don't know how, contact the website team. Subpages associated with your program will automatically appear in the sidebar.

Subpages can contain any content you wish. However, all pages on the College website must follow the guidelines in our Online Style Guide.

Always Changing

This is a living document. Please watch this page for changes and updates.