< Online Course Styling Tool/>
Inline Tools
Outgoing Links
Key Points List
Text Highlight
Next Steps
Section Separators
Video Embed
Image Tools
Course Banner
Branded Course Banner
Video Poster
Branded Video Poster
Image Cropper
Modify HTML
Edit Exported Embed
Combine Link Buttons
Changelog
Welcome to the Online Course Styling Tool.

This resource was designed to help course builders get the most out of Blackboard Ultra and their instructional content. With it you can:

  • Utilize additional options for designing imagery, video, and textbook-like styling for course content
  • Reduce cognitive load on students by generating consistent and intuitive content stylings
  • Confidently design content that would normally involve HTML and CSS without writing a line of code
I need to...
Create link buttons
Styled links make sure students know they're leaving Blackboard and where they're headed.
Make a bulleted list
Whether for "key points" or "terms to remember", easily call attention to lists of content.
Call out text and quotes
Text highlights and block quotes pull information out of the main text and put it in the spotlight.
Show what to do next
This lecture has ended, but now what? Next steps help orient students on how to continue in their course.
Title sections of a lecture
Some lectures have a lot to cover. Section headers make it easy for students to keep track of where they are while reading.
Embed a video
Easily create full width embeds for videos from Kaltura, YouTube, Vimeo, and more.
Crop an image
Seeing gray bars on the sides of your image? The image cropper snips your image to suitable sizes.
Build a course banner
The new Blackboard comes with a new banner style! Easily create a banner that works in Ultra.
Make a video thumbnail
Add an appealing wrapper to videos you upload to Kaltura with custom video thumbnails.

Need assistance?

We're here to help! The Media Innovation team provides creative services for SHSU college faculty members who teach online. Our talented team creates a variety of custom multimedia content, including banners and graphics for courses and course videos.

Check out our services guide
Outgoing Links
Outgoing Links

This feature enables you to quickly generate buttons that can be used in the place of hyperlinks to direct students to external instructional material or resources. These buttons stand out from inline text and help call attention to content while providing a standardized context for the type of content the student can expect to see upon clicking.

Button text that exceeds a certain length will be truncated with an ellipsis, but will be visible in a tool-tip on hover. You can drag and drop buttons to reorder them using the left side handles with the arrow icons on them.

Center mouse clicking (clicking the scroll wheel) on populated fields will clear them. Doing so on an empty field will remove the full line.

Pressing enter inside of a populated field will create a new list item below the currently selected one and move any text to the right of the cursor into the new line. If the field is empty or there is no text to the right of the cursor a new line will be created below the selected one, and the cursor will be placed inside of a field in the new line

Key Points List
Key Points List

This feature enables you to quickly generate a highlighted list of items with a title and subtitle that can be used to emphasize key information. These lists are styled in a way that stands out from the other inline text and helps communicate high priority concepts or information.

Key points lists can be assigned a background color to add visual interest or diversity to text information (Background color options match the color options on the course/lesson banner images). Further emphasis may be added to specific points by applying the focus selector to a list. The effect of focusing content works best when used sparingly.

These lists can also be used a a replacement for the more basic inline lists in blackboard by using the "inline" option, which removes the outer styling of the list.

Leaving the list title or subtitle blank will remove it completely. You can drag and drop list items to reorder them using the left side handles with the arrow icons on them. Setting the bullet type to auto will automatically set the bullet to the last type that was manually set in the list.

Center mouse clicking (clicking the scroll wheel) on populated fields will clear them. Doing so on an empty field will remove the full line.

Pressing enter inside of a populated field will create a new list item below the currently selected one and move any text to the right of the cursor into the new line. If the field is empty or there is no text to the right of the cursor a new line will be created below the selected one, and the cursor will be placed inside of a field in the new line

Wrapping text in certain tags will invoke inline styling:

  • The "b" tag will bold text. ex: <b>text</b> displays as: text
  • The "i" tag will italicize text. ex: <i>text</i> displays as: text
  • The "u" tag will underline text. ex: <u>text</u> displays as: text
  • The "s" tag will strike through text. ex: <s>text</s> displays as: text
  • The "a" tag will wrap text in a hyperlink. ex: <a href='https://url.com'>text</a> displays as: text
List Title
Focus
Inline
Color
Subtitle Text
Code to Clipboard
Copy Share Link
Reset
Text Highlight
Text Highlight

This feature enables you to quickly generate a text box that stands out from the other inline text and can be used to call attention to specific information. Text highlights can also be used to display pull quotes, important questions, or helpful tips by using the "query", "quote", or "tip" options.

These highlight boxes can be assigned a background color to add visual interest or diversity to text information (Background color options match the color options on the course/lesson banner images). Further emphasis may be added to specific points by applying the focus selector to a highlight box. The effect of focusing content works best when used sparingly.

When using the query or quote options you may also horizontally center and/or increase the size of the text.

Text highlights also have options for attribution which are right aligned by default, but can also be left aligned. Leaving the attribution field blank will remove the attribution styling completely.

Wrapping text in certain tags will invoke inline styling:

  • The "b" tag will bold text. ex: <b>text</b> displays as: text
  • The "i" tag will italicize text. ex: <i>text</i> displays as: text
  • The "u" tag will underline text. ex: <u>text</u> displays as: text
  • The "s" tag will strike through text. ex: <s>text</s> displays as: text
  • The "a" tag will wrap text in a hyperlink. ex: <a href='https://url.com'>text</a> displays as: text
Query
Quote
Tip
Focus
Center
Large
Color
Text to Highlight
Attribution
Code to Clipboard
Copy Share Link
Reset
Next Steps
Next Steps

This feature enables you to quickly generate a list to include at the end of each lecture that calls attention to the actions a student should take once the lecture has been completed. "Next Steps" lists stand out from regular text content as well as styled text sections and are visually separated from other instructional materials. They are designed to help guide students through their courses and cut down on confusion about what to do next.

Center mouse clicking (clicking the scroll wheel) on populated fields will clear them. Doing so on an empty field will remove the full line.

Pressing enter inside of a populated field will create a new list item below the currently selected one and move any text to the right of the cursor into the new line. If the field is empty or there is no text to the right of the cursor a new line will be created below the selected one, and the cursor will be placed inside of a field in the new line

Wrapping text in certain tags will invoke inline styling:

  • The "b" tag will bold text. ex: <b>text</b> displays as: text
  • The "i" tag will italicize text. ex: <i>text</i> displays as: text
  • The "u" tag will underline text. ex: <u>text</u> displays as: text
  • The "s" tag will strike through text. ex: <s>text</s> displays as: text
  • The "a" tag will wrap text in a hyperlink. ex: <a href='https://url.com'>text</a> displays as: text
Code to Clipboard
Copy Share Link
Reset
Section Separators
Section Separators

These features enable you to quickly generate visual indicators that can be used to separate content into distinct sections. These divisions can help group instructional content into more digestible parts.

Section Titles

The Section Title is best used at the beginning of a lecture document to clearly establish the content to follow. Titles can be customized with subtitle and section inputs to communicate more context about the lecture content below as well as color options.

Section Headers

These headers help divide content within a lecture into clearly defined sections to help orient readers within larger bodies of instructional content. They include options such as section titles, subtitles, accents with section numbers, and several color options.

Dividers

Dividers are simple horizontal lines that span the full width of the available space and can be used to divide content within sections established by section headers. They include black and white color options along with the option to remove the margins that vertically center them within the minimum height of Blackboard's HTML boxes in case that they are being used in a different context.

Section Title
Color
Section
Title
Subtitle
Code to Clipboard
Copy Share Link
Reset
Section Header
Color
Accent
Number
Title
Subtitle
Code to Clipboard
Copy Share Link
Reset
Simple Divider
Color
Margin
Code to Clipboard
Copy Share Link
Video Embed
Video Embed

This feature enables you to quickly generate a responsive full-width video embed. The tool can be used for general embeds as well, but all embeds will be output in a responsive 16:9 format that is standard for video.

Kaltura Video Embed
Kaltura Media Entry ID
Start Time (min : sec)
:
End Time (min : sec)
:
Code to Clipboard
Copy Share Link
Youtube/Vimeo Video Embed
Youtube/Vimeo Video URL
Start Time (min : sec)
:
End Time (min : sec)
:
Code to Clipboard
Copy Share Link
General iFrame Embed
iFrame Code
Code to Clipboard
Copy Share Link
SHSU Course Banner
SHSU Course Banner

This feature enables you to quickly generate a consistently styled course banner image that can be used to add context to the subject matter of your course. These course banner images match in styling with video thumbnail images and include color options consistent with this tool's other features. The same pixelized styling of these assets can be found in broader SHSU Online visual communications and marketing.

Selecting an image

To choose an image that you would like to use as the background of your banner you may either click on the preview window to open a file explorer window and select your image, drag the image you would prefer to use and drop it over the preview window, or with the image you would prefer to use copied to your clipboard paste while hovering your mouse over the preview window. You may also click on the box below the “image preview” label to select an image from an archive of images arranged by relevance to each college.

Adjusting the Background

Using the diamond-shaped directional arrows shown under the “background adjust” label you are able to control the position of the image you’ve selected within the preview. Clicking the triangular corner buttons automatically snaps the image to its corresponding corner, and the small square button in the center will center the image within the preview.

To the right of the position adjustments, you will find a zoom adjustment section which can be used to shrink or expand the image in the preview window.

If your image is overly bright such that the text is difficult to read you may also use the brightness adjustments on the far right of the “image adjust” section to darken it.

Note that because they are already pre-adjusted, background adjustments are disabled when selecting an image from the image archive.

Changing the Image Effects

The position of bright and blurred squares of the pixelation effect can be adjusted using the arrow controls found under the “effect position” label. These controls function similarly to the “background adjust” controls found to their left.

Changing the color is done by selecting the button under the “effect color” label and choosing your preferred color option. You may also use the slider under the label “color level” to adjust the intensity of the color effect.

Exporting your image

Once you are satisfied with your settings you may click the blue button to the far right to download your image. This may take a few seconds to process. The name for your file will generate from a combination of the inputs in the lesson number and lesson name fields. Should you choose to leave these fields blank the tool will generate a name for you.

Banner Preview
Drag and drop or click to choose a file
Ctrl+V to paste from clipboard
Drag and drop or click to choose a file
Ctrl+V to paste from clipboard
Image Selection
Background Adjust
Effect Position
Effect Color
Color Level
File Settings
Generates random name if blank.
Exclude file extensions.
Branded Course Banner
Branded Course Banner

This feature enables you to quickly generate a consistently styled course banner image that can be used to add context to the subject matter of your course. These course banner images match in styling with video thumbnail images and include color options consistent with this tool's other features.

Selecting an image

To choose an image that you would like to use as the background of your banner you may either click on the preview window to open a file explorer window and select your image, drag the image you would prefer to use and drop it over the preview window, or with the image you would prefer to use copied to your clipboard paste while hovering your mouse over the preview window. You may also click on the box below the “image preview” label to select an image from an archive of images arranged by relevance to each college.

Adjusting the Background

Using the diamond-shaped directional arrows shown under the “background adjust” label you are able to control the position of the image you’ve selected within the preview. Clicking the triangular corner buttons automatically snaps the image to its corresponding corner, and the small square button in the center will center the image within the preview.

To the right of the position adjustments, you will find a zoom adjustment section which can be used to shrink or expand the image in the preview window.

If your image is overly bright such that the text is difficult to read you may also use the brightness adjustments on the far right of the “image adjust” section to darken it.

Note that because they are already pre-adjusted, background adjustments are disabled when selecting an image from the image archive.

Choosing your partner logo

The position of bright and blurred squares of the pixelation effect can be adjusted using the arrow controls found under the “effect position” label. These controls function similarly to the “background adjust” controls found to their left.

Changing the color is done by selecting the button under the “effect color” label and choosing your preferred color option. You may also use the slider under the label “color level” to adjust the intensity of the color effect.

Exporting your image

