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 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>