Site Styles Settings


Foundation - Legacy Browsers

  • Redirect on IE6-8?: (checkbox) Redirect to a central webpage when IE6-8 are detected
    • Default: true
  • Redirect on IE9?: (checkbox) Redirect to a central webpage when IE6-9 are detected
    • Enable: When Redirect on IE6-8? is set to true
    • Default: false
  • Redirect Link: (link) Link to redirect IE users to
    • Enable: When Redirect on IE6-8? is set to true
    • Default:

Foundation - Edit Mode

  • Duplicate Page Checker?: (checkbox) Enable the test that will check if you have a duplicate page on your server: index.html and index.php
    • Default: true
  • Preview All Grids?: (checkbox) Add a preivew of the grid columns in edit mode
    • Default: false
  • View Width: (select) The width of the edit mode UI. This will not trigger CSS media queries. Therefore if you want to preview what your page will look like on a mobile device, you will need to turn off the Tablet and Desktop sizing settings in the column stacks. When you are done, you can turn them back on.
    • Default: Desktop
    • Possible Values:
      • Mobile (320px)
      • Mobile (640px)
      • Tablet (768px)
      • Tablet (1024px)
      • Desktop
      • Custom
  • Width: (number) Custom Width for the Edit UI
    • Enable: When View Width is set to custom
    • Default: 640px
    • Min Value: 300px
    • Max Value: 3000px

Foundation - Site Effects

  • Reveal Animation: (select) The animation used to for Reveal lightboxes
    • Default: Fade and Pop
    • Possible Values:
      • Fade and Pop
      • Fade
      • None
  • Reveal No Scroll?: (checkbox) Disable scrolling of the webpage when Reveal is open.
    • Default: false
  • Animate on Mobile?: (checkbox) Animate the contents of the Animate stack on mobile
    • Default: true
  • Site Preloader?: (checkbox) Add a site preloader with nice CSS3 animations
    • Default: false
  • Preview Preloader?: (checkbox) Preview the site preloader
    • Enable: When Site Preloader? is set to true
    • Default: false
  • Loader Style: (select) The loader icon used
    • Enable: When Site Preloader? is set to true
    • Default: line-scale-party
    • Possible Values:
      • none
      • ball-pulse
      • ball-grid-pulse
      • ball-clip-rotate
      • ball-clip-rotate-pulse
      • square-spin
      • ball-clip-rotate-multiple
      • ball-pulse-rise
      • ball-rotate
      • cube-transition
      • ball-zig-zag
      • ball-zig-zag-deflect
      • ball-triangle-path
      • ball-scale
      • line-scale
      • line-scale-party
      • ball-scale-multiple
      • ball-pulse-sync
      • ball-beat
      • line-scale-pulse-out
      • line-scale-pulse-out-rapid
      • ball-scale-ripple
      • ball-scale-ripple-multiple
      • ball-spin-fade-loader
      • line-spin-fade-loader
      • triangle-skew-spin
      • pacman
      • ball-grid-beat
      • semi-circle-spin
  • Loader Offset: (slider) Horizontal offset for the preloader. This will help positioning the preloader exactly where you would like it.
    • Enable: When Site Preloader? is set to true
    • Default: 0px
    • Min Value: -20px
    • Max Value: 20px
  • Loader Color: (color) The color of the loader icon
    • Enable: When Site Preloader? is set to true
    • Allows Opacity: true
  • Background: (color) The color of the loader background color
    • Enable: When Site Preloader? is set to true
    • Allows Opacity: true

Foundation - Site Background

  • Preview Background?: (checkbox) Preivew the background while in edit mode
    • Default: true
  • Type: (select) The type of background for the site. If you are using a Global Template, you shoudl use a warehoused image. Images added via drag and drop will not sync across pages.
    • Default: Solid Color
    • Possible Values:
      • Solid Color
      • Tiled Image
      • Tiled Image (Warehouse)
      • Cover Image
      • Cover Image (Warehouse)
      • Slideshow (Warehouse)
  • Fixed Background?: (checkbox) Make the background fixed so that it does not scroll.
    • Default: false
  • Color: (color) The color of the body
    • Allows Opacity: false
  • Tile Repeat: (select) How the background tile will repeat across the body of the website.
    • Enable: When Type is set to tile
    • Default: Repeat X&Y
    • Possible Values:
      • Repeat X&Y
      • Repeat X
      • Repeat Y
      • No Repeat
  • Tile: (image) The tile of the body.
    • Enable: When Type is set to tile
    • Default:
  • Tile Repeat: (select) How the background tile will repeat across the body of the website.
    • Enable: When Type is set to tile_warehouse
    • Default: Repeat X&Y
    • Possible Values:
      • Repeat X&Y
      • Repeat X
      • Repeat Y
      • No Repeat
  • Tile: (link) The tile of the body
    • Enable: When Type is set to tile_warehouse
    • Default:
  • Mobile (required): (image) The cover image of the body for mobile devices. If no Tablet Up image is specified, then this image will be used on all devices.
    • Enable: When Type is set to cover
    • Default:
  • Tablet+ (optional): (image) The cover image of the body for tablet and desktop devices.
    • Enable: When Type is set to cover
    • Default:
  • Cover Overlay: (image) An overlay that will be applied on top of the cover image. If you leave this blank, no overlay will be applied.
    • Enable: When Type is set to cover
    • Default:
  • Overlay Opacity: (number) The opacity of the overlay that is placed on top of the cover image
    • Enable: When Type is set to cover
    • Default: 0.8
    • Min Value: 0
    • Max Value: 1
  • Animate In: (number) The speed at which the cover image will animate in. Setting this value to 0 will disable animation.
    • Enable: When Type is set to cover
    • Default: 500ms
    • Min Value: 0ms
    • Max Value: 5000ms
  • Mobile (required): (link) The cover image of the body for mobile devices. If no Tablet Up image is specified, then this image will be used on all devices.
    • Enable: When Type is set to cover_warehouse
    • Default:
  • Tablet+ (optional): (link) The cover image of the body for tablet and desktop devices.
    • Enable: When Type is set to cover_warehouse
    • Default:
  • Cover Overlay: (link) An overlay that will be applied on top of the cover image. If you leave this blank, no overlay will be applied.
    • Enable: When Type is set to cover_warehouse
    • Default:
  • Overlay Opacity: (number) The opacity of the overlay that is placed on top of the cover image
    • Enable: When Type is set to cover_warehouse
    • Default: 0.8
    • Min Value: 0
    • Max Value: 1
  • Animate In: (number) The speed at which the cover image will animate in. Setting this value to 0 will disable animation.
    • Enable: When Type is set to cover_warehouse
    • Default: 500ms
    • Min Value: 0ms
    • Max Value: 2000ms
  • Image 1: (link) The url to the image for the background slide 1
    • Enable: When Type is set to slideshow
    • Default:
  • Image 2: (link) The url to the image for the background slide 2
    • Enable: When Type is set to slideshow
    • Default:
  • Image 3: (link) The url to the image for the background slide 3
    • Enable: When Type is set to slideshow
    • Default:
  • Image 4: (link) The url to the image for the background slide 4
    • Enable: When Type is set to slideshow
    • Default:
  • Image 5: (link) The url to the image for the background slide 5
    • Enable: When Type is set to slideshow
    • Default:
  • Overlay: (image) An overlay that will be applied on top of the slideshow. If you leave this blank, no overlay will be applied.
    • Enable: When Type is set to slideshow
    • Default:
  • Overlay Opacity: (number) The opacity of the overlay that is placed on top of the cover image
    • Enable: When Type is set to slideshow
    • Default: 0.8
    • Min Value: 0
    • Max Value: 1
  • Animate In: (number) The speed at which the cover image will animate in. Setting this value to 0 will disable animation.
    • Enable: When Type is set to slideshow
    • Default: 500ms
    • Min Value: 0ms
    • Max Value: 2000ms
  • Delay: (number) The delay until the next slide transition
    • Enable: When Type is set to slideshow
    • Default: 2500ms
    • Min Value: 0ms
    • Max Value: 50000ms