Once you are satisfied with your settings you may click the blue button to the far right to download your image. This may take a few seconds to process. The name for your file will generate from a combination of the inputs in the lesson number and lesson name fields. Should you choose to leave these fields blank the tool will generate a name for you.

Banner Preview
Drag and drop or click to choose a file
Ctrl+V to paste from clipboard
Drag and drop or click to choose a file
Ctrl+V to paste from clipboard
Image Selection
Background Adjust
Effect Position
Effect Color
Color Level
TSUS University Logo
Partner Logos
Invert
File Settings
Generates random name if blank.
Exclude file extensions.
SHSU Video Poster
SHSU Video Poster

This feature enables you to quickly generate a consistently styled thumbnail image that can be used to bring a cohesive feel to the videos in your course. These video thumbnail images match in styling with course banner images and include color options consistent with this tool's other features. The same pixelized styling of these assets can be found in broader SHSU Online visual communications and marketing.

Selecting an image

To choose an image that you would like to use as your thumbnail background you may either click on the preview window to open a file explorer window and select your image, drag the image you would prefer to use and drop it over the preview window, or with the image you would prefer to use copied to your clipboard paste while hovering your mouse over the preview window.

Adjusting the Background

Using the diamond-shaped directional arrows shown under the “background adjust” label you are able to control the position of the image you’ve selected within the preview. Clicking the triangular corner buttons automatically snaps the image to its corresponding corner, and the small square button in the center will center the image within the preview.

To the right of the position adjustments, you will find a zoom adjustment section which can be used to shrink or expand the image in the preview window.

If your image is overly bright such that the text is difficult to read you may also use the brightness adjustments on the far right of the “image adjust” section to darken it.

Changing the Image Effects

The position of bright and blurred squares of the pixelation effect can be adjusted using the arrow controls found under the “effect position” label. These controls function similarly to the “background adjust” controls found to their left.

Changing the color is done by selecting the button under the “effect color” label and choosing your preferred color option. You may also use the slider under the label “color level” to adjust the intensity of the color effect.

Exporting your image

Once you are satisfied with your settings you may click the blue button to the far right to download your image. This may take a few seconds to process. The name for your file will generate from a combination of the inputs in the lesson number and lesson name fields. Should you choose to leave these fields blank the tool will generate a name for you.

Poster Preview
College of
[SHSU College]
Lesson 1
Introduction to Course Name
Drag and drop or click to choose a file
Ctrl+V to paste from clipboard
Drag and drop or click to choose a file
Ctrl+V to paste from clipboard
Background Adjust
Effect Position
Effect Color
Color Level
College Name
Lesson Number
Lesson Name
Branded Video Poster
Branded Video Poster

This feature enables you to quickly generate a consistently styled thumbnail image that can be used to bring a cohesive feel to the videos in your course. These video thumbnail images match in styling with course banner images and include color options consistent with this tool's other features.

Selecting an image

To choose an image that you would like to use as your thumbnail background you may either click on the preview window to open a file explorer window and select your image, drag the image you would prefer to use and drop it over the preview window, or with the image you would prefer to use copied to your clipboard paste while hovering your mouse over the preview window.

Adjusting the Background

Using the diamond-shaped directional arrows shown under the “background adjust” label you are able to control the position of the image you’ve selected within the preview. Clicking the triangular corner buttons automatically snaps the image to its corresponding corner, and the small square button in the center will center the image within the preview.

To the right of the position adjustments, you will find a zoom adjustment section which can be used to shrink or expand the image in the preview window.

If your image is overly bright such that the text is difficult to read you may also use the brightness adjustments on the far right of the “image adjust” section to darken it.

Changing the Image Effects

The position of bright and blurred squares of the pixelation effect can be adjusted using the arrow controls found under the “effect position” label. These controls function similarly to the “background adjust” controls found to their left.

Changing the color is done by selecting the button under the “effect color” label and choosing your preferred color option. You may also use the slider under the label “color level” to adjust the intensity of the color effect.

Exporting your image

Once you are satisfied with your settings you may click the blue button to the far right to download your image. This may take a few seconds to process. The name for your file will generate from a combination of the inputs in the lesson number and lesson name fields. Should you choose to leave these fields blank the tool will generate a name for you.

Poster Preview
Lesson 1
Introduction to Course Name
Drag and drop or click to choose a file
Ctrl+V to paste from clipboard
Drag and drop or click to choose a file
Ctrl+V to paste from clipboard
Background Adjust
Effect Color
Color Level
TSUS University Logo
Partner Logos
Invert
Lesson Number
Lesson Name
Image Cropper
Image Cropper

This feature enables you to quickly apply consistent wide aspect ratio cropping to images that may be used inline in lectures. The sizing options available in this tool are tested to display well in Blackboard Ultra on desktop and mobile views, and output images in a resolution that ensures they are displayed crisply at minimal file size. Keeping imagery consistently within the same sizing can contribute to an overall clean and high-quality perception of course content.

Selecting an image

To choose an image that you would like to crop you may either click on the preview window to open a file explorer window and select your image, drag the image you would prefer to use and drop it over the preview window, or with the image you would prefer to use copied to your clipboard paste while hovering your mouse over the preview window.

Positioning the Background

Images that are cropped using this tool feature are output to one of a predetermined set of sizes. There are three size options that can be selected from that can be found under the label “height”.

Resolutions: Normal - 1200px * 450px, Short - 1200px * 300px, Thin - 1200px * 225px

Using the diamond-shaped directional arrows shown under the “image adjust” label you are able to control the position of the image you’ve selected within the preview. Clicking the triangular corner buttons automatically snaps the image to its corresponding corner, and the small square button in the center will center the image within the preview.

To the right of the position adjustments, you will find a zoom adjustment section which can be used to shrink or expand the image in the preview window.

Exporting your image

Once you are satisfied with your settings you may click the blue button to the far right to download your image. This may take a few seconds to process. You will find a field to the left of the download button under the label file settings that allows you to input a name for your image. Should you choose to leave this field blank the tool will generate a name for you.

Crop Preview
Drag and drop or click to choose a file
Ctrl+V to paste from clipboard
Drag and drop or click to choose a file
Ctrl+V to paste from clipboard
Image Adjust
Height
File Settings
Generates random name if blank.
Exclude file extensions.
Edit Exported Embed
Edit Exported Embed

This feature enables you to edit HTML embeds that you have already placed into a course without having to recreate them or necessitating the use of HTML. By utilizing a unique identifier placed in each embed when generated, this feature can refill fields from a backup of the state they were in when the HTML code was first generated.

Because it relies on a backup of form data created when the HTML embed code is copied to your clipboard this feature cannot account for changes made to the code after it was initially created and only works with embeds that were created after 11/7/2022 when this feature was implemented.

HTML Code To Recall
Load HTML Code
Combine Link Buttons
Combine Link Buttons

In some past versions of "outgoing link buttons" certain margin stylings were configured in a way that might leave gaps above or below links when their code was retroactively edited to add or remove buttons. This feature enables you to re-import multiple individual or grouped "outgoing link button" code blocks to be edited and/or re-exported into a single block with appropriate margins.

All Outgoing Link Code To Combine
Combine Link Buttons
Google Chrome Required
Many of the features of this tool require the use of Google Chrome as a web browser to operate as intended.
Loading...
Course Banner Background Archive

Open Resources for Finding Images

There are several publicly accessible royalty free options for finding imagery related to course material. The list below is in no particular order and names only a few of the options you may find.

Smithsonian Open AccessNational Gallery of Art CollectionUnsplashFreepikPexelsShopify BurstKaboompicsLifeofpixGratisography

Choosing Effective Images

Course banners are an opportunity to set the tone for a course with imagery that gives students context into the content they will be covering. To make the best of this oportunity its best to avoid overly "stock looking" images (figure 1 ) and steer away from imagery that doesn't offer additional context to course concepts (figure 2 ). Additionally, images that evoke information relivant to the course, but are also focused on text from the course's title (figure 3 ) are usually made more effective by excluding the redundant terms and highlighting the imagery (figure 4 ).

Figure 1.
Figure 2.
Figure 3.
Figure 4.