The "Widget Option" fields that display in the Custom Render Handler Properties Dialog are generated by the fields in the Widget’s bound Custom Metadata Form.

These values affect the rendering of the Widget. Each Widget has it's own custom criteria that are geared to the features of the widget.

Some of the common features are explained below. For each one you have the ability to customize the rendering of the element:

  • Border, Padding, Gutter, Block
  • Title, Subtitle, Description, Line
  • Button or Text, Image
  • Most objects have options for color, style, padding, size
  • The Flyover Widget has movement options

Configurable Widget Objects

See the Live Demo pages for each Widget for specific examples of each.

Link/Button Properties (tab)

This tab has controls for managing the Link or Button that you choose to render for your Widget. These options are consistent for every Widget that has a button or link.

  • Button Type - There are 6 options available:
    • Button
    • Button with Icon on Left
    • Button with Icon on Right
    • Link
    • Link with Icon on Left
    • Link with Icon on Right

Both the "Link" and "Button" options have these fields to control the rendering of the link.

  • Align - left, center, right or inherit - the location of the link or button within the widget.
  • Size - There are 12 size options to choose from
  • Font Settings: Bold, Italic, Underline, Initial Case, Title Case, Upper Case, Lower Case
  • Color - many options to choose from, including 'not set' for the link or button text color.
  • Padding - This controls the space around the link or button
    • Units - Choose the web unit you want to use to render the padding value.
      • px
      • %
      • em
      • rem
      • vw
      • vh
      • vmin
      • vmax
      • none - this option hides the rest of the padding options
    • Top - type the number of web units to use for each of these padding locations
    • Right
    • Bottom
    • Left

The "Button" options include additional control for the background and shape of the button.

  • Background Color - many color choices in the listbox for the color behind the button text.
  • Style - choose one of 9 button styles
    • 3d
    • filled
    • filled with border
    • filled with inset
    • outline inset
    • outline with thick border
    • outline with thin border
    • skewed
    • skewed outlined
  • Effect - The behavior when the mouse hovers over the button  has these options:
    • default
    • fill on hover
    • lighten on hover
    • darken on hove
    • none
  • Button Corners - rounded or square

Link/Button Types that include an icon include a field to choose the icon from the Font Awesome collection. The Read More Widget has an icon choice for both the More (button or link) and Less (button or link).

The Action Buttons Widget has one additional field on this tab to control the spacing between the links/buttons.

 

Layout & Card Properties (tab)

This tab is shared by the Icon Textblock, Icon Counter and Image Textblock Widgets.

  • Layout  - defines the way the icon, title, subtitle and line are placed on the widget
    • stacked
    • stacked above
    • icon & title on same line
    • icon next to title and text
    • two column wrap (with icons in the middle)
  • Card - These options affect what the card looks like.
    • Align - applies to the Icon, Title, Subtitle and Description
      • left
      • center
      • right
      • inherit
    • Border Size in pixels - defines how thick the border is
    • Background Color - many colors to choose from, including 'not set'
    • Border Color - many colors to choose from, including 'not set'
    • Style - options to define features of the card
      • small shadow
      • medium shadow
      • bottom shadow
      • full shadow
      • left edge turned up
      • right edge turned up
      • button edges turned up
      • none
    • Padding
      • Units - pick the web unit you wish to use to render the padding information.
        • px
        • %
        • em
        • rem
        • vw
        • vmin
        • vmax
        • none
      • Top - The padding value around the edge of the card as defined by your Units selection above.
      • Right - the value for each of these locations relative to the content inside the card
      • Bottom
      • Left