Foundation - Site Sizing

  • Unlimited Width?: (checkbox) Make the site go unlimted width
    • Default: false
  • Max Width: (number)
    • Enable: When Unlimited Width? is set to false
    • Default: 1000px
    • Min Value: 300px
    • Max Value: 2000px
  • Round Corners: (number) The default border radius for site elements
    • Default: 3px
    • Min Value: 0px
    • Max Value: 1000px
  • Column Gutter: (number) The padding size used to make the column gutters
    • Default: 0.9375rem
    • Min Value: 0rem
    • Max Value: 5rem

Foundation - Fonts

  • Site Language: (select) The language code that the site will be set to
    • Default: English
    • Possible Values:
      • Abkhazian
      • Afar
      • Afrikaans
      • Albanian
      • Amharic
      • Arabic
      • Aragonese
      • Armenian
      • Assamese
      • Aymara
      • Azerbaijani
      • Bashkir
      • Basque
      • Bengali (Bangla)
      • Bhutani
      • Bihari
      • Bislama
      • Breton
      • Bulgarian
      • Burmese
      • Byelorussian (Belarusian)
      • Cambodian
      • Catalan
      • Chinese
      • Chinese (Simplified)
      • Chinese (Traditional)
      • Corsican
      • Croatian
      • Czech
      • Danish
      • Dutch
      • English
      • Esperanto
      • Estonian
      • Faeroese
      • Farsi
      • Fiji
      • Finnish
      • French
      • Frisian
      • Galician
      • Gaelic (Scottish)
      • Gaelic (Manx)
      • Georgian
      • German
      • Greek
      • Greenlandic
      • Guarani
      • Gujarati
      • Haitian Creole
      • Hausa
      • Hebrew
      • Hindi
      • Hungarian
      • Icelandic
      • Ido
      • Indonesian
      • Interlingua
      • Interlingue
      • Inuktitut
      • Inupiak
      • Irish
      • Italian
      • Japanese
      • Javanese
      • Kannada
      • Kashmiri
      • Kazakh
      • Kinyarwanda (Ruanda)
      • Kirghiz
      • Kirundi (Rundi)
      • Korean
      • Kurdish
      • Laothian
      • Latin
      • Latvian (Lettish)
      • Limburgish ( Limburger)
      • Lingala
      • Lithuanian
      • Macedonian
      • Malagasy
      • Malay
      • Malayalam
      • Maltese
      • Maori
      • Marathi
      • Moldavian
      • Mongolian
      • Nauru
      • Nepali
      • Norwegian
      • Occitan
      • Oriya
      • Oromo (Afaan Oromo)
      • Pashto (Pushto)
      • Polish
      • Portuguese
      • Punjabi
      • Quechua
      • Rhaeto-Romance
      • Romanian
      • Russian
      • Samoan
      • Sangro
      • Sanskrit
      • Serbian
      • Serbo-Croatian
      • Sesotho
      • Setswana
      • Shona
      • Sichuan Yi
      • Sindhi
      • Sinhalese
      • Siswati
      • Slovak
      • Slovenian
      • Somali
      • Spanish
      • Sundanese
      • Swahili (Kiswahili)
      • Swedish
      • Tagalog
      • Tajik
      • Tamil
      • Tatar
      • Telugu
      • Thai
      • Tibetan
      • Tigrinya
      • Tonga
      • Tsonga
      • Turkish
      • Turkmen
      • Twi
      • Uighur
      • Ukrainian
      • Urdu
      • Uzbek
      • Vietnamese
      • Volap√ľk
      • Wallon
      • Welsh
      • Wolof
      • Xhosa
      • Yiddish
      • Yoruba
      • Zulu

  • Custom Font Selectors?: (checkbox) Define custom font selectors for each font family definition
    • Default: false

  • H1 Font: (select) The font of the H1 header
    • Default: Open Sans
    • Possible Values:
      • Arial
      • Arial Narrow
      • Arial Black
      • Century Gothic
      • Copperplate Gothic Light
      • Courier New
      • Georgia
      • Geneva
      • Gill Sans
      • Helvetica
      • Helvetica Neue
      • Impact
      • Lucida Console
      • Lucida Sans
      • Open Sans
      • Palatino Linotype
      • Tahoma
      • Times New Roman
      • Trebuchet MS
      • Verdana
      • Custom Definition
      • Font Pro
  • Style Italic?: (checkbox) Make the font italic
    • Default: false
  • H1 Weight: (slider) Adjust the weight of the header fonts. Be careful becuase not all fonts support every weight. So you will need to verify
    • Default: 300
    • Min Value: 100
    • Max Value: 900
  • Selector: (input) Selector for the H1 Font definition
    • Enable: When Custom Font Selectors? is set to true
    • Default: h1
  • Load Google Font?: (checkbox) Automatically import the font from Google Fonts
    • Enable: When H1 Font is set to custom
    • Default: false
  • Custom Font: (input) Custom Font Family
    • Enable: When H1 Font is set to custom
    • Default:
  • Add Weights: (input) If you are loading fonts from Google, you can define additional weights. This should be a comma delimited list of weights with no spaces.
    • Enable: When H1 Font is set to custom
    • Default: 400
  • Font Fallback: (select) The fallback font in the case that your custom font is not available. These are all generic font families that all browsers will understand. All fonts fall into one of these families. You should choose the fallback that is the primiary family of your custom font
    • Enable: When H1 Font is set to custom
    • Default: sans-serif
    • Possible Values:
      • serif
      • sans-serif
      • cursive
      • fantasy
      • monospace

  • H2-H6 Font: (select) The font of the headers h2-h6
    • Default: Open Sans
    • Possible Values:
      • Arial
      • Arial Narrow
      • Arial Black
      • Century Gothic
      • Copperplate Gothic Light
      • Courier New
      • Georgia
      • Geneva
      • Gill Sans
      • Helvetica
      • Helvetica Neue
      • Impact
      • Lucida Console
      • Lucida Sans
      • Open Sans
      • Palatino Linotype
      • Tahoma
      • Times New Roman
      • Trebuchet MS
      • Verdana
      • Custom Definition
      • Font Pro
  • Style Italic?: (checkbox) Make the font italic
    • Default: false
  • H2-H6 Weight: (slider) Adjust the weight of the header fonts. Be careful becuase not all fonts support every weight. So you will need to verify
    • Default: 600
    • Min Value: 100
    • Max Value: 900
  • Selector: (input) Selector for the H2-H6 Font definition
    • Enable: When Custom Font Selectors? is set to true
    • Default: h2, h3, h4, h5, h6
  • Load Google Font?: (checkbox) Automatically import the font from Google Fonts
    • Enable: When H2-H6 Font is set to custom
    • Default: false
  • Custom Font: (input) Custom Font Family
    • Enable: When H2-H6 Font is set to custom
    • Default:
  • Add Weights: (input) If you are loading fonts from Google, you can define additional weights. This should be a comma delimited list of weights with no spaces.
    • Enable: When H2-H6 Font is set to custom
    • Default: 400
  • Font Fallback: (select) The fallback font in the case that your custom font is not available. These are all generic font families that all browsers will understand. All fonts fall into one of these families. You should choose the fallback that is the primiary family of your custom font
    • Enable: When H2-H6 Font is set to custom
    • Default: sans-serif
    • Possible Values:
      • serif
      • sans-serif
      • cursive
      • fantasy
      • monospace

  • Text Font: (select) The font of the text
    • Default: Helvetica Neue
    • Possible Values:
      • Arial
      • Arial Narrow
      • Arial Black
      • Century Gothic
      • Copperplate Gothic Light
      • Courier New
      • Georgia
      • Geneva
      • Gill Sans
      • Helvetica
      • Helvetica Neue
      • Impact
      • Lucida Console
      • Lucida Sans
      • Open Sans
      • Palatino Linotype
      • Tahoma
      • Times New Roman
      • Trebuchet MS
      • Verdana
      • Custom Definition
      • Font Pro
  • Text Weight: (slider) Adjust the weight of the text fonts. Be careful becuase not all fonts support every weight. So you will need to verify
    • Default: 400
    • Min Value: 100
    • Max Value: 900
  • Selector: (input) Selector for the text Font definition. Body will be added by default
    • Enable: When Custom Font Selectors? is set to true
    • Default: p
  • Load Google Font?: (checkbox) Automatically import the font from Google Fonts
    • Enable: When Text Font is set to custom
    • Default: false
  • Custom Font: (input) Custom Font Family
    • Enable: When Text Font is set to custom
    • Default:
  • Add Weights: (input) If you are loading fonts from Google, you can define additional weights. This should be a comma delimited list of weights with no spaces.
    • Enable: When Text Font is set to custom
    • Default: 400
  • Font Fallback: (select) The fallback font in the case that your custom font is not available. These are all generic font families that all browsers will understand. All fonts fall into one of these families. You should choose the fallback that is the primiary family of your custom font
    • Enable: When Text Font is set to custom
    • Default: sans-serif
    • Possible Values:
      • serif
      • sans-serif
      • cursive
      • fantasy
      • monospace

Foundation - Text Colors

  • Header: (color-2) The color of the headers
    • Allows Opacity: true
  • Text: (color-2) The color of the text
    • Allows Opacity: true
  • Accent: (color-2) The color of the text accents
    • Allows Opacity: true
  • Link: (color-2) The color of the links
    • Allows Opacity: true
  • Link Hover: (color-2) The color of the links when hovered
    • Allows Opacity: true
  • Code Snippets: (color) The color used for text used code snippets
    • Allows Opacity: true

  • Underline Links: (checkbox-2) Underline links
    • Default: [false, false]

Foundation - Text Sizing

  • H1 Size: (number-2) The size of of H1
    • Default: [2.125, 2.75]rem
    • Min Value: 0rem
    • Max Value: 20rem
  • H2 Size: (number-2) The size of of H2
    • Default: [1.6875, 2.3125]rem
    • Min Value: 0rem
    • Max Value: 20rem
  • H3 Size: (number-2) The size of of H3
    • Default: [1.375, 1.6875]rem
    • Min Value: 0rem
    • Max Value: 20rem
  • H4 Size: (number-2) The size of of H4
    • Default: [1.125, 1.4375]rem
    • Min Value: 0rem
    • Max Value: 20rem
  • H5 Size: (number-2) The size of of H5
    • Default: [1.125, 1.125]rem
    • Min Value: 0rem
    • Max Value: 20rem
  • H6 Size: (number-2) The size of of H6
    • Default: [1, 1]rem
    • Min Value: 0rem
    • Max Value: 20rem
  • P Size: (number-2) The default size for all paragraphs
    • Default: [1, 1]rem
    • Min Value: 0rem
    • Max Value: 10rem

  • Header Small: (number) The size for the header small segments relative to the header size defined
    • Default: 30%
    • Min Value: 10%
    • Max Value: 100%

