Stack Settings

My Image

Section Stack

(See below for Section Fix stack.)

Section - Setup

  • Priority: (number) Control the priority of the sections. Priority 2 will always overlap priority 1 and so on. Lower priority stacks will always be behind higher priority ones. This works just like z-indexes.
    • Default: 1
    • Min Value: 1
    • Max Value: 30

  • Angle: (number) The angle of the shear section

    • Default: 0deg
    • Min Value: -10deg
    • Max Value: 10deg

  • Top Margin: (select) Control the top margin of the section

    • Default: Auto
    • Possible Values:
      • Auto
      • None
      • Manual (percent)
      • Manual (rem)
  • Amount: (number) Control the space above the shear section
    • Enable: When Top Margin is set to top-margin-prop
    • Default: 0%
    • Min Value: -100%
    • Max Value: 100%
  • Amount: (number) Control the space above the shear section
    • Enable: When Top Margin is set to top-margin-rem
    • Default: 0rem
    • Min Value: -40rem
    • Max Value: 40rem
  • Bottom Margin: (select) Control the bottom margin of the section
    • Default: Auto
    • Possible Values:
      • Auto
      • None
      • Manual (percent)
      • Manual (rem)
  • Amount: (number) Control the space above the shear section
    • Enable: When Bottom Margin is set to bot-margin-prop
    • Default: 0%
    • Min Value: -100%
    • Max Value: 100%
  • Amount: (number) Control the space above the shear section
    • Enable: When Bottom Margin is set to bot-margin-rem
    • Default: 0rem
    • Min Value: -40rem
    • Max Value: 40rem
  • Background Top: (number) Advanced Only: Adjust the position of the background relative the the forground content. This is useful for overlay techniques but should be used with caution
    • Default: 0%
    • Min Value: -20%
    • Max Value: 20%
  • Show in Edit Mode: (checkbox) Show the manual margins in edit mode. Use this with caution as it may cause your stack contents to move out of view in edit mode. It is useful to setup overlapping angled backgrounds.
    • Default: false
  • Equalize Height?: (checkbox) Equalize the height with other sections when in multi column Foundation stacks
    • Default: false
  • Info: Set top & bottom margin to None when using Equalizer
  • Add Magellan Marker?: (checkbox) Adds an adjustable magellan marker to this section
    • Default: false
  • Magellan id: (input) The name of the Magellan marker, as defined in either the Foundation Magellan Nav or TopBar's Magellan mode
    • Enable: When Add Magellan Marker? is set to true
    • Default: marker
  • Offset: (slider) Controls the magellan arrival offset position. Use this to adjust the arrival up or down to suit
    • Enable: When Add Magellan Marker? is set to true
    • Default: 0
    • Min Value: -50
    • Max Value: 50
  • Units: (select) Selects either proportional or pixel sizing of the arrow
    • Default: Pixels (px)
    • Possible Values:
      • Pixels (px)
      • Rem (rem)
  • Hide menu when active?: (checkbox) Hides the MagicGellan menu when this section is the active section. This is useful if the section contains a full screen image or other content that you do not want cluttered by the presence of the menu. * Default: false

Section Padding

  • Mode: (select) Selects either proportional or standard rem padding
    • Default: Auto
    • Possible Values:
      • Auto
      • Proportional (%)
      • Static (rem)
  • Top Padding: (number) The padding above the Section stacks contents
    • Enable: When Mode is set to remPad
    • Default: 0rem
    • Min Value: 0rem
    • Max Value: 100rem
  • Bottom Padding: (number) The padding below the Section stacks contents
    • Enable: When Mode is set to remPad
    • Default: 0rem
    • Min Value: 0rem
    • Max Value: 100rem
  • Top Padding: (number) The percentage padding above the Section stacks contents
    • Enable: When Mode is set to percentPad
    • Default: 2%
    • Min Value: 0%
    • Max Value: 100%
  • Bottom Padding: (number) The percentage padding below the Section stacks contents
    • Enable: When Mode is set to percentPad
    • Default: 2%
    • Min Value: 0%
    • Max Value: 100%

Section - Connectors

  • Top: (select) Select the type of section connector
    • Default:
    • Possible Values:
      • None
      • Arrow
      • Shape
  • Radius: (slider) The percentage radius of the shape where 1 gives a semi-circle and 0 gives a square
    • Enable: When Top is set to con-shape
    • Default: 50
    • Min Value: 0
    • Max Value: 1

  • Size: (number) The size of the top connector

    • Default: 4
    • Min Value: 0
    • Max Value: 100

  • Units: (select) Selects either proportional or pixel sizing of the arrow

    • Default: Proportional (% Page Width)
    • Possible Values:
      • Proportional (% Page Width)
      • Rem
  • Position: (slider) The position of the arrow from the left as a percentage of the browser width
    • Default: 50
    • Min Value: 5
    • Max Value: 95
  • Color: (select) You will need to select a manual color in order to match gradient backgrounds
    • Default: Auto
    • Possible Values:
      • Auto
      • Manual
  • Color: (color) The color of the top connector
    • Enable: When Color is set to color-manual
    • Default: #699DFF
  • Bottom: (select) Select the type of section connector
    • Default:
    • Possible Values:
      • None
      • Arrow
      • Shape
  • Radius: (slider) The percentage radius of the shape where 1 gives a semi-circle and 0 gives a square
    • Enable: When Bottom is set to con-shape
    • Default: 50
    • Min Value: 0
    • Max Value: 1

  • Size: (number) The size of the bottom connector

    • Default: 4
    • Min Value: 0
    • Max Value: 100

  • Units: (select) Selects either proportional or pixel sizing of the arrow

    • Default: Proportional (%Width)
    • Possible Values:
      • Proportional (%Width)
      • Rem
  • Position: (slider) The position of the arrow from the left as a percentage of the browser width
    • Default: 50
    • Min Value: 0
    • Max Value: 100
  • Color: (select) You will need to select a manual color in order to match gradient backgrounds
    • Default: Auto
    • Possible Values:
      • Auto
      • Manual
  • Color: (color) The color of the bottom connector
    • Enable: When Color is set to color-manual
    • Default: #699DFF
  • Antialias: (number) Hide the browser rendering error cause by angled lines. Note if you have a semi transparent background then you will see a darker line where the connector overlaps the background. With solid backgrounds this is not seen.
    • Default: 1px
    • Min Value: 0px
    • Max Value: 3px

