Basics

Getting started

Here you'll find the basic layout template with the most common selectors in use in the enrollment page. It'll get you started with creating your own awesome designs, but you can modify it to suit your needs.

<style>

:root {
	--primary-color: #05756F; /* Primary color is used for links, navigation background, buttons if not specified separately, radio buttons, checkboxes and input field focus state */
	--primary-button-bg-color: #05756F; /* Button background color for primary button */
	--background: #3EB2B4; /* Background color or image */
	--button-border-radius: 8px; /* Define how much roundness button corners have */
	--header-text-color: #192832; /* Color used for headers (h1, h2, ...) */
	--font-family: Montserrat; /* Text font */
	--font-family-header: var(--font-family); /* Header text font (defaults to --font-family) */
	--logo: url(logo_URL_here);
	--logo-height: 50px; /* This has to be specified only if you add a logo */
	--logo-height-mobile: 40px; /* Specify if you want different height for mobile */
}
	
</style>

<style type="text/css">

/*** PROGRESS ***/
/* The whole progress bar in the background, behind .progress-bar in z-level */
.progress {
}   
/* Progress steps that have been done */
.progress-bar {
}

/*** NAVIGATION ***/
/* Inherited definitions for elements in the navbar, e.g. text. */
nav, .navbar-nav {
}
/* Less than divider icon */
.nav li.divider-icon {
}
/* The navbar container background color etc */
.navbar {
}
/* Navbar cells */
.navbar-nav > li > a {  
}
/* Style of completed steps */
.navbar-default .navbar-nav > li > a {
}
/* Style of the active step */
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
}
/* Style of inactive steps */
.navbar-default .navbar-nav > .disabled > a, 
.navbar-default .navbar-nav > .disabled > a:hover, 
.navbar-default .navbar-nav > .disabled > a:focus {
}

/*** CONTENT CONTAINERS ***/
/*  Defines the container with all the elements under the navbar. Includes banner, e.g. if part of the banner is transparent, put this container's opacity to 0 to get the transparency effect */
#letter-container-responsive {
    max-width: 800px !important;
}
/* The container for all content under the top banner */
div#common_content {
}
/* Attention by Lyyti link styles */
.top-powered-by > a {
}

/*** BUTTONS ***/
/* Mother selector, e.g. put border radius here, it will be inherited by all buttons */
.btn {
}
/* Style of the forward buttons */ 
.btn-success, .btn-primary {
}
/* General buttons */
.btn-default {
}
/* Buttons on the thank-you page */
#thanks-page-button-0, #thanks-page-button-1, #thanks-page-button-2, #thanks-page-button-3, #thanks-page-button-4, #thanks-page-button-5, #thanks-page-button-6 {
    
}

/*** FORMS ***/
/* General form text areas */
.form-control {
}
/* General form labels */
.control-label {
}

</style>