Foundation - Element Styles

  • Selection Scheme: (select) The color scheme for text selection
    • Default: Primary
    • Possible Values:
      • Primary
      • Secondary
  • Primary: (color-2) The colors for primary elements
    • Allows Opacity: true
  • Secondary: (color-2) The colors for secondary elements
    • Allows Opacity: true
  • Accents: (color-4) The colors for accent elements
    • Allows Opacity: true
  • Modal: (color-4) The colors for modal elements
    • Allows Opacity: true

  • Swatch 1: (input) The label for swatch 1
    • Default: Swatch 1
  • Swatch 1: (color-2) The colors for swatch 1
    • Allows Opacity: true
  • Swatch 2: (input) The label for swatch 2
    • Default: Swatch 2
  • Swatch 2: (color-2) The colors for swatch 2
    • Allows Opacity: true
  • Swatch 3: (input) The label for swatch 3
    • Default: Swatch 3
  • Swatch 3: (color-2) The colors for swatch 3
    • Allows Opacity: true
  • Swatch 4: (input) The label for swatch 4
    • Default: Swatch 4
  • Swatch 4: (color-2) The colors for swatch 4
    • Allows Opacity: true
  • Swatch 4: (input) The label for swatch 5
    • Default: Swatch 5
  • Swatch 5: (color-2) The colors for swatch 5
    • Allows Opacity: true
  • Swatch 6: (input) The label for swatch 6
    • Default: Swatch 6
  • Swatch 6: (color-2) The colors for swatch 6
    • Allows Opacity: true

Foundation - Custom CSS Styles

  • Custom CSS Styles?: (checkbox) Enable a Custom CSS styles box so that any CSS added to it will be added to the webpage.
    • Default: false