Cobra Learning - Custom Widgets

CobraBanner

Creating and editing custom widgets

Shared widgets appear on the Custom Widgets tab in the Widgets tool and they are distinguishable by a Shared Widget icon. They are available to add to your course homepage, but you cannot modify their content. You can only modify the content for custom widgets that are created within your course offering.

  1. Create a custom widget
  2. Edit a custom widget
  3. Properties
  4. Content
  5. Release conditions
  6. Replace strings
  7. Editing Widget Display

Create a custom widget

  1. On the My Home or Course Home page, click Edit Course, then click Widgets.
  2. Click Create Widget.
  3. Enter a Name and Description for the widget.
  4. If you want to share your custom widget with other org units, click Add an Org Unit (only applicable at the organization level).
  5. Click Save and Close.

Edit a custom widget

  1. On the My Home page or a course homepage, click Edit Course, then click Widgets.
  2. Click the Edit icon beside the widget you want to edit.
  3. Make your changes and click Save and Close.

Properties

The Properties tab allows you to define or change the widget name, description, and sharing settings (only available at the organization level).

Content

The Content tab allows you to add your own custom HTML (with the exception of ASP) code and incorporate your organization or course’s specific colors, and logos when creating widgets.

Use the default content window of the HTML Editor to add content to your widget and click the Edit HTML Source icon in the bottom left corner to add HTML custom code.

Add HTML custom code

  1. In the Content tab on the Edit Widget page, click the Edit HTML Source icon in the bottom left corner of the HTML Editor to open the HTML Source Editor.
  2. Add your HTML custom code. For example, the following HTML custom code can be used to create a YouTube solar car video feed using a “solar car” tag:

    <iframe height="350" width="265" frameborder="0" src="http://www.youtube.com/videos_list?tag=solar car" marginheight="0" marginwidth="0" name="videos_list" id="videos_list"></iframe>

  3. Click Update.
  4. Click Customize Widget Style to apply different styling options to the widget. See Editing widget display.

    Note  To help you meet visual accessibility standards, there is a built-in WCAG (Web Content Accessibility Guideline) checker on the Widget Settings page. Be aware that if you choose a shade that does not meet these guidelines (for example, the contrast between the text color and the background color is too low), the check mark by WCAG AA will be replaced by a  warning or  error icon to alert you to possible accessibility issues.

  5. Click Save and Close.

Back to top

Release conditions

The Release Conditions tab allows you to define a set of criteria that must be fulfilled (e.g. a user must be enrolled in the current org unit as a specific role). If a user doesn't meet the set release conditions they won’t see this widget on their homepage. For example, you could create a widget with links visible only to instructors.

The conditions most likely to apply to widgets are as follows:

  • Group Enrollment  Users must belong to the selected group to see the widgets associated with the condition.
  • Org Unit Enrollment  Users must belong to the selected org unit to see the widgets associated with the condition.
  • Section Enrollment  Users must belong to the selected section within your course to see the widgets associated with the condition.
  • Role in Current Org Unit  Users must be enrolled in your course as a certain role to see the widgets associated with the condition.

Back to top

Replace strings

Replace strings allow you to use dynamic fields in HTML content that display applicable information based on the user and org unit. They are available when you create widgets and other HTML content using the HTML Editor.

Current Org Unit {OrgUnitId}, {OrgUnitName}, {OrgUnitCode}, {OrgUnitTypeID}

Organization  {OrgId}, {OrgName}

Current user {UserId}, {UserName}, {OrgDefinedId}, {FirstName}, {LastName}, {Email}

User’s role in current org unit  {RoleId}, {RoleCode}

Back to top


Editing widget display

You can customize the following aspects of system or custom widgets for your homepages:

  • Titlebar: text and font color.
  • Titlebar background: fill type and color.
  • Titlebar shadow effects: color, vertical size, and blur level.
  • Titlebar border: style, color, and width.
  • Widget shadow: color, vertical and horizontal size, shadow spread, and blur level.
  • Widget border: style, color, and width.
  • Widget shape: corner roundness or sharpness

Custom widgets provide additional options that enable you to create widgets that blend into the homepage background:

  • Widget background: transparency.
  • Widget padding: change the spacing around the content within the widget to blend more seamlessly into the background of the page.

A custom widget with a hidden titlebar, transparent background (with homepage background showing through), and rounded corners.


A custom widget with a gradient titlebar, titlebar dropshadow, large internal padding, and sharp corners. The page background is visible around the edges of the widget.

Access widget display settings

Do one of the following:

  • On a homepage, click Style this widget from a widget menu.
  • While editing a homepage, click on a widget in the Widgets area.
  • If you want to customize the default display of a widget instead of its display on a specific homepage, access the widget from the Widgets tool. Click Customize [widget name] beside the widget you want to style.

Note  Widgets shared down from parent org units will retain the style from that level. Customizing a widget from the widget tool does not override the parent org style; instead it creates an additional override at the homepage level.

Edit widget display

To Do this
Hide the titlebar

Clear the Display Titlebar check box

Prevent users from closing the widget on the homepage Select the Prohibit minimizing widget check box
Set a custom title Select the Custom radio button, and enter your text in the field
Change the font color of the title Select a font color from the Color selector in the Titlebar area
Change the background of the titlebar
  • Select Gradient or Solid from the Fill Type drop-down list.
  • Tip  A gradient fill type creates a three-dimensional look for your homepage.

  • Select a color style: soft, light, or dark. These colors are set by your administrator.
  • Or, select a custom color for your widget's titlebar background.
  • Note  If you select a gradient fill type, two color selectors appear: the gradient's top color on the left, and bottom on the right.

Create a shadow effect on the titlebar
  • Select a font color from the Color selector in the Titlebar Shadow area
  • Set a Vertical amount and a Blur level in the fields provided
Change the border on the titlebar
  • Clear the Display Border check box to remove the border
  • Select a line type from the Border Style drop-down list
  • Select a border color from the Color selector
  • Select a border width from the Width drop-down list
Show the page background in a custom widget
  • Select the Transparent check box in the Widget Background area
Create a shadow effect on the widget
  • Select a shadow color from the Color selector
  • Set the Vertical and Horizontal pixels, the Spread of the shadow, and the Blur level in the fields provided
Change the border of the widget
  • Clear the Display Border check box to remove the border
  • Select a line type from the Border Style drop-down list
  • Select a border color from the Color selector
  • Select a border width from the Width drop-down list
Change the shape of the corners on the widget
  • Set a pixel value for each corner of the widget in the fields provided
  • Tip  The higher the value, the more rounded the corners appear. The lower the value, the sharper the corners appear. The lowest value you can enter is 0.

Change the padding on custom widgets
  • Set a pixel value for each side of the widget in the fields provided

Note  To help you meet visual accessibility standards, there is a built-in WCAG (Web Content Accessibility Guideline) checker on the Widget Settings page. Be aware that if you choose a shade that does not meet these guidelines (for example, the contrast between the text color and the background color is too low), the check mark by WCAG AA will be replaced by a  warning or  error icon to alert you to possible accessibility issues.

See Also:


Tech Service Desk: Contact and Hours

Room A184 * 217-353-3333 * techhelp@parkland.edu * 7:30 a.m. - 6:00 p.m. M-Th. / 7:30 a.m. - 5:00 p.m. Fridays

Satellite location * Parkland Library * 10:00 a.m. - 2:00 p.m. M-Th. / 10:00 a.m. - 12:00 p.m. Fridays




Keywords:Cobra widget custom course   Doc ID:47356
Owner:Lori W.Group:Parkland College
Created:2015-02-18 15:09 CDTUpdated:2015-02-18 18:02 CDT
Sites:Parkland College
Feedback:  0   0