Tabulous 2 Settings


Tabulous - Slide Container

  • Slide Count: (number) The number of tab slides
    • Default: 2slides
    • Min Value: 1slides
    • Max Value: 40slides
  • Reverse Slide Order?: (checkbox) Reverse the order of the slides. So slides at the end in Edit Mode will show up at the front in preivew. Its not the same as being able to freely drag and drop panels around. But, its a nice workaround.
    • Default: false
  • Preload Content?: (checkbox) Preload tab content: img,video,iframe,object
    • Default: false
  • Wait for Content Load?: (checkbox) Wait for the content to load before building the tabbed container. This could be if your tab contents contain other dynamic or javascript based stacks.
    • Default: false

  • Container: (select) The style of the Tabulous container. Use tabs or not.
    • Default: Tabbed
    • Possible Values:
      • Tabbed
      • General Slider - No tabs
  • Title Tag: (select) The type of tag element used for the title.
    • Default: H3
    • Possible Values:
      • Text
      • H1
      • H2
      • H3
      • H4
      • H5
      • H6
  • Show title in content?: (checkbox) Show the tab title inside the slider content area
    • Default: false

  • Background: (select) The background fill for the slide container
    • Default: None
    • Possible Values:
      • None
      • Solid Color
      • Tiled Image
  • Color: (color) Background color for the slider container.
    • Enable: When Background is set to color
    • Allows Opacity: false
  • Tile Image: (image) The image used as the background tile
    • Enable: When Background is set to tile
    • Default:

  • Detailed Padding?: (checkbox) Define detailed padding settings for the slider content area
    • Default: false
  • Padding: (slider) The uniform padding around the inside of the slider content area.
    • Enable: When Detailed Padding? is set to false
    • Default: 15px
    • Min Value: 0px
    • Max Value: 30px
  • Padding Top: (number) The padding for the top inside of the slider content area.
    • Enable: When Detailed Padding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Padding Bottom: (number) The padding for the bottom inside of the slider content area.
    • Enable: When Detailed Padding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Padding Left: (number) The padding for the left inside of the slider content area.
    • Enable: When Detailed Padding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Padding Right: (number) The padding for the right inside of the slider content area.
    • Enable: When Detailed Padding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px

  • Detailed Rounding?: (checkbox) Define detailed rounding settings for the slide container
    • Default: false
  • Round Corners: (slider) The uniform rounding around the slide container
    • Enable: When Detailed Rounding? is set to false
    • Default: 0px
    • Min Value: 0px
    • Max Value: 20px
  • Top Left: (number) The rounding for the top left of the slide container
    • Enable: When Detailed Rounding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Top Right: (number) The rounding for the top right of the slide container
    • Enable: When Detailed Rounding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Bottom Left: (number) The rounding for the bottom left of the slide container
    • Enable: When Detailed Rounding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Bottom Right: (number) The rounding for the bottom right of the slide container
    • Enable: When Detailed Rounding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px

  • Shadow: (color) The color of the drop shadow
    • Allows Opacity: false
  • X Offset: (slider) The horizontal offset for the drop shadow
    • Default: 0px
    • Min Value: -10px
    • Max Value: 10px
  • Y Offset: (slider) The vertical offset for the drop shadow
    • Default: 0px
    • Min Value: -10px
    • Max Value: 10px
  • Blur: (slider) The blur radius for the drop shadow
    • Default: 0px
    • Min Value: 0px
    • Max Value: 20px
  • Shadow Inset?: (checkbox) Make the shadow be inset
    • Default: false
  • Info: Increase the Stack Layout Padding setting in order to see the drop shadow.

