Callouts by Dave

Using Dave Ghidiu's Brightspace Markdown to Create Custom Callout Boxes

Brightspace pages can start to blur together. Callout boxes jump off the page ... students actually read them. 

As a bonus, the iconography does extra work too: a book icon signals "you need to read this," a video camera signals "go watch this," a calendar icon says "deadline incoming." 

Instead of hoping students parse your expectations from a wall of text, you're communicating visually before they've read a word.

• Build your callout. Go to Dave Ghidiu's tool and use the settings to configure your callout. Write your content, set to description, and pick an icon from the free fas icon library.

• Copy the generated HTML. Once you're happy with it, copy the HTML the tool produces.

• Paste it into Brightspace. Use the Edit Code tool to paste your copied HTML directly in.

• Apply GCC branding colors (optional). If you want the callout to use GCC's official colors instead of the defaults, paste the GCC snippet anywhere inside your page HEAD.

Step 1: Set Up Dave's Tool

When you land on Dave's page, you'll see a options panel across the top, a markdown window on the left, and a live preview panel on the right. The first thing to do is find the Convert custom Markdown to dropdown — it defaults to Brightspace Web Page File. Change it to Brightspace Description.

Step 2: Write Your Callout in Markdown

In the markdown window, type your callout using this structure:

^callout book

Your content goes here.

^callout-end

Leave a blank line between the opening/closing markers and your content. If you don't, the tool can get confused.

Step 3: Find Your Icon

Browse Font Awesome's free icon library at https://fontawesome.com/v5/search. Scroll or search for what you need. Make sure you're selecting a free icon. Once you have the name, plug it into your opening marker: ^callout book, ^callout video, etc.

Play with it until the preview looks the way you want. Leave the other options at the top of the page alone for now; they're more advanced.

Step 4: Copy the HTML

Scroll to the bottom of the markdown window and find the section titled HTML to copy and paste. Copy everything from <!-- callout begin --> to <!-- end callout -->.

Step 5: Paste into Brightspace

1. Go to your Brightspace page and click Edit HTML (Web Page)

2. Place your cursor where you want the callout to appear; type HERE as a placeholder

3. Click Edit Code to view the raw HTML. Your cursor should land in roughly the same spot

4. Replace the HERE placeholder with your pasted code

5. Click Save, check that it looks right, then click Save and Close

Dave's tool has color options, but they require a fair bit of additional and more advanced work. However, a small CSS snippet overrides the defaults with GCC's official blue and light blue background. You only need to add this once per page. It applies to all callout boxes on that page.

Paste this snippet directly in the HTML editor, right before or after the page's <title> tag:

<style>

h1, h2, h3, .card-icon, .fas {

    color: #0D4471 !important;

}

.card-graphic {

    border-color: #0D4471 !important;

    background-color: #EDF8FE !important;

}

</style>