Knowledge Base/Visual SML/Visual SML Documentation

Flickr Slideshow Widget

  • Flickr Slideshow - Images will rotate through a slideshow for your users, can scroll through images manually as well. (Defaults to photos from snwbeast)
    • Basic Settings:
    • Advanced Settings: (Default number of images to show is 8, Pause time is 5000, Gallery is off, and Manual transition is off)
      • Enter how many images to be displayed
      • To show the title of each Photo as is assigned to the photo in Flickr: Select True
      • Enter the Pause time. (Enter 1000 for 1 second, 5000 = 5 seconds, etc.)
      • To show the gallery of images along the bottom: Select True
      • To show the bottom navigation below your photos: Select Tarue
      • To Enable the Manual Transition: Select True (Selecting True will disable the automated scroll)
      • See Widget Styling options below

 VSML_Flickr.png

 

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: