Knowledge Base/Visual SML/Visual SML Documentation

Like Widget

  • Like - Place a Like or Recommend button anywhere on the tab
    • Basic Settings: (Defaults to display faces, Like Button, light color scheme, Send button included, Verdana font, Standard Layout Style, and width is 250.)
      • Show Faces, choose to include users' profile pictures who have clicked on Like or Recommend.
      • Select which button you want to include: either Like or Recommend
      • Enter the URL for Like or Recommend button: This is the URL that will display in users' newsfeeds when they click on the button. (Can be linked to the Tab or to an individual content item.)
      • Set the Color Scheme to be light or dark
        • Set to Light if your background color or image is of a light color, this setting will make the text darker so it will show up better on the page.
        • Set to Dark if your background color or image is of a darker color, this setting will make the text lighter so it will show up better on the page.
      • Choose to include a Send Button or not
      • Choose your font from the Facebook approved font list.
      • Choose your style layout; choose between standard, button count or box count style. Click here to get more details about styling the like button.
      • Enter the px width at which you want this widget to be displayed. (Default is 210px and cannot be made wider, but can be made smaller.)


 Set the look and feel of this widget in the Style settings on the right.

  • Click on the bar that appears across the top of the widget to select it if you haven't done so already
  • Next click on the Style tab in the toolbox to the right.
    • Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
    • Settings include the following options:
      • Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.
        • Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.
      • Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.
        • Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.
      • Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)
        • Headers: Select the font and size of the Headers (titles) in the widget.
        • Body/Default: Select the font and size of the text that appears in the widget. 
        • Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)
      • Color: Click into the field to enter a hex code, or choose from the color selector that appears.
        • Background: Color will appear behind this widget specifically.
        • Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
        • Header: Color of any titles.
        • Body: Color of any text.
        • Links: Color of any links.
        • Links (hover): Color any link will change to when the cursor is moved over the link.
        • Button: Color of any buttons, i.e. Follow or Submit.
        • Button Text: Color of the text inside the button.
      • Links: Select Underline or No Underline to designate how links are displayed in the widget.
      • Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.
        • Size range: 1px-5px and 10px
        • Patterns: Solid, Dotted, Dashed, Inset, Outset, Double
      • Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

 

 

Go to another Widget: