Help Center
Go to LeadDoubler
Help Center
Go to LeadDoubler
General information
Dashboard overviewCreating a new calculatorCreating a Calculator from Template LibraryCreating a Calculator using the Builder Tool
Setting up your calculator
General spreadsheet information
Input section
Output section
Calculator editor
Calculator editor overviewFormatting input fieldsModifying an existing calculatorEditing Content on the CalculatorGiving your calculator an unique URL
Embedding the Calculator on a Website
Automations
User account
SignupForgot passwordInviting another user to your accountHow to Log In to LeadDoubler
CRM
Where to find your CRMDeals overviewView a Specific PipelineCreating a new pipelineModify an Existing PipelineHow to change stage orderRename pipelineDelete a PipelineSetting your default pipelineAdding a new stage to an existing pipelineHow to Log In and Access the CRM in LeadDoubler
Affliate account
Add a new user to your accountLogin to an added userMove a calculator to another account
Templates
Modern 2.0
CSSJavascript
Troubleshooting
Whitespace in SpreadsheetOverwriting ValuesData Validation ListsClearing of Session ValuesTesting the spreadsheetRequired Hidden InputSpreadsheet and Values Across Landing PagesUpload the correct spreadsheetRounding up or down with formulas in spreadsheets

CSS

CSS documentation for the Modern 2.0 template

Overview

The Modern 2.0 contains a list of CSS variables that make it easier to change and update the look of your calculator. The variables are named so they should make sense for the most part.

You can find the list of the most commonly used variables here:

General colors

CodeDescription

                        

--mainColor: #1c85e8;

                   

The main color used everywhere on the site

                        

--borderColor: #c3cbcf;

                   

Default color for all borders on the site

                        

--borderColorFocus: #929ca2;

                   

Default color used for when an input field is focssed

                        

--bodyBackground: #fbfbfb;

                   

The background color for the <body> element, can be set to an image url as well

                        

--errorColor: red;

                   

Default color used when showing errors

                        

--textColor: #171c47;

                   

Default text color

                        

--brightTextColor: #FFFFFF;

                   

Default text color used where a bright font work better

                        

--inputIconColor: #555;

                   

Default color for the icons inside a input field

                        

--inputIconBackgroundColor: #eee;

                   

Default background color for the icons inside a input field

                        

--inputBackgroundColor: #f9f9f9;

                   

Default input background color

                        

--textareaBackgroundColor: #f9f9f9;

                   

Default textarea background color

                        

--placeholderColor: #b1b1b1;

                   

Default input placeholder color

                        

--buttonDefaultBackground: #f1f1f1;

                   

Default background color for buttons inside the form

                        

--mainbodyBackground: #FFFFFF;

                   

Default background color for the box containing the input fields (“mainbody”)

 

Fonts

CodeDescription

                        

--primaryFont: 'Outfit', sans-serif;

                   

Default font

                        

--defaultFontSize: 1em;

                   

Default font size

                        

--defaultFontWeight: 300;

                   

Default font weight

                        

--boldFontWeight: 800;

                   

Default font weight for the <b> and <strong> elements

 

Layout

CodeDescription

                        

--pageMaxWidth: 1080px;

                   

Max width of box containing the calculator itself, use unset to use full width

                        

--mainbodyBoxShadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

                   

The shadow settings for the “mainbody” box containg the calculator itself

                        

--mainbodyBorderRadius: 20px;

                   

Border radius setting for “mainbody”

 

Layout, when embedded (iframe)

CodeDescription

                        

--embeddedBodyBackground: none;

                   

Removes the background from the <body> element so the background behind the iframe is visible

                        

--embeddedBodyPadding: 0px;

                   

Padding for the <body> element when embedded

                        

--embeddedPageMaxWidth: unset;

                   

Full page width when embedded

 

Border

CodeDescription

                        

--defaultBorderSize: 1px;

                   

Default border size

                        

--defaultBorderStyle: solid;

                   

Default border style

                        

--defaultBorderRadius: 5px;

                   

Default border radius

 

Labels and headings

CodeDescription

                        

--labelFontSize: 1.25em;

                   

Default font size for each input label/title

                        

--headingFont: var(--defaultFont);

                   

Font used in each input label/title

                        

--headingFontWeight: 300;

                   

Font weight used in each input label/title

                        

--formHeadingTextAlign: left;

                   

Default textalign for each input label/title

                        

--formHeadingFontSize: 1.3em;

                   

Default font size used in each input label/title

                        

--formHeadingFontWeight: 400;

                   

Default font weight used in each input label/title

                        

--formHeadingTextColor: var(--defaultTextColor);

                   

Default color used in each input label/title

 

Transition

CodeDescription

                        

--defaultTransitionEasing: cubic-bezier(0.65, 0, 0.35, 1);

                   

Default easing used in transitions

                        

--defaultTransitionSpeed: 250ms;

                   

Default transition speed used in transitions

                        

--defaultTransitionTarget: all;

                   

Default target in transitions

 

Progress bar (Quiz mode)

CodeDescription

                        

--progressBarColor: var(--mainColor);

                   

Default color for the progress bar

                        

--progressBarColorDone: var(--mainColor);

                   

