Portland Community College | Portland, Oregon Portland Community College

This content was published: February 13, 2018. Phone numbers, email addresses, and other information may have changed.

“Hacking” the PCC stylesheet

Posted by

While working on the development of my OER Economics class, I decided to convert the chapter sections [Example] of the OER textbook as HTML pages in my D2L Brightspace course shell. [Example].  The major benefits was that I was able to add to the areas that I felt were weak, customize the chapters I wanted to use, and insert relevant videos to specific parts of the readings.

There are two images. The one of the right shows a chapter section from OpenStaxx and the right image shows the same content converted into the PCC stylesheet.

During this experience, I added a number of design elements to spice up the PCC stylesheet. To make the process a quick copy/paste, I developed embed code “templates” that I could use. I added all of these embed code templates by using the Insert Stuff tool in the D2L Brightspace HTML editor and selecting Embed Code.

Image showing the Insert Stuff button as the first button in the HTML editor toolbar. A pop-up window then loads and you need to select "Enter embed code."

This shortcut saved me so much time wading through code and frankly, who wants to do that? I know I have better uses for my time! So, I compiled five of my most common PCC stylesheet hacks for you to ‘steal’ and use with pride.   (Note: The colors I chose to use as part of the default template, complement the PCC Teal Stylesheet.)

1: Outlined boxes

Want to highlight specific information? Like a “note” or to visit a link? Use the following code:

<div style="margin: 0% 5% 0% 5%; border: 3px solid #cccccc; padding: 15px 25px; border-radius: 10px;"><p>Write your text here...</p></div>

The color code is in bold (#cccccc). This default in a medium gray, but you can change the color by entering a different color code (stay away from light/pale and fluorescent colors). For instance,  I used orange to highlight external resources links.

Once you have inserted this code, your template will look like:

An image of the template. A box with a gray outline and curved corners,

Just replace the existing text with whatever you want! Add links, images, and videos inside the box too!

Here are a couple of examples:

Examples of outlined boxed. On the left is a box with gray outline and on the right is box with orange outline.

2: Colored boxes

Creating a box with a colored background is also a nice option. The key here, is to ensure that there is enough color contrast between your background color and your font color. So, the lighter the better. A color that looks really really light, looks much darker when filling a larger area. I found that I would end up needing to select a color that was only a step or two from being white.

Use the following embed code template:

<div style="background-color: #eff5f5; padding: 15px 15px; margin: 0% 10%; "><p><strong>Write your text here....</strong></p><p></p></div>

Note: If you want a different color, simply replace the background color number with the accessible color number of your choice.

Once you have inserted this code, your template will look like:

a colored box using a light teal color. There is no outline, just a solid block of color.Here is an example:

An example of the box with background color in use on an HTML page. A teal color that highlights the questions students should think about as they read through the page.

3: Quotes

Would you like to indent a quotation and have a neat quotation image show up?

Here is the embed code:

<blockquote> Write text here… </blockquote>

Once you have inserted the code, it will look like:

Image of blockquote code with the words write text here...

Here is an example:

An image that shows the blockquote embed quote with a quote from Adam Smith.

4: Adding titles and captions to images

How about adding more stylized titles and captions to your images? Ones that align properly with your image?

Use the following embed code:

<figure>
<div style="text-align: center;"><strong>Image Title</strong></div>
<div style="text-align: center;"><em>Highlight this text only and replace it by inserting image.</em></div>
<figcaption>Write your caption here.</figcaption>
</figure>

Once you have inserted this code, your template will look like:

Image that illustrates what the template will look like visually before the image is inserted.
I highly recommend inserting your image first and then changing the text for the image title and caption.

Here is an example:

A image of an image (production possibilities curve) that has an image title: Figure 1: A healthcare vs. Education Production Possibilities Frontier. The image also illustrates a fairly detailed caption as well.

5: Adding titles and descriptions to YouTube videos

 

Note: This does not replace the need for closed captioning.

This code is a little more complicated, but it’s really neat because it’s mobile friendly. That means that the video will resize for mobile devices. You will need to add the embed code twice, once for the template and once for the video.

Here is the embed code:

<figure>
<div style="padding: 15px;">
<p style="text-align: center;">
<strong> Video Title</strong></p>
<div class="youtube-sizer">
<div class="youtube-container">Highlight this text only and replace by inserting video embed code.</div>
</div>
</div>
<figcaption>Write video caption here</figcaption>
</figure>

Once you have inserted this code, your template will look like:

Image of the inserted code. Visually there is extra space in between the sentence "Highlight this text only and replace by inserting video embed code"

You will note that there is extra spacing. Ignore this. When you highlight the sentence “Highlight this text only…”  and then insert the  embed code for the video from YouTube, the extra space will disappear.

Here is an example:

An image of a video embedded using the code to add title and caption. The title states "Cyclical Unemployement" and the caption reads the source and publish date.

 

Summary

These are five great hacks to the PCC Stylesheet that pretty much allow you to copy/paste without having to decipher a lot of painful code. The purpose of these embed code templates is to let you, as the instructor, express your materials in more creative ways.  I hope you enjoy!

About Rondi Schei

As the Course Development Program Manager for Online Learning, Rondi works with faculty to develop engaging instructional materials and design high quality online courses. more »

Poppe with speech bubble

Comments

Sorry, but the comments have been closed. If you see something that doesn't belong, please click the x and report it.

x by Carole Eustice 4 years ago

Rondi:
I do many of the same “style hacks” you have placed here; however, the best part is now I can copy them and have them all in one place. One other embed I also do is I upload the images I wish to use and then insert them directly from the shell. This allows me to create embed codes that will group images together or allow me to overlay one with the other.

Love to hear more.