Section - Background

  • Opacity: (number) The opacity of the shear background
    • Default: 100%
    • Min Value: 0%
    • Max Value: 100%
  • Background: (select) The type of background for the menu
    • Default: None
    • Possible Values:
      • None
      • Solid Color
      • Gradient
      • Image
  • Gradient Type: (select) The style of gradient
    • Enable: When Background is set to bg-gradient
    • Default: Default One Color
    • Possible Values:
      • Default One Color
      • Two Color Gradient
      • Two Tone
      • Radial
  • Gradient Angle: (select) Controls the angle of the background gradients. Note this control has no effect on radial gradients
    • Enable: When Background is set to bg-gradient
    • Default: Auto Horizontal
    • Possible Values:
      • Auto Horizontal
      • Follow Angle of Shear
      • Custom

  • Angle: (number) Sets the angle of the background gradient

    • Enable: When Gradient Angle is set to custom
    • Default: 0deg
    • Min Value: 0deg
    • Max Value: 360deg

  • Gradient Top: (color) The top color of the background gradient - only used for two color and radial gradients

    • Enable: When Background is set to bg-gradient
    • Default: #B3CEDA
  • Color: (color) The base color of the background
    • Default: #699DFF
  • Base Col Stop: (slider) The color stop for the base color. This setting works with Two Color and Radial Gradients
    • Enable: When Background is set to bg-gradient
    • Default: 100%
    • Min Value: 0%
    • Max Value: 100%
  • Top Col Stop: (slider) The color stop for the top color. This setting works with Two Color and Radial Gradi
    • Enable: When Background is set to bg-gradient
    • Default: 0%
    • Min Value: 0%
    • Max Value: 100%
  • X Origin %: (slider) The horizontal origin of the gradient for use with radial gradients
    • Enable: When Background is set to bg-gradient
    • Default: 50
    • Min Value: -150
    • Max Value: 250
  • Y Origin %: (slider) The vertical origin of the gradient for use with radial gradients
    • Enable: When Background is set to bg-gradient
    • Default: 50
    • Min Value: -150
    • Max Value: 250
  • Mobile (Required): (image) The image used for the background on Mobile devices. You must add an image to this setting. This image will be used if you do not specify an image for larger devices.
    • Enable: When Background is set to bg-image
    • Default:
  • **Large (Optional) **: (image) The image used for the background on devices Tablet and Desktop. If you do not specifiy an image here, the Mobile image will be used
    • Enable: When Background is set to bg-image
    • Default:
  • Fixed Image: (checkbox) Fix the background Image
    • Enable: When Background is set to bg-image
    • Default: false
  • Fix Chrome Bug: (checkbox) Fixes the chrome bug when fixed backgrounds are not displayed correctly. IMPORTANT: You cannot use this setting when using a site styles cover or elcipse background images or slideshows.
    • Enable: When Background is set to bg-image
    • Default: false
  • Warehouse Image?: (checkbox) Use a warehoused image for the background image
    • Enable: When Background is set to bg-image
    • Default: false
  • Mobile (Required): (link) The url to the image used for the background on Mobile devices. You must add an image to this setting. This image will be used if you do not specify an image for larger devices.
    • Enable: When Warehouse Image? is set to true
    • Default:
  • Large (Optional): (link) The url to the image used for the background on devices Tablet and Desktop. If you do not specifiy an image here, the Mobile image will be used
    • Enable: When Warehouse Image? is set to true
    • Default:
  • Opacity: (number) Set the background Image Opacity
    • Enable: When Background is set to bg-image
    • Default: 100%
    • Min Value: 0%
    • Max Value: 100%
  • Image Size: (select) Define how the background size is calculated. This is not supported in IE8 and below.
    • Enable: When Background is set to bg-image
    • Default: Cover
    • Possible Values:
      • Cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.
      • Fill: Sets the width and height of the background image to 100% so that it completely fills the stack
      • Contain: Scale the image to the largest size such that both its width and its height can fit inside the content area.
      • Original Size: Default value
      • Static: Keep the image at its original size. Most useful for tiled backgrounds
  • Position: (select) The background position of the background image
    • Enable: When Background is set to bg-image
    • Default: Center Center
    • Possible Values:
      • Left Top
      • Left Center
      • Left Bottom
      • Right Top
      • Right Center
      • Right Bottom
      • Center Top
      • Center Center
      • Center Bottom
  • Image Repeat: (select) If you are using a background image, how do you want it to be repeated.
    • Enable: When Background is set to bg-image
    • Default: No Repeat
    • Possible Values:
      • No Repeat
      • Horizontally & Vertically
      • Horizontally
      • Vertically

Advanced

  • Full Browser Height?: (checkbox) Make the section height the same as the current browser height
    • Default:
  • Vertically Center: (checkbox) Vertically center the content. This will be removed at the defined breakpoints at the same time that the full height is removed.
    • Enable: When Full Browser Height? is set to true
    • Default: false
  • Width BP: (number) The width breakpoint at which the full browser height will be removed and the stack will revert to 100% of its contents
    • Enable: When Full Browser Height? is set to true
    • Default: 768px
    • Min Value: 1px
    • Max Value: 9999px
  • Height BP: (number) The height breakpoint at which the full browser height will be removed and the stack will revert to 100% of its contents
    • Enable: When Full Browser Height? is set to true
    • Default: 768px
    • Min Value: 1px
    • Max Value: 9999px
  • Custom Class: (input) Enter a custom class to be used for the section outer wrapper. Advanced use only.
    • Default:
  • Inner Class: (input) Enter a custom class to be used for the section inner wrapper. Advanced use only.
    • Default:

Section Fix Stack

  • Position: (select) The position at which the contents of the Section Fix stack will be positioned within the section.

    • Default: Bottom
    • Possible Values:
      • Top
      • Bottom

  • Offset: (input) Controls the distance of the fixed content from wither the top or bottom edge of the sections stack. * Default: 0

    • Min Value: 0
    • Max Value: 500
  • Custom Class: (input) Enter a custom class to be used for the Sections Fix stack. This allows CSS targeting of stack or its contents.
    • Default: