Portland Community College | Portland, Oregon Portland Community College

Channel content

Channel content follows general guidelines and consists of certain HTML elements.

Luminis has various content channels of its own, including:

  • error messages
  • modal menus – list actions in courses and sites, such as edit, move and delete
  • modal windows – display permissions settings and similar features
  • edit bars – link to editing features; located at the bottom of channels and expand when you hover on them
  • edit screens – display forms and wysiwyg editors for editing channel content
  • admin toolbar (dockbar) – provides links to theme and page settings; only visible in admin accounts

Channel content development info

Stylesheet location: /pcc/styles/general-ui/_channel-content.scss. Some channels have their own stylesheet, which makes adjustments to the default styles. These stylesheets are all located in the /pcc/styles/channel-content/ folder.

Creating and updating channels

How to create a channel

Create channels using an admin account (not a regular account with admin privileges). Luis, Jason, and Ali can create channels.

Once a channel is created, it automatically pushes to all the servers. It may take 20-30 minutes to show up.

  1. Log in using an admin account
  2. Navigate to Home Community or the course/site, then the tab you want to add the channel to
  3. Click the plus icon in the upper left corner of the screen, and choose Web Content Display
  4. Drag it to the location you want
  5. Click Add Web Content for your new channel (or Select it if it already exists)
  6. Type on the title to update it, and make content updates in the editor
  7. Click the gear icon in the new channel, then choose Configuration
  8. Uncheck Enable Related Assets and Enable View Count Increment. You can also set view permissions for students, staff, etc. in this location.
  9. Wait until it appears and make sure it looks good. Done!
How to update a channel

Regular accounts with admin privileges can update existing channels. The webteam account can update channels.

Once a channel is updated, it automatically pushes to all the servers. It may take 20-30 minutes to show up.

  1. Log in using an account with admin privileges
  2. Go to Home Community or the course/site, then the tab containing the channel you want to edit
  3. Click Edit
  4. Make your edits and then save
  5. Wait until the edits appear and make sure it looks good. Done!

Basics

Channels can include many types of typography, as well as any of the content types below. Most channels have basic components and follow general layout guidelines. There are some custom channels, but those are all part of larger projects.

WRC channel with a paragraph and unordered list

Media

Channels can include images, icons, and logos. Media is usually aligned to the right, inline with the content. However, media can also be left-aligned or located above the content.

Sizing and alignment

Media uses the same classes as the main PCC website. See sizing and alignment development info in the web style guide.

Centered, 100% width

PCC Panther Works channel – logo above a paragraph and list of links with custom bullet point icons

Aligned right, 50% width

Channel with logo

Aligned left, 25% width

Channel with a title, content, image and more link

Images and logos

Images should be 400px wide (or smaller), and will resize to your specified sizing class in the browser.

Image (aligned right)

Staff development and training

Multiple images (custom)

News channel

Logo (aligned right)

Queer Resource Center channel – paragraph with right-aligned logo

Icons

Most icons in MyPCC are part of a sprite sheet. With a sprite, the channels don’t have to load multiple image files. Instead, a single image re-positions to reveal different areas.

Many custom channels have icons which change based on the student’s current status. View all the MyPCC icons.

Sprite in location 1

Chair with green checkmark

Sprite in location 2

Chair with yellow warning sign

Icon development info

Forms

Forms in channels are usually just an input box and submit button. The form elements either appear inline or they stack, based on the width of the channel.

View more examples of channels with forms.

Inline

Staff Directory search

Stacked

Staff directory search with stacked form elements

Form development info

input type="text" and input type="submit" inside Foundation columns (columns widths vary depending on length of button text)

Expandable sections

Channels with a lot of content should use expandable sections to break up and hide some of the content. This makes it easier for users to glance over and read the content.

Faculty resources channel – expandable sections containing lists of links

Callouts

Channels can have callouts to draw attention to certain information. We don’t use all of the same callouts as the main PCC website, but the few in use are listed below.

Feedback (or new)

Feedback callouts let people know something is new, and sometimes to ask for feedback on the changes. By default, they include a speech bubble icon, but you can use inline styles to remove it or use a different icon.

Feedback callout

Notice

Notice callouts are used to highlight very important, time-sensitive information. They can be in a channel of their own, or at the top of existing channels.

Notice development info

div class="notice"

Notice callout

Highlight

Highlight callouts can be either temporary or permanent. They show related information, similar to highlight callouts on the main PCC website.

Highlight callouts can be full-width at the top or bottom of a channel. Don’t float them, because the text becomes to narrow and difficult to read when the channel is narrow.

Highlight development info

div class="channel-highlight" with regular HTML elements inside

Highlight callout

Tables

Tables should only be in Luminis and events channels, and only for tabular data. Don’t use them to create design layouts in custom channels.

Most of the tables in Luminis channels are responsive, but a few aren’t. There isn’t anything we can do to fix this.

Condensed responsive table

Announcements channel

Full responsive table

My announcements channel at full width

Table in mini calendar

Main PCC event calendar