HomeGuides

Enrollment page template

Suggest Edits

Here is a copy and pasteable, easy to start template for the enrollment page. The code window is scrollable, activate it by clicking and you can use (ctrl + a or ⌘ + a) and (ctrl + c or ⌘ + c) to copy it all to use in your design or clicking the clipboard icon in the top right corner.

/*

Basic template

If the value is empty, it will be reverted to the minimalist definitions.

*/

/* Here goes the root definitions for fonts and background */
body {
  font-family: /*fontstack here*/;
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
  color: #333;
  background: #f1f1f1 center no-repeat;
  background-attachment: fixed;
  background-size: cover;
  padding: 70px 0 20vh; } /* Top padding for height of navigation bar */

/* links, good to have underline for better accessibility */
a {
  color: #344DA1;
  text-decoration: underline;
}

/* link definitions when hovered or focused */
a:hover, a:focus {
  color: #336699;
  text-decoration: none; }

/* Headings definitions, no need to change these much */
h1, h2, h3, h4, h5, h6 {
  font-family: /*fontstack here*/;
  line-height: 1.42857;
  font-weight: 700;
  margin-top: .8em;
  margin-bottom: .6em;
  color: #222; }

/* If you want to have specific font sizes, you can easily change them here */
h1 {
  font-size: ;
}

h2 {
  font-size: ; }

h3 {
  font-size: ; }

h4 {
  font-size: ; }

h5 {
  font-size: ; }

h6 {
  font-size: ; }

/* Progress bar definitions, hidden because of custom indicators */
.progress {
  display: none; }

.progress-bar {
  display: none; }

/* This is the outer wrapper element that holds banners and content. This can be set as transparent for example */
#letter-container-responsive {
  max-width: 800px !important;
  padding: 0;
  margin: 0 auto 0;
  background: #fff;
  border: none;
  box-shadow: none; }

/* This element holds the all the content */
div#common_content {
  padding: 20px 40px 40px;
  border: none;
  line-height: 1.5em;
  margin: auto;
  background: #fff; }

/* Navigation bar font definitions */
nav, .navbar-nav {
  font-family: /*fontstack here*/;
  font-size: 1em;
  opacity: 1;
  text-transform: none;
  font-weight: 400; }

/* Navigation bar background, width, box-shadow, opacity etc */
.navbar-default {
  background: #fff;
  box-shadow: none;
  opacity: 1;
  border: none;
  border-bottom: none;
  -webkit-box-shadow: none;
  box-shadow: none; }

/* Navigation bar content, steps inside this, centered by default */
nav .container {
  background: transparent;
  max-width: 800px; }

/* Defined to be 750px wide in bootstrap if viewport between 768px and 800px, overwrite here for consistency */
@media (min-width: 768px) {
  nav .container {
    width: 800px; } }

.navbar {
  margin-bottom: 0;
  color: #333;
  display: inline-block; }

/* Fixed steps width for enrollment, this can be set to be auto if there's width problems */
nav#enrollment-page-menu .navbar-nav {
  table-layout: fixed; }

nav#enrollment-page-menu .navbar-nav > li {
  width: 100%; }

/* Hiding the ">" icon */
li.divider-icon {
  display: none; }

/* Max width for step cell elements */
.navbar-nav > li {
  max-width: 33.33%; }

.navbar-nav > li > a {
  min-height: 0;
  border: none; }

/* Step cell elements, neutral, best place to affect the navbar height */
.navbar-default .navbar-nav > li > a {
  color: #333;
  background: transparent;
  text-decoration: none;
  padding: 25px 10px 25px;
  margin-bottom: 0;
  border-right: none; }

/* Step indicator, neutral */
.navbar-default .navbar-nav > li > a:after {
  content: "";
  display: block;
  position: absolute;
  width: 0%;
  height: 2%;
  right: 0;
  left: 0;
  bottom: 25%;
  border-radius: 0px;
  margin: 0 auto;
  background: #cc3333;
  z-index: -1;
  -webkit-transition: ease-out all 0.15s, ease-in all 0.15s;
  -moz-transition: ease-out all 0.15s, ease-in all 0.15s;
  -ms-transition: ease-out all 0.15s, ease-in all 0.15s;
  -o-transition: ease-out all 0.15s, ease-in all 0.15s;
  transition: ease-out all 0.15s, ease-in all 0.15s; }

/* Step cell, neutral hover */
.navbar-default .navbar-nav > li > a:hover {
  color: #c33;
  text-decoration: none;
  background: transparent; }

/* Step indicator, neutral hover */
.navbar-default .navbar-nav > li > a:hover:after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 2%;
  right: 0;
  left: 0;
  bottom: 25%;
  border-radius: 0px;
  margin: 0 auto;
  background: #cc3333;
  z-index: -1; }

/* Step cell, active */
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #c33;
  background: transparent;
  text-decoration: none;
  font-weight: 400; }

/* Step indicator, active */
.navbar-default .navbar-nav > .active > a:after, .navbar-default .navbar-nav > .active > a:hover:after, .navbar-default .navbar-nav > .active > a:focus:after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 2%;
  right: 0;
  left: 0;
  bottom: 25%;
  border-radius: 0px;
  margin: 0 auto;
  background: #cc3333;
  z-index: -1; }

/* Step indicator positioning for mobile */
@media screen and (max-width: 768px) {
  .navbar-default .navbar-nav > li > a:after {
    bottom: 0; }

  .navbar-default .navbar-nav > li > a:hover:after {
    bottom: 0; }

  .navbar-default .navbar-nav > .active > a:after, .navbar-default .navbar-nav > .active > a:hover:after, .navbar-default .navbar-nav > .active > a:focus:after {
    bottom: 0; } }

/* Step cell, disabled */
.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {
  color: rgba(51, 51, 51, 0.5);
  background: transparent;
  text-decoration: none; }

/* Step indicator disabled for the disabled step */
.navbar-default .navbar-nav > .disabled > a:after, .navbar-default .navbar-nav > .disabled > a:hover:after, .navbar-default .navbar-nav > .disabled > a:focus:after, .navbar-default .navbar-nav > .disabled > a:before, .navbar-default .navbar-nav > .disabled > a:hover:before, .navbar-default .navbar-nav > .disabled > a:focus:before {
  display: none; }

/* Event title in mobile */
.nav-event-title {
  position: relative;
  color: #333;
  margin-bottom: 0;
  font-weight: 400; }

/* For infoboxes you can have a primary color border and 5% alpha for the background with rgba() for example */
/* Normal infobox */
.alert-info {
  background: ;
  color: ;
  border: none; }

/* Success infobox */
.alert-success {
  background: ;
  color: ;
  border: none; }

/* Warning alert */
.alert-warning {
  background: ;
  color: ;
  border: none; }

/* Critical alert */
.alert-danger {
  background: ;
  color: ;
  border: none; }

/* Form block selector */
.form-group {
  padding-bottom: 15px;
  font-size: inherit !important; }

/* Input text boxes and form controls */
.form-control {
  background: transparent;
  padding: 0px 6px;
  color: #333;
  border-radius: 0px;
  border: 1px solid #ccc; }

/* Focused text box */
.form-control:focus {
  border-color: #000;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(51, 51, 51, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(51, 51, 51, 0.6); }

/* Text box with error */
.has-error .form-control {
  border: 1px solid #a94442; }

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline {
  color: #a94442; }

/* Text box with error */
.has-error .form-control:focus {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(169, 68, 66, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(169, 68, 66, 0.6); }

/* Small descriptive texts with from controls */ 
.control-label {
  font-family: /* Fontstack here */;
  font-weight: normal; }

/* Root button defs, mainly fonts and transition times to all buttons. */
.btn {
  font-family: /* Fontstack here */;
  border-radius: 0px;
  font-weight: normal;
  border: none;
  position: relative;
  -webkit-transition: ease-in-out all .2s;
  -moz-transition: ease-in-out all .2s;
  -ms-transition: ease-in-out all .2s;
  -o-transition: ease-in-out all .2s;
  transition: ease-in-out all .2s; }

/* Primary button that takes you forward in the registration process. */
.btn-success, .btn-primary {
  position: relative;
  background: #aaa;
  color: #000;
  border: 1px solid #000;
  box-sizing: content-box; }

/* Hover state of primary buttons. For example, change border, background, box-shadow, size, x/y location */
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #222;
  color: #fff;
  border: 5px solid #000;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
   }

/* This is for all the other default buttons */
.btn-default {
  background: #aaa;
  color: #000;
  border: none;
  position: relative; }

.btn-default:hover, .btn-default:active, .btn-default:focus {
  background: #555;
  color: #000;
  border: none; }

/* Thank you page buttons, mainly positioning. Can be used to individualise by ID*/
#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 {
  margin: 0 auto 10px;
  width: 90%;
  position: relative; }

/* --- Mobile nmenu--- */

#mobile-nav {
  padding: 10px; }

/* Coloring of the burger menu buttons */
#mobile-nav .toggle-button, #mobile-nav .dropdown-toggle {
  background: #fff;
  border: 1px solid #333; }

#mobile-nav .toggle-button .bar, #mobile-nav .dropdown-toggle .bar {
  background: #333; }

/* The side menu that opens on mobile */
#menu-mobile {
  background: #fff;
  color: #333; }

/* Cells on mobile menu */
#menu-mobile > ul > li > a {
  color: #333; }

#menu-mobile > ul > li.active {
  background: rgba(51, 51, 51, 0.3); }

/* Rest from this point on are for the event page dropdown menu, if applicaple. These can be omitted if you want so it will revert to the minimalist definitions. It's good to change the colors to match the design */
ul.dropdown-menu {
  padding: 0; }

ul.dropdown-menu, ul.dropdown-menu.dropdown-menu-right {
  background: #fff; }

/* Borders under the menu item cells */
ul.dropdown-menu > li > a {
  border-bottom: 1px solid #000; }

ul.dropdown-menu > li > a, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  background: transparent;
  color: #000; }

ul.dropdown-menu > li > a:hover {
  background: #333;
  color: #fff; }

ul.dropdown-menu > .active > a, ul.dropdown-menu > .active > a:hover {
  background: #000;
  color: #fff;
  position: relative; }

.dropdown-toggle-bars .bar {
  color: #000; }

.navbar-default .navbar-link {
  color: ; }

.slideout-panel {
  position: relative;
  z-index: auto; }

Updated about 1 month ago