Styles Settings


Email - Implementation Checklist

  • Set Email Theme?: (checkbox) You must set the Email theme for this project. You can do so from the RapidWeaver theme drawer.
    • Default: false
  • Disable Advanced General Settings?: (checkbox) If you go to the General Settings for this project, click on the Advanced button at the bottom on that pane. You wil turn all all of the advanced settings that are displayed.
    • Default: false
  • Set Title to Subject?: (checkbox) The subject of your email should be placed into the Title field in the project General Settings. You can also set this inside the Title setting in the page inspector.
    • Default: false
  • Set Slogan to Description?: (checkbox) A preheader is a short description of the contents of your email. The preheader of your email should be placed into the Slogan field in the project General Settings. You can also set this inside the Slogan setting in the page inspector.
    • Default: false
  • Set Web Address? (publish only): (checkbox) If you are publishing your email to your web server, you will want to make sure that you properly set the website address that the email will be referenced at. This is required if you want to use drag and drop image support with the Email stacks.
    • Default: false
  • Use only Email Stacks?: (checkbox) You cannot use any stack that you want to generate Email. THe HTML required to build an email is very different from that to create a webpage. You must only use Email stacks.
    • Default: false

Email - Background & Spacing

  • Colors: (color-2) The color of the email backgrounds
    • Allows Opacity: false

  • Sizing: (number-2) The size email body. The Small Width should not exceed 100%.
    • Default: [600, 100]
    • Min Value: 0
    • Max Value: 800

  • Global Margin: (number) The bottom margin added to many components
    • Enable: When ** is set to true
    • Default: 16px
    • Min Value: 0px
    • Max Value: 100px
  • Column Spacing: (number-2) The spacing used for columns
    • Enable: When ** is set to true
    • Default: [16, 16]px
    • Min Value: 0px
    • Max Value: 100px
  • Text Spacing: (number-2) The margins added to text elements
    • Enable: When ** is set to true
    • Default: [10, 10]px
    • Min Value: 0px
    • Max Value: 100px
  • Element Spacing: (number-2) The spacing added to elements
    • Enable: When ** is set to true
    • Default: [20, 10]px
    • Min Value: 0px
    • Max Value: 100px
  • List Spacing: (number-2) The spacing added to link list elements
    • Enable: When ** is set to true
    • Default: [10, 10]px
    • Min Value: 0px
    • Max Value: 100px

Email - Text Colors

  • Header: (color-2) The color of the headers
    • Allows Opacity: false
  • Header Small: (color-2) The color of the header small elements
    • Allows Opacity: false
  • Text: (color-2) The color of the text
    • Allows Opacity: false
  • Link: (color-2) The color of the links
    • Allows Opacity: false
  • Link Hover: (color-2) The color of the links when hovered
    • Allows Opacity: false
  • Divider: (color-2) The color of the dividers
    • Allows Opacity: false

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

Email - Element Styles

  • Colors: (color-3) The colors for elements such as buttons and callouts
    • Allows Opacity: false
  • Accents: (color-3) The colors for accent elements
    • Allows Opacity: false
  • Button Text: (color) The color of the button text
    • Allows Opacity: false

  • Callout Fade: (slider) The fade for the callout background
    • Default: 85%
    • Min Value: 0%
    • Max Value: 100%

Email - Fonts

  • H1 Font: (select) The font of the H1 header
    • Default: Helvetica
    • 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
      • Palatino Linotype
      • Tahoma
      • Times New Roman
      • Trebuchet MS
      • Verdana
      • Custom Definition
  • 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
  • Custom Font: (input) Custom Font Family
    • Enable: When H1 Font is set to custom
    • Default:

  • H2-H6 Font: (select) The font of the headers h2-h6
    • Default: Helvetica
    • 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
      • Palatino Linotype
      • Tahoma
      • Times New Roman
      • Trebuchet MS
      • Verdana
      • Custom Definition
  • 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
  • Custom Font: (input) Custom Font Family
    • Enable: When H2-H6 Font is set to custom
    • Default:

  • 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
      • Palatino Linotype
      • Tahoma
      • Times New Roman
      • Trebuchet MS
      • Verdana
      • Custom Definition
  • 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

  • Button Weight: (slider) Adjust the weight of the button fonts. Buttons will use Text Font. Be careful becuase not all fonts support every weight. So you will need to verify
    • Default: 400
    • Min Value: 100
    • Max Value: 900

Email - Text Sizing

  • Line Height: (slider) Line Height for all text
    • Default: 1.3
    • Min Value: 1
    • Max Value: 2

Email - Fonts

  • 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

Email - Text Sizing

  • H1 Size: (number-2) The size of of H1
    • Default: [34, 34]px
    • Min Value: 0px
    • Max Value: 100px
  • H2 Size: (number-2) The size of of H2
    • Default: [30, 30]px
    • Min Value: 0px
    • Max Value: 100px
  • H3 Size: (number-2) The size of of H3
    • Default: [28, 28]px
    • Min Value: 0px
    • Max Value: 100px
  • H4 Size: (number-2) The size of of H4
    • Default: [24, 24]px
    • Min Value: 0px
    • Max Value: 100px
  • H5 Size: (number-2) The size of of H5
    • Default: [20, 20]px
    • Min Value: 0px
    • Max Value: 100px
  • H6 Size: (number-2) The size of of H6
    • Default: [18, 18]px
    • Min Value: 0px
    • Max Value: 100px
  • H Small: (number-2) The size for the header small segments relative to the header size defined
    • Default: [60, 50]%
    • Min Value: 10%
    • Max Value: 100%
  • P Size: (number-2) The default size for all paragraphs
    • Default: [16, 16]px
    • Min Value: 0px
    • Max Value: 100px

  • Button Size: (number-4) The default size for all buttons
    • Default: [10, 12, 16, 20]px
    • Min Value: 0px
    • Max Value: 100px
  • XS Padding: (number-2) The padding for the XS button
    • Enable: When ** is set to true
    • Default: [8, 16]px
    • Min Value: 0px
    • Max Value: 30px
  • S Padding: (number-2) The padding for the S button
    • Enable: When ** is set to true
    • Default: [10, 20]px
    • Min Value: 0px
    • Max Value: 30px
  • M Padding: (number-2) The padding for the M button
    • Enable: When ** is set to true
    • Default: [8, 16]px
    • Min Value: 0px
    • Max Value: 30px
  • L Padding: (number-2) The padding for the L button
    • Enable: When ** is set to true
    • Default: [10, 20]px
    • Min Value: 0px
    • Max Value: 30px