Skip to Local Navigation
Skip to Content
California State University, Long Beach
Office of the Provost, Division of Academic Affairs Home
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 
 

Creating Custom Widgets

Create a custom widget

  1. Click on the Edit Course link from the course navbar.
    Edit Course screenshot
  2. Click Widgets .
    Widgets link screenshot
  3. Click New Widget .
    New Widget screenshot
  4. Type a Name for the widget and an optional associated Description.
  5. Add a thumbnail image for your widget by clicking the Add a File button (optional). 
  6. Click Save .
    Widget Properties tab screenshot
  7. Click the Customize tab to change the following settings:
    • Display widget with a border - Select this check box if you want to display your widget in a box.
    • Border Style - Select the border thickness for your widget.
    • Show the title bar - Select this check box if you want to show the title bar.
    • Title Bar Color - Choose a color for your Title Bar.
    • Widget Title - Type a title for the box (e.g. Search Engines, Campus Info, etc).
    • Title Color - Choose a color for your widget title.
    • Title Alignment - Choose how you want the widget title aligned within its associated column.
    • Prohibit minimizing widget - Select this check box if you want to prohibit the ability to minimize widgets.
      Widget Customize tab screenshot
  8. Click the Release Conditions tab and click Attach Existing or Create and Attach to add applicable release conditions.
    Widget Release Conditions tab screenshot
  9. Click the Content tab to add your custom content.
    Widget Content tab screenshot

Edit a custom widget

  1. Click on the Edit Course link from the course navbar.
  2. Click Widgets . The Manage Widgets page displays.
  3. From the Custom Widgets tab, click the Edit icon for your widget. The Edit Widget page displays.

Add HTML custom code

  1. Go to the Content tab on the Edit Widget page.
  2. Click the Edit HTML Source icon in the bottom left corner of the HTML Editor to open the HTML Source Editor.
    HTML Source icon screenshot
  3. In the HTML Source Editor window, add your HTML custom code. For example, the following HTML custom code can be used to embed a YouTube solar car video feed using a “solar car” tag (You Tube's Embed Code).

    <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>

  4. Click Update .
    HTML Source Editor screenshot
  5. Click Save to apply your changes.

 

Back to top

​