Author: Megan Ross

Card Snippet

This snippet creates a single card with text over an image or colored background that links to another page or website. The slide out button can be customized. The spacing around each card is controlled in the Boxed Sections snippet that the Card is inserted into.

Example of two rows of three cards each with space between each card.

Example of three cards in a boxed section with no gutter spacing.

Card Snippet

This snippet must always be inserted into a column of a Boxed Sections snippetYou can create multiple rows of cards by adding additional rows to the Boxed Sections snippet.

  1. Enter the desired text that will be displayed on the card.
  2. Select the text you entered and insert a link to another CMS page or external URL.
  3. If including an image in the background, crop the Card type with the Image Editor and insert the largest size card that was cropped.
  4. If not including an image, change the selection to the desired background color. When using this snippet in an asset you must type in the code for the desired color:
    1. For Gold enter “gold” without quotation marks.
    2. For “Black” enter “black” without quotation marks.
    3. For “Dark Gray” enter “medium-gray” without quotation marks.
  5. Change the default button text if alternate wording is desired.

You should add two, three, or four Card snippets in a row.

Continue Reading


Touts Snippet

This snippet creates a row of solid or hollow colored circles for statistic touting. The number or ranking part of the statistic goes into the shape and the remaining text appears beneath. The circles could have background images instead of solid color. The font colors are predetermined and cannot be changed.

Example of solid touts with an image background.

Example of hollow gold touts.

Tout snippet.

This snippet should always be placed in a Row w/ Background snippet.

  1. In the Value field for shape, select Solid or Hollow. When using in an asset you must type “solid” or “hollow” without quotation marks.
  2. In the Value field for color, select the desired color. When using in an asset you must type the correct code:
    1. For Gold enter “yellow” without quotation marks.
    2. For Black enter “black” without quotation marks.
    3. For Blue enter “blue” without quotation marks.
    4. For Burgundy enter “burgundy” without quotation marks.
    5. For Gray enter “gray” without quotation marks.
    6. For Green enter “green” without quotation marks.
    7. For Light Green enter “light-green” without quotation marks.
    8. For Orange enter “orange” without quotation marks.
  3. If desired, use the Image Editor to crop the Square type to appear in the shape. Insert the square170 image in the Button Background Image field.
  4. Enter the text that will appear in the shape in the Button Text field.
    1. Add a link to this text if desired to enable a Go button in the shape when hovering.
    2. You can use one of the University-wide assets with a name starting with “Tout #” in this field.
  5. Enter the rest of the text that will appear below the shape in the Content After field.
    1. You can use one of the University-wide assets with a name starting with “Tout Text” in this field.

Specific editorial guidelines for formatting the tout content can be found in the Editorial Guide.

Each row of the snippet will create one tout and all touts will appear on the page in a single row.

If your page has no left navigation and no right sidebar, you can add up to all five touts. If you have either the left navigation or right sidebar, only use up to four touts. If you have both the left navigation and right sidebar, you can use up to three columns. You can also add this snippet to a right sidebar with one tout.

Continue Reading


Recommended Formatting of Hours

There are many instances when you need to display hours on your webpage—hours of operation, advisor walk-in hours, and learning center times to name a few. The following formatting recommendations and tips for displaying basic hours will make them easy to see and understand by both sighted users and anyone using a screen reader. Additional formatting information can be found in the University Editorial Guide.

Example of academic year and summer hours in a boxed sidebar.
Basic hours of operation differentiated by time of year.
Example of hours and additional text in a boxed sidebar.
Basic hours with additional text.

  • Use the boxed sidebar with an appropriate title.
  • Use headings.*
    • The title is a heading 2, so start content headings with heading 3.
    • Make the days of the week a heading.
  • Spell out the days of the week, do not use abbreviations.*
    • Days of the week should be singular.*
    • Use an En Dash (Alt + 0150 on Windows, option + – on Mac) for an inclusive range of days, such as “Tuesday–Thursday” meaning Tuesday, Wednesday, and Thursday.*
    • Use “and” for specific, individual days, such as “Tuesday and Thursday” meaning just those two days of the week.*
  • Use a.m. and p.m. to specify times.*
    • Only list it once if the start and end times are both the same, such as 1–5 p.m. or 10 a.m.–5 p.m.*
    • Use an En Dash (Alt + 0150 on Windows, option + – on Mac) for an inclusive time range.*

*These tips also apply to hours information within the body of a page.

Continue Reading


Ranking (Standalone) Snippet

This snippet allows you to add a standalone ranking. This looks best when not full-page width, such as in a boxed section as they are not very wide. The link and second line of italic text are optional.

Example of standalone ranking. Ranking standalone snippet.

  1. Enter the number associated with the ranking in the Purple field.
  2. Enter the text associated with the ranking in the Black field. Add a link to the text in this field if needed.
  3. Enter the ranking source in the Italic field if desired.

Continue Reading


Named Testimonial Snippet

This snippet allows you to create a styled testimonial quote.

Named Testimonial example.

Named Testimonial snippet.

  1. Enter the title that will appear above the quote. This field is optional.
  2. Enter the quote text.
  3. If available, use the Image Editor to crop a Square or Personnel image type and insert the 170 size image.
  4. Enter the name of the quoted person. This field is optional.
  5. Enter the title of the quoted person. This field is optional.

Continue Reading


Footer Social Icons

You can add customizable social media icons to the footer of your website, just below the contact information. This is only available in the _props.pcf file within the root folder for your site or the folder where navigation is restarted.

Example of a footer showing social media icons.Footer Social Icons snippet.

  1. Open the _props.pcf file in the root folder for your site.
  2. Look for the Social Icons Editable Region and click the green button to enable editing.
  3. For each icon that you want to appear, enter the URL for that social media platform in the corresponding cell.
  4. Save your changes.
  5. Publish.

Continue Reading


Footer Call to Action Buttons

You can choose to add call to action buttons at the top of the footer on your website. You can choose to add just the Give button linked to a page of your choice, just the recruitment buttons with preset links, or all four. The default is no buttons. This is only available in the _props.pcf file within the root folder for your site or the folder where navigation is restarted.

Example footer showing all buttons.

  1. Open the _props.pcf file in the root folder for your site.
  2. Go to Properties in the Page Actions Toolbar.
  3. Be sure you have the file checked out (if not, click on the lightbulb icon in the Page Actions Toolbar).
  4. From the Parameters menu on the left, find the “Site Footer Contact Information” section. The Call to Action Buttons fields are the last two items in that section.
    Footer Call to Action Buttons Parameters fields.
  5. Select which button(s) you would like to display using the Call to Action Buttons dropdown.
    1. No Buttons
      Example of the top of a footer with no buttons.
    2. All Give and Recruitment Buttons
      Example of the top of a footer with all buttons.
    3. Give Button Only
    4. Recruitment Buttons Only
      Example of the top of a footer with only the recruitment buttons.
  6. If you selected an option that includes the Give button, use the file chooser to select a page within your website that the button should go to or paste in a URL to a page that is not within your site. If you do not indicate a Link, the button will go to the default page.
  7. Click the blue Save button.
  8. Publish.

Continue Reading


Link Within a Page

You can link to a specific place within your page using anchors. You can also link to individual sliders or FAQs. This is useful when you have a long page and want to provide shortcuts to certain sections or when you want to direct the user to a specific piece of information within a page.

Setting Up Anchors

The first step is to create the anchor on the page in the place where you want to link to. Sliders and FAQs already have this code, so you would not need to do this step.

  1. Put your cursor in the location where you want to link to.
  2. Click the anchor icon anchor icon in the toolbar.
  3. Enter a name for the anchor. This should be short, one to two words, using only use lower case letters, numbers, and hyphens. Each anchor you create on the page must be unique to the page.
  4. Click the blue OK button.

Finding the Slider or FAQ Anchor ID

Sliders and FAQs already have assigned IDs that you can link to. The page the slider or FAQ is on must already be live.

  1. Go to the live page.
  2. Right click on the slider or FAQ title that you want to link to.
  3. Select “Inspect”.
  4. Look at the highlighted code and go up two lines.
  5. You should see something like id=”slider-d11e2783″ for sliders or id=”question-d11e1234″ for FAQs. The text in quotation marks is the name you need to link to.

Please note, if the title in the slider or FAQ snippet changes the ID will also change and your link would need to be updated.

  1. Select the text you want to link from.
  2. Click the Insert/Edit Link icon insert/edit link icon in the toolbar.
  3. Enter the appropriate URL.
    1. If the anchor is on the same page as the link you are creating, in the URL field enter #name (hash followed by whatever you named the anchor or the slider/FAQ ID).
    2. If the anchor is on a different page than the link you are creating or you are creating the link in a navigation file, first enter the URL for the page that the anchor is on by using the file picker to select the page within your site or pasting the outside URL. Then add #name (hash followed by whatever you named the anchor or the slider/FAQ ID). For an internal page your URL may look like {{f:123456}}#name.
  4. Click the blue OK button.

Continue Reading