Portland Community College | Portland, Oregon

“Hacking” the PCC stylesheet

Posted by Rondi Schei

While working on the development of my OER Economics class, I decided to convert the chapter sections [Example 1] of the OER textbook as HTML pages in my D2L Brightspace course shell. [Example 2].  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.

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.

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:

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

Here are a couple of examples:

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:

Here is an example:

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:

Here is an example:

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:

I highly recommend inserting your image first and then changing the text for the image title and caption.

Here is an example:

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:

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:

 

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!