Page Comparison

Content copied from external sources such as and an email or document will try to keep the original formatting. There are two ways to fix this:

• When pasting, use ctrl+shift+v (PC) or command+shift+v (Mac) to paste as plain text.

• After pasting, highlight the content and select the T_x button in the toolbar to clear the formatting. 

Tables should only be used for tabular content, never for visual layout. Tabular content is written content that has a clear header row or column. 

To make a table, select the Table button and complete the Table Properties popup. Things to include:

• Select a header row or column in the Headers dropdown. This is a component of accessibility as it helps a person using a screenreader screen reader navigate the table.

• Change the table width to "100%". This makes the table responsive to devices of different screen sizes (you don't want a fixed width). 

Important notes:

• Tables can be added to any text block, but they should only be used in the the “Text: 1 Column” block. They don’t display correctly in other blocks.

• Links should never be added to a header row or column as the color contrast between the background and the linked text is not sufficient for accessibility purposes. 

Relative links are links that don’t require the full URL because they link to a page on the same domain (eg. www.pdx.edu) as the source page. Fully external links require the full URL.

In On your site, there are three kinds of relative links you can make. These instructions are not all-encompassing, but you can use them as a starting point:

Links internal to your site (for CTA and Link paragraph blocks)

1. In the URL field, begin typing the page title.

2. Select the correct page title from the list of options that appears.

   • Only published pages will show up in the list of options.

Links external to your site but internal to www.pdx.edu (for CTA and Link paragraph blocks)

1. Enter the URL into the URL field.

2. Replace http://www.pdx.edu/ with /../

   • Example: /../student-life/campus-life

Relative links in Text paragraphs

1. In the link popup, select "Other" as the protocol

2. In the URL, replace the https://www.pdx.edu/ with /../.

   • Example: /../admissions/how-to-apply

Anchor links direct visitors to a specific section of a page, rather than the top of a page. Terms you’ll want to be familiar with:

• Anchor: the destination; where the link directs the visitor. These can only be made in Text paragraph blocks.

• Anchor link: the link that takes a visitor to the anchor. These can be made in any paragraph block type; they do not have to be in the same block or page as the anchor.

Make an anchor

1. Add or edit a Text paragraph block.

2. Place your cursor where you want the visitor to end up (the final destination)

   • Do not highlight any text, just place the cursor at the start of the text

3. Select the Anchor button (it looks like a flag) from the formatting menu

4. Type in the anchor name in the popup that appears

   • Anchor names must be all one word (no spaces) - . For example: anchorname

   • Pay attention to your capitalization, it must be replicated in the anchor link

Add an anchor link to a page

After creating the anchor, you can create and test the link. There are three ways to create the link, depending on where the link is in relation to the anchor:

• Link The link and anchor are in the same text block:

  • Create a link by selecting the Link button from the formatting options for the text block. In the pop-up window, select “Link to anchor in the text” as the link type, then select the correct anchor from the list of options.

• Link The link and anchor are in different blocks on the same page:

  • In the URL field for the link, enter #anchor-name; for example: #classesregistration. Note: if entering the link in a text block, you’ll want to select “<other>” as the protocol (rather than “https://”).

• Link The link and anchor are on different pages:

  • In the URL field for the link, enter the URL of the page with #anchor-name at the end of the URL. For example: pdx.edu/current-student#classesregistration.

These are approximate sizes, you can go larger but we do not recommend choosing smaller image dimensions. 

• Large Hero and CTA: Full-Width Image: 2000x700 (WxH)

• Other Blocks: 650x650 (WxH)

• Text Blocks: There are not no pre-set sizes for images in text blocks. As such, you must to upload images that are already customized to the size you want. Some recommended widths are:

  • Small: 250px

  • Medium: 400px

  • Large/Full span: 800px

• Event image:  455x325 (WxH)

• News Article image: 945x520 (WxH)

Caption Your Own Multimedia Content

Content developers may generate captions and transcripts themselves using video hosting sites like Youtube and Media Space. Both of these services offer machine-generated captions and accompanying editing tools. Please note that machine captions are not fully accessible for people with disabilities and must be edited for accuracy. Follow these steps to caption your own Multimedia content in on YouTube or Media Space:

• Generate automated captioning in on YouTube

   and edit captions in on YouTube for accuracy.

• Generate machine captioning in Media Space

   and edit captions in Media Space for accuracy.

Request Professional Captioning and Transcription

Affordable professional captioning and transcription services are currently available through OIT at a cost of $1 per video minute. Follow these steps to request paid, professional captioning and transcription:

1. Upload your multimedia content to Media Space.

2. Submit a Caption Request for PDX.edu Multimedia.

3. Allow 5-7 business days for your request to process.

To add a new iframe:

1. Login Log in to your site and navigate to the page where you want to add the iframe.

2. Add a new Text: 1 Column paragraph block to the page.

   • It's best practice to have the iframe in its own block so it's easier to move around and manage.

3. Select the the iframe menu item in the formatting menu (it looks like a world).

4. Complete the popup window. A few notes:

   1. URL: this is not the full iframe embed code, just the URL extracted from that code.

   2. Width The width can be set to exact numbers (eg. 600px) or percentages (eg. 100%); height can only be set to exact numbers. You may need to play around with sizing to get the desired fit.

5. Select Ok to close the pop-up; in on the edit page, the iframe will show as a box with the words iframe in it. It will display appropriately when the page is saved.

You can embed a Google Calendar using an iframe. However, there are a few added steps you need to take, to ensure the calendar is accessible:

1. On a computer, open Google Calendar. You can only get the code to embed in your website from a computer, not the Google Calendar app.

2. In the top right, select the Settings menu (it looks like a gear) and then Settings.

3. On the left side of the screen, select the name of the calendar you want to embed.

4. Select "Integrate Calendar" in the menu that expands under the calendar name you selected.

5. Copy the "Public URL to this calendar" section URL. For example, the Public URL to my 1:1 help calendar is: 
   https://calendar.google.com/calendar/embed?src=pdx.edu_p6hjlahv1gsmk0e8g6oereldh4%40group.calendar.google.com&ctz=America%2FLos_Angeles

6. Open some kind of text editor and paste the URL in it. This is just for temporary purposes so we can edit this URL.

7. Replace everything before src= in the URL with: 
   https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&mode=agenda&height=600&wkst=1&bgcolor=%23FFFFFF&  

   1. Example: the new URL for my 1:1 calendar is:
      https://www.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&mode=agenda&height=600&wkst=1&bgcolor=%23FFFFFF& src=pdx.edu_p6hjlahv1gsmk0e8g6oereldh4%http://40group.calendar.google.com &ctz=America%2FLos_Angeles

8. Copy the new URL, this will be used for the iframe.

A few notes:

• When creating the iframe, set the width to 100% and the height to 600px.

• Calendars with appointment slots cannot be embedded; they only display the scheduled appointments, not the available times to book. For appointment calendars, use a call to action to link to the appointment calendar.