Tabulous - Slide Transitions

  • Slide Effect: (select) This is the animation used to transition from one slide to the next. Make sure to check out our Animation Effects Browser.
    • Default: CSS3 + JS Fallback
    • Possible Values:
      • CSS3 + JS Fallback
      • JS Effect
  • CSS3 In: (select) The CSS3 animate in effect
    • Enable: When Slide Effect is set to css3
    • Default: Fade Right Big
    • Possible Values:
      • —- Attention Seekers —-
      • Flash
      • Bounce
      • Shake
      • Tada
      • Swing
      • Wobble
      • Wiggle
      • Pulse
      • —- Flippers —-
      • Flip
      • Flip X
      • Flip Y
      • —- Moving & Fading —-
      • Fade In
      • Fade Up
      • Fade Down
      • Fade Left
      • Fade Right
      • Fade Up Big
      • Fade Down Big
      • Fade Left Big
      • Fade Right Big
      • —- Bouncing —-
      • Bounce
      • Bounce Up
      • Bounce Down
      • Bounce Left
      • Bounce Right
      • —- Rotating —-
      • Rotate
      • Rotate Up Left
      • Rotate Up Right
      • Rotate Down Left
      • Rotate Down Right
      • —- Special —-
      • Speed In
      • Hinge
      • Roll In
  • CSS3 Out: (select) The CSS3 animate in effect
    • Enable: When Slide Effect is set to css3
    • Default: Fade Left Big
    • Possible Values:
      • —- Attention Seekers —-
      • Flash
      • Bounce
      • Shake
      • Tada
      • Swing
      • Wobble
      • Wiggle
      • Pulse
      • —- Flippers —-
      • Flip
      • Flip X
      • Flip Y
      • —- Moving & Fading —-
      • Fade Out
      • Fade Up
      • Fade Down
      • Fade Left
      • Fade Right
      • Fade Up Big
      • Fade Down Big
      • Fade Left Big
      • Fade Right Big
      • —- Bouncing —-
      • Bounce
      • Bounce Up
      • Bounce Down
      • Bounce Left
      • Bounce Right
      • —- Rotating —-
      • Rotate
      • Rotate Up Left
      • Rotate Up Right
      • Rotate Down Left
      • Rotate Down Right
      • —- Special —-
      • Speed Out
      • Hinge
      • Roll Out
  • JS Effect: (select) This is the animation used to transition from one slide to the next. Make sure to check out our Animation Effects Browser.
    • Default: easeInOutExpo
    • Possible Values:
      • Fade
      • linear
      • swing
      • easeInQuad
      • easeOutQuad
      • easeInOutQuad
      • easeInCubic
      • easeOutCubic
      • easeInOutCubic
      • easeInQuart
      • easeOutQuart
      • easeInOutQuart
      • easeInQuint
      • easeOutQuint
      • easeInOutQuint
      • easeInSine
      • easeOutSine
      • easeInOutSine
      • easeInExpo
      • easeOutExpo
      • easeInOutExpo
      • easeInCirc
      • easeOutCirc
      • easeInOutCirc
      • easeInElastic
      • easeOutElastic
      • easeInOutElastic
      • easeInBack
      • easeOutBack
      • easeInOutBack
      • easeInBounce
      • easeOutBounce
      • easeInOutBounce
  • Speed: (number) This is the speed at which the slide will adjust. The higher the number, the slower.
    • Default: 1500ms
    • Min Value: 0ms
    • Max Value: 3000ms
  • Continuous?: (checkbox) This allows for continuous sliding, which gives the slider a sort-of never ending effect. This is currently disabled for mobile devices as it’s a little too buggy.
    • Default: true
  • Transition on Hover?: (checkbox) Transition tabs when they are hovered over instead of clicked.
    • Default: false

  • Auto Slide?: (checkbox) This allows for continuous sliding, which gives the slider a sort-of never ending effect. This is currently disabled for mobile devices as it’s a little too buggy.
    • Default: true
  • Direction: (select) The direction which the auto slide will occur.
    • Enable: When Auto Slide? is set to true
    • Default: Right
    • Possible Values:
      • Left
      • Right
  • Wait Time: (number) You can change this if you want the slider to transition more frequently. The lower the number, the more frequently it will change.
    • Enable: When Auto Slide? is set to true
    • Default: 7000ms
    • Min Value: 0ms
    • Max Value: 30000ms

  • Dynamic Height?: (checkbox) This determines whether the height of the slider automatically adjusts based on the content. If false, the slider will assume the height of the largest panel.
    • Default: false
  • Min Height: (number) If you need to, you can set a minimum height. This is usually good when your content it loading after the slider is built.
    • Enable: When Dynamic Height? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 2000px
  • Height Effect: (select) This is the animation used to transition the height from one slide to the next. Make sure to check out our Animation Effects Browser.
    • Enable: When Dynamic Height? is set to true
    • Default: easeInOutExpo
    • Possible Values:
      • linear
      • swing
      • easeInQuad
      • easeOutQuad
      • easeInOutQuad
      • easeInCubic
      • easeOutCubic
      • easeInOutCubic
      • easeInQuart
      • easeOutQuart
      • easeInOutQuart
      • easeInQuint
      • easeOutQuint
      • easeInOutQuint
      • easeInSine
      • easeOutSine
      • easeInOutSine
      • easeInExpo
      • easeOutExpo
      • easeInOutExpo
      • easeInCirc
      • easeOutCirc
      • easeInOutCirc
      • easeInElastic
      • easeOutElastic
      • easeInOutElastic
      • easeInBack
      • easeOutBack
      • easeInOutBack
      • easeInBounce
      • easeOutBounce
      • easeInOutBounce
  • Effect Duration: (number) This is the speed at which the height will adjust. The higher the number, the slower.
    • Enable: When Dynamic Height? is set to true
    • Default: 1500ms
    • Min Value: 0ms
    • Max Value: 3000ms

Tabulous - Tabs

  • Font Awesome in Tabs?: (checkbox) Add the Font Awesome library so that they can be used within the tab titles.
    • Default: false
  • Info: Icon snippets can be found at http://fortawesome.github.io/Font-Awesome/icons

  • Position at Bottom?: (checkbox) Position the tabs at the bottom of the container. They will be positioned at the top by default.
    • Default: false
  • Tab Alignment: (select) Where the tabs will be aligned relative to the container.
    • Default: Left
    • Possible Values:
      • Left
      • Center
      • Right

  • Sizing: (select) How the tab widths will be sized
    • Default: Dynamic
    • Possible Values:
      • Dynamic
      • Fixed Width (px)
      • Variable (%)
  • Fixed Width: (number) The fixed width of the tabs in pixels. Remember that the actual width of the tabs equals the width + padding defined below.
    • Enable: When Sizing is set to fixed
    • Default: 250px
    • Min Value: 0px
    • Max Value: 1000px
  • Percent Width: (number) The percent width of the tabs in pixels. Remember that the actual width of the tabs equals the width + padding defined below.
    • Enable: When Sizing is set to percent
    • Default: 25%
    • Min Value: 0%
    • Max Value: 100%
  • Info: Caution: Percentages may not provide pixel perfect percision at every width.
  • Gutter: (number) The gutter between the slider content and the navigation tabs. Set this to 0 if you want the tabs to be connected to the slider container.
    • Default: 0px
    • Min Value: 0px
    • Max Value: 300px
  • Inside Margin: (number) The gap between each tab.
    • Default: 1px
    • Min Value: 0px
    • Max Value: 300px

  • Detailed Padding?: (checkbox) Define detailed padding settings for the tab navigation
    • Default: false
  • Padding: (slider) The uniform padding around the inside of the tab navigation
    • Enable: When Detailed Padding? is set to false
    • Default: 6px
    • Min Value: 0px
    • Max Value: 20px
  • Padding Top: (number) The padding for the top inside of the tab navigation
    • Enable: When Detailed Padding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Padding Bottom: (number) The padding for the bottom inside of the tab navigation
    • Enable: When Detailed Padding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Padding Left: (number) The padding for the left inside of the tab navigation
    • Enable: When Detailed Padding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Padding Right: (number) The padding for the right inside of the tab navigation
    • Enable: When Detailed Padding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px

  • Round Every Tab?: (checkbox) Apply the rounding effect to every tab
    • Default: false
  • Detailed Rounding?: (checkbox) Define detailed rounding settings for the tab navigation
    • Default: false
  • Round Corners: (slider) The uniform rounding around the inside of the tab navigation
    • Enable: When Detailed Rounding? is set to false
    • Default: 0px
    • Min Value: 0px
    • Max Value: 20px
  • Top Left: (number) The rounding for the top left of the tab navigation
    • Enable: When Detailed Rounding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Top Right: (number) The rounding for the top right of the tab navigation
    • Enable: When Detailed Rounding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Bottom Left: (number) The rounding for the bottom left of the tab navigation
    • Enable: When Detailed Rounding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px
  • Bottom Right: (number) The rounding for the bottom right of the tab navigation
    • Enable: When Detailed Rounding? is set to true
    • Default: 0px
    • Min Value: 0px
    • Max Value: 100px

  • Text Size: (number) The font size of the text in the tab navigation
    • Default: 14px
    • Min Value: 0px
    • Max Value: 50px
  • Text: (color) Text color for the default tab state
    • Allows Opacity: false
  • Text Active: (color) Text color for the active tab
    • Allows Opacity: false
  • Center Text?: (checkbox) Center the text within the tab
    • Default: false
  • Bold?: (checkbox) Make the tab font bold
    • Default: false
  • Text Shadow?: (checkbox) Add a text shadow to the tab text
    • Default: false
  • Text Shadow: (color) text shadow color for the tabs
    • Enable: When Text Shadow? is set to true
    • Allows Opacity: false

  • Inherit drop shadow?: (checkbox) Inherit the shadow settings from the container. This could be useful to match the style if you have the tabs detached.
    • Default: false
  • Tab Accent?: (checkbox) Add a tab accent color on the inner tabs. This is to add separation color to each tab without adding an Inside Margin.
    • Default: false
  • Accent: (color) The accent color for the inner tabs
    • Enable: When Tab Accent? is set to true
    • Allows Opacity: false
  • Transparent Background?: (checkbox) Make the background transparent
    • Default: false
  • Background: (color) Background color for the default tab state
    • Enable: When Transparent Background? is set to false
    • Allows Opacity: false
  • Back Active: (color) Background color for the active tab
    • Enable: When Transparent Background? is set to false
    • Allows Opacity: false

Tabulous - Navigation

  • Style: (select) The type of tag element used for the title.
    • Default: None
    • Possible Values:
      • None
      • Text
      • Arrows
  • Show on hover?: (checkbox) The arrows only show when someone hovers over the slider. If you want them to always show, set this to false.
    • Default: false
  • Hide first/last?: (checkbox) You can set this to true and when on the first or last slide the first or last arrow will fade out. You should also set continuous to false unless you are using autoslide.
    • Default: false
  • Size: (number) The size of the navigation arrows
    • Default: 25px
    • Min Value: 0px
    • Max Value: 100px
  • Location: (select) Do you want the nav to be at the top or bottom
    • Default: Top
    • Possible Values:
      • Top
      • Bottom
  • Position: (number) The vertical positioning offset of the navigation
    • Default: 50px
    • Min Value: 0px
    • Max Value: 1000px
  • Custom Left: (image) Customize the image for the left arrow
    • Enable: When Style is set to arrows
    • Default: %assetPath%/tabulous-images/arrow-left.png
  • Custom Right: (image) Customize the image for the right arrow
    • Enable: When Style is set to arrows
    • Default: %assetPath%/tabulous-images/arrow-right.png
  • Color: (color) The color of the navigation text
    • Enable: When Style is set to text
    • Allows Opacity: false
  • Previous: (input) The text for the previous link
    • Enable: When Style is set to text
    • Default: « previous
  • Next: (input) The text for the next link
    • Enable: When Style is set to text
    • Default: next »

Tabulous - Responsive

  • Break Point: (number) The break point for the stack width where the Mobile menu will kick in.
    • Default: 600px
    • Min Value: 0px
    • Max Value: 2000px
  • Hide Arrows on Mobile?: (checkbox) By default, the slider will hide the arrows when on mobile devices in order to make room.
    • Default: true
  • Enable Swipe?: (checkbox) Allow visitors to swipe to navigate on touch devices.
    • Default: true
  • Font Awesome Only?: (checkbox) When you are using Font Awesome in your tabs, this will reduce the tab content to just the icon on mobile devices.
    • Enable: When Font Awesome in Tabs? is set to true
    • Default: false
  • Tab Width: (number) The tab width for each tab after they become icon only.
    • Enable: When Font Awesome Only? is set to true
    • Default: 20%
    • Min Value: 0%
    • Max Value: 100%
  • Icon Size: (number) The size of the icons after they become icon only.
    • Enable: When Font Awesome Only? is set to true
    • Default: 20px
    • Min Value: 0px
    • Max Value: 100px
  • Mobile Navigation?: (checkbox) The slider automatically adds a mobile navigation menu to the slider. If you don’t want it, set this to false.
    • Default: true
  • Nav Title: (input) The text defaults to Menu but you can change it here to whatever you want.
    • Enable: When Mobile Navigation? is set to true
    • Default: Menu
  • Menu Image: (image) Customize the image for the mobile menu
    • Enable: When Mobile Navigation? is set to true
    • Default: %assetPath%/tabulous-images/menu-gray.png
  • Info: Additional menu images are available in the Stacks media elements library.

Tabulous - Advanced

  • Collapse in Edit Mode?: (checkbox) The slider automatically adds a mobile navigation menu to the slider. If you don’t want it, set this to false.
    • Default: false
  • Customize Tabulous ID?: (checkbox) Change the Tabulous ID. This can be useful when using cross linking.
    • Default: false
  • Customize ID: (input) Custom ID that will be applied to tabulous. The id here will be prepended with “tabulous-”
    • Enable: When Customize Tabulous ID? is set to true
    • Default: %id%
  • Info: It is important that you tabulous ID be unique.

Tabulous - Cross Linking

  • Info: Add this attribute to external cross links: data-liquidslider-ref=”tabulous-myid”