Widget Builder

You can embed this widget on any site that supports JavaScript. To the right, you'll see the widget as it will be displayed. Customize the widget by updating the settings on the left side. Once you have it the way you want it, click on the "Display Widget Code" button - that's the code you'll need to insert to display the widget.

Widget Settings

Title

Size (in px)

Number of Items

(maximum of 50)

Title Font

Font Family

Font Size

Letter Spacing

Line Height

Font

Font Family

Font Size

Letter Spacing

Line Height

Small Font

Font Family

Font Size

Letter Spacing

Line Height

Colors

Background Color

Text Color

Link Color

Visited Link Color

Title Background Color

Title Text Color

Image Border Color

Rounded Corners

Border Color

Highlighted Row Background Color

Border Type

Outside Border Width

This code must be inserted within the page where you want the widget to appear.

'styleSettings.sidebarOuterEdgeBackgroundColor': '{styleSettings_sidebarOuterEdgeBackgroundColor}',
      'styleSettings.sidebarHighlightedRowBackgroundColor': '{styleSettings_sidebarHighlightedRowBackgroundColor}',
      'styleSettings.sidebarRoundedBorderStyle': '{styleSettings_sidebarRoundedBorderStyle}',
      'styleSettings.sidebarBorderColor': '{styleSettings_sidebarBorderColor}',
      'styleSettings.sidebarBorderStyle': '{styleSettings_sidebarBorderStyle}',
      'styleSettings.sidebarBorderWidth': '{styleSettings_sidebarBorderWidth}',

'styleSettings.widgetFontType': '{styleSettings_widgetFontType}',
      'styleSettings.widgetFontFamily': '{styleSettings_widgetFontFamily}',
      'styleSettings.widgetFontSize': '{styleSettings_widgetFontSize}',
      'styleSettings.widgetFontLetterSpacing': '{styleSettings_widgetFontLetterSpacing}',
      'styleSettings.widgetFontLineHeight': '{styleSettings_widgetFontLineHeight}',

'styleSettings.widgetSmallFontType': '{styleSettings_widgetSmallFontType}',
      'styleSettings.widgetSmallFontFamily': '{styleSettings_widgetSmallFontFamily}',
      'styleSettings.widgetSmallFontSize': '{styleSettings_widgetSmallFontSize}',
      'styleSettings.widgetSmallFontLetterSpacing': '{styleSettings_widgetSmallFontLetterSpacing}',
      'styleSettings.widgetSmallFontLineHeight': '{styleSettings_widgetSmallFontLineHeight}',
      'styleSettings.widgetImageBorderColor': '{styleSettings_widgetImageBorderColor}',

'styleSettings.widgetTitleFontType': '{styleSettings_widgetTitleFontType}',
      'styleSettings.widgetTitleFontFamily': '{styleSettings_widgetTitleFontFamily}',
      'styleSettings.widgetTitleFontSize': '{styleSettings_widgetTitleFontSize}',
      'styleSettings.widgetTitleFontLetterSpacing': '{styleSettings_widgetTitleFontLetterSpacing}',
      'styleSettings.widgetTitleFontLineHeight': '{styleSettings_widgetTitleFontLineHeight}'
    }
  );
</script>