Default color for the progress bar when finished

                        

--progressBaTransition: width var(--defaultTransitionSpeed) var(--defaultTransitionEasing);

                   

Default transition used for the progressbar animation

 

Quiz Buttons (Previous and Next)

CodeDescription

                        

--quizButtonColor: var(--mainColor);

                   

Default color for the quiz buttons

                        

--modernQuizBtnPrevImage: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path fill="white" d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z"/></svg>');

                   

Default chevron icon used on the previous button

                        

--modernQuizBtnPrevImageColor: white;

                   

Default color used for the chevron icon on the previous button

                        

--modernQuizBtnNextImageColor: white;

                   

Default chevron icon used on the next button

                        

--modernQuizBtnNextImageColor: white;

                   

Default color used for the chevron icon on the next button

 

Slider

CodeDescription

                        

--sliderBackground: #ebebeb;

                   

Default background color for the slider

                        

--sliderColoredBackground: var(--mainColor);

                   

Default background color for the selected/colored part of the slider

                        

--sliderHandleColor: var(--mainColor);

                   

Default color for the slider “handle”

                        

--sliderPulseColor: rgba(28, 133, 232, 0.7);

                   

Default color for the “pulse”/fade effect on the slider handle

Note: Remember to change this if you change “mainColor”

                        

--sliderPulseSize: 7px;

                   

Default size for the “pulse”/fade effect on the slider handle

                        

--sliderMinMaxValFontSize: 1.2em;

                   

Default font size for the min. and max. values

                        

--sliderMinMaxValFontWeight: 500;

                   

Default font weight for the min. and max. values

                        

--sliderSelectedValueFontWeight: 600;

                   

Default font weight for the selected value

                        

--sliderBorder: none;

                   

Default border for the slider

                        

--sliderBorderRadius: var(--fullyRoundedBorderRadius);

                   

Default border radius for the slider

                        

--sliderHeight: 6px;

                   

Default height for the slider

                        

--sliderHandleBorderRadius: 100%;

                   

Default slider handle border radius

                        

--sliderHandleSize: 1.5em;

                   

Default slider handle size

                        

--sliderHandleBorder: none;

                   

Defualt slider handle border

 

Buttons inside the form

CodeDescription

                        

--buttonColor: var(--buttonDefaultBackground);

                   

Default background color for the buttons

                        

--buttonFontSize: var(--defaultFontSize);

                   

Default font size for the buttons

                        

--buttonBorderRadius: var(--defaultBorderRadius);

                   

Default border radius for the buttons

                        

--buttonsGridMaxSize: 225px;

                   

Default max width the buttons can be when not in flex mode

                        

--buttonsGridColumnGap: 15px;

                   

Default spacing between the buttons (columns)

                        

--buttonsGridRowGap: 15px;

                   

Default spacing between the buttons (rows)

                        

--buttonSelectedColor: var(--mainColor);

                   

Default color for the selected button

                        

--buttonSelectedTextColor: var(--brightTextColor);

                   

Default color for the selected button

                        

--buttonSelectedFontWeight: 600;

                   

Default font weight for the selected button

 

CTA Buttons

CodeDescription

                        

--ctaButtonBackgroundColor: var(--mainColor);

                   

Default background color for the CTA buttons

                        

--ctaButtonTextColor: var(--brightTextColor);

                   

Default text color for the CTA buttons

                        

--ctaButtonSuccessColor: var(--ctaButtonBackgroundColor);

                   

Default background color for the “success” CTA button

                        

--ctaButtonSuccessTextColor: var(--ctaButtonTextColor);

                   

Default text color for the “success” CTA button

                        

--ctaButtonPrimaryColor: var(--ctaButtonBackgroundColor);

                   

Default background color for the “primary” CTA button

                        

--ctaButtonPrimaryTextColor: var(--ctaButtonTextColor);

                   

Default text color for the “primary” CTA button

                        

--ctaButtonBorderRadius: 100px;

                   

Default border radius for the CTA buttons

                        

--ctaButtonPadding: 8px 50px;

                   

Default padding for the CTA buttons

                        

--ctaButtonBorder: none;

                   

Default border for the CTA buttons

                        

--ctaButtonFontSize: 1.2em;

                   

Default font size for the CTA buttons

                        

--ctaButtonFontWeight: 300;

                   

Default font weight for the CTA buttons

                        

--ctaButtonTextAlign: center;

                   

Default text align for the eleCTA buttons

 

Make changes to the design

If you want to change some part of the design you simply copy the whole line of the variable you wish to change above, go into your calculator, click on “Insert custom HTML” in the menu to the right:

After that, make sure that you are standing on “Custom HTML” in the popup box, if not simply click on it:

Find the following area:

 

And simply add your copied option and update it to reflect the change you wish to make and press the “Save” button:

Make changes to an element not found in the list

To make changes to something not present in the list above, you need to find out the name of the CSS variable containing the styling, and to do that, the easiest way to do so is using the “developer tools” found in almost all desktop browsers (Chrome, FireFox, Safari, Edge and etc.).

Then once you have found the CSS variable you simply follow the same steps as above.

Powered by Product Fruits