Customizing the Litmos course listing widget

If you know how to code html and css you can easily customize your course listing widget.

Once you have pasted your widget code into your page it should look something like this.

<link href='http://static1.litmos.com/static/css/widget.css?v=3.20090623' 
rel="Stylesheet" />
<script src="http://your-company.litmos.com/courses/widget.aspx?apikey=ABC-DEF-GHI-JKL" 
type="text/javascript"></script>

To change the style of the widget simply remove the link to the stylesheet from your page.

<link href='http://static1.litmos.com/static/css/widget.css?v=3.20090623' 
rel="Stylesheet" />

And replace it with your own styles using the following css classes.

<style type="text/css">
   /* Widget Container */
   #lw
   {
      border: solid 1px #ccc;
      width: 500px;
      padding: 5px;
      font-family: Verdana,Arial,Sans-serif;
   }
   /* Course List Container */
   #lwc dl
   {
       margin: 0px;
       padding: 0px;
   }
   /* Course Description */
   #lwc dl dd
   {
       margin: 0px;
       padding: 2px 0px 10px 20px;
       font-size: 0.8em;
   }
   /* Widget Footer */
   #lwf
   {
       padding: 3px;
       text-align: right;
       font-size: 9px;
       border-top: solid 1px #dcdcdc;
   }
</style>
Have more questions? Submit a request

0 Comments

Article is closed for comments.