Portland Community College | Portland, Oregon Portland Community College

Custom channels

Most channels follow one of the general layouts, but some are one-offs. Most of the custom channels provide information specific to an individual user. For example, they show a student’s Financial Aid status or major and degree information.

Term-to-term checklist + placement

The term-to-term checklist gives students all the links they need to register for classes.

Checklist + placement screenshot

Term-to-term checklist

Checklist + placement styling
  • Located on the Home tab.
  • Everyone sees the same thing.

The channel has custom turquoise headings and a gray background. This helps it to help it to stand out against the other channels on the page.

We’ve discussed having the checklist channel become more colorful and eye-catching during registration, but haven’t implemented this because it’s difficult to determine when any one user is able to register.

Checklist + placement development info
  • Stylesheet location: /pcc/styles/channel-content/home/_term-checklist.scss and /pcc/styles/channel-content/home/_placement.scss

News

The News channel pulls in the same featured stories displayed on the PCC website homepage.

News screenshot

News channel

News styling
  • Located on the Home tab.
  • Everyone sees the same thing.

Small, left-aligned images next to headings and story blurbs. Includes a read more link.

News development info
  • The News channel is the only one to use a features image gallery.
  • Stylesheet location: /pcc/styles/channel-content/home/_news.scss

My major and degree

This channel shows students their declared major and degree. It also provides links to Grad Plan and to change your major. For undeclared students and staff members, it shows the undeclared program flag.

Download the program flags with titles or the program flags without titles, or read more my major and degree documentation on Spaces.

My major screenshots
My major vertical layout
My major horizontal layout
My major styling
  • Located on the Home tab.
  • Everyone sees their own major and degree.

The my major channel displays the program’s flag and bright colors – this makes the channel stand out. It uses the color scheme from each program’s flag.

The channel has a custom responsive layout, with a vertical layout when the column is narrow and a horizontal layout when it’s wide.

My major development info
  • Stylesheet location: /pcc/styles/channel-content/home/_my-major.scss
  • Colors and flag images are stored in the database along with the degree names and information.

My account

This channel displays how much money a student owes PCC (or doesn’t owe). There’s also an icon to draw your attention to the channel and show your status at a glance.

My account screenshots
My account channel - paid
My account channel - payment plan
My account channel - financial aid
My account channel - amount due
My account styling
  • Located on the Paying for College tab.
  • Everyone sees their own account status.

The channel has a custom layout to make it look like a bill, and has icons and colors which change based on the student’s current status. For students who owe money, it shows the due date below amount due.

My account development info
  • Stylesheet location: /pcc/styles/channel-content/paying/_account.scss

Don’t get deleted

This channel displays whether a student’s course registration is protected, or if they’re in danger of being dropped from their classes due to lack of payment. Read more don’t get deleted documentation on Spaces.

Don’t get deleted screenshots
Chair with green checkmark
Chair with yellow warning sign
Grayed out chair
Chair with yellow warning sign and red background
Chair with yellow warning sign and flashing red background
Don’t get deleted styling
  • Located on the Paying for College tab.
  • Everyone sees their own course protection status.

There’s an icon to draw your attention to the channel and to show your status at a glance. Two weeks before the drop date the channel turns red. One week before it flashes red.

The channel uses a general image layout, but has custom icons and an animation.

Don’t get deleted development info
  • Stylesheet location: /pcc/styles/channel-content/paying/_deleted.scss

Veterans education benefits

This channel displays a student’s veterans benefits paperwork status. Read more veterans education benefits documentation on Spaces.

Veterans screenshots
Veterans channel - submit
Veterans channel - wait
Veterans channel - green
Veterans styling
  • Located on the Paying for College tab.
  • Everyone sees their own veterans education benefits status.

There’s an icon to draw your attention to the channel and to show your status at a glance. The channel uses a general image layout, but has custom icons.

Veterans development info
  • Stylesheet location: /pcc/styles/channel-content/paying/_veterans.scss

Financial Aid Dashboard

This channel shows a student’s financial aid status. It displays the current term and the upcoming term so they can plan ahead. Read more Financial Aid Dashboard documentation on Spaces.

Dashboard screenshots
FA Dashboard teal year
FA Dashboard vertical layout
FA Dashboard gray year
FA Dashboard icons
Dashboard styling
  • Located on the Paying for College tab.
  • Everyone sees their own financial aid status.

The channel has a custom responsive layout, with either a horizontal or vertical orientation. There is a tab for each step of the aid process, and each year has a different color scheme. The channel also has custom icons for each tab, which change based on the student’s status for each step.

The design is old in these examples, but see the dashboard in various states.

Dashboard development info
  • Stylesheet location: /pcc/styles/channel-content/paying/_dashboard.scss

Ready to take online classes?

The Ready to take online courses channel shows students whether they’ve taken the online orientation. They have to take the orientation to register for online courses.

Read more ready to take online courses documentation on Spaces.

Online classes screenshots
Online classes incomplete
Online classes complete
Online classes styling
  • Located on the My Courses tab.
  • Everyone sees their own online course status.

This channel has simple text and a left-aligned icon that is either grayed-out (orientation incomplete) or color with a check-mark (orientation complete).

Online classes development info
  • Stylesheet location: /pcc/styles/channel-content/courses/_online-classes.scss

PCC Corner

The PCC Corner channel is updated by inserting the content in an Excel document (pcc.edu/forms/Fun/fun_tab.xls). Staff members can send quotes to webteam@pcc.edu. It usually shows a quote, but can also show a fact.

PCC Corner screenshot

PCC Corner channel with a quote

PCC Corner styling
  • Located on the Employee tab.
  • All employees see the same thing.
PCC Corner development info
  • The channel simply has a heading, right-aligned image, and a blockquote.