Modèle de page d’inscription
Voici un modèle que vous pouvez copier /coller afin de personnaliser vos pages d’inscriptions. La fenêtre de code est déroulante, activez-la en cliquant et vous pouvez utiliser (ctrl + a ou ⌘ + a) et (ctrl + c ou ⌘ + c) pour tout copier afin de l’utiliser dans votre Design ou en cliquant sur l’icône du presse-papiers dans le coin supérieur droit.
/*
Modèle de Design
Si les valeurs sont laissées vides, elles suivront le défaut minimaliste.
*/
/* Voilà où définir les polices d'écriture et l'arrière plan de la page*/
body {
font-family: /*fontstack here*/;
font-size: 16px;
line-height: 21px;
font-weight: 400;
color: #333; /*couleur du texte*/
background: #E8EAEE center no-repeat;/*couleur d'arrière plan de la page, à définir
même si vous avez une image de fond, au cas ou celle-ci ne s'affiche pas.*/
/*Si vous souhaitez jouer avec la transparence de l'arrière plan,
vous pouvez utiliser le format RGBA au lieu d'HEX,
un example : rgba(51, 51, 51, 0.5).*/
/*C'est ci-dessous que vous pouvez insérer une image en arrière plan.*/
background-image: url("");/*Insérer l'URL de vers l'image entre les "".*/
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 70px 0 20vh; } /* Espace entre le formulaire d'inscription et le menu
en haut de page, nous conseillons de garder le défaut */
/* Couleur et style des liens par défaut si vous insérez des liens sur la page,
nous conseillons de les garder soulignés pour une meilleur accessibilité */
a {
color: #344DA1;
text-decoration: underline;
}
/* Couleur et style des liens si vous passez votre souris dessus */
a:hover, a:focus {
color: #336699;
text-decoration: none; }
/* Style et couleurs des titres */
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; }
/* Si vous souhaitez définir des tailles différentes pour les titres,
vous pouvez le faire ci-dessous */
h1 {
font-size: ;
}
h2 {
font-size: ; }
h3 {
font-size: ; }
h4 {
font-size: ; }
h5 {
font-size: ; }
h6 {
font-size: ; }
/* Définir la barre de progression, optionel, ici elle est cachée */
.progress {
display: none; }
.progress-bar {
display: none; }
/* Paramètres du formulaire + header + footer.
Par exemple, si vous souhaitez que le formulaire + header + footer soit encadré,
c'est ici. Par défaut il n'y a pas de bordure. */
#letter-container-responsive {
max-width: 800px !important;
padding: 0;
margin: 0 auto 0;
background: #fff;
border: none;
box-shadow: none; }
/* Paramètres du formulaire uniquement. Vous pouvez définir la couleur de fond
et la bordure du formulaire d'inscription en milieu de page */
div#common_content {
padding: 20px 40px 40px;
border: none; /* Par défaut il n'y a pas de bordure */
line-height: 1.5em;
margin: auto;
background: #ffffff; }/* Couleur de fond du formulaire ici */
/* Police d'écriture du menu de navigation en haut de page */
nav, .navbar-nav {
font-family: /*fontstack here*/;
font-size: 1em;
opacity: 1;
text-transform: none;
font-weight: 400; }
/* Couleur de fond, taille et style de la barre de navigation en haut de page
+ ajouter votre logo à la gauche du menu (optionnel)*/
.navbar-default { /*Paramètres par défaut*/
background: #fff; /*couleur de fond de la barre en haut de page*/
box-shadow: none;
opacity: 1;
border: none;/*Par défaut il n'y a pas de bordure autour du menu*/
border-bottom: none;
-webkit-box-shadow: none;
box-shadow: none; }
@media screen and (min-width: 1200px) { /*paramètres en fonction de la taille de l'écran*/
.navbar-default:before {
content: “”;
display: block;
position: absolute;
left: 2%;
top: 0;
bottom: 0;
height: 50px;
width: 150px;
margin: auto 0;
background: transparent url("") center no-repeat; /*ajouter votre logo ici*/
background-size: contain; } }
@media screen and (max-width: 1200px) { /*paramètres en fonction de la taille de l'écran*/
.navbar-default:before, #mobile-nav:before {
content: “”;
display: block;
position: relative;
left: 0;
top: 5px;
bottom: 0;
right: 0;
height: 40px;
width: 140px;
margin: auto;
background: transparent url("") center no-repeat;/*ajouter votre logo ici*/
background-size: contain; } body {
padding-top: 110px; } }
@media screen and (max-width: 768px) { /*paramètres en fonction de la taille de l'écran*/
.navbar-default:before, #mobile-nav:before {
height: 45px;
width: 140px;
z-index: -1; } #mobile-nav {
background: #fff; } #mobile-nav:before {
position: absolute; } .navbar-default .navbar-nav > li > a {
padding: 0px 0; } body {
padding-top: 117px; } }
/* Contenu de la barre de navigation (les étapes d'inscription),
le contenu est centré par défaut*/
nav .container {
background: transparent;
max-width: 800px; }
/* Paramètres de la barre de navigation sur mobile
Nous conseillons de garder les paramètres par défaut*/
@media (min-width: 768px) {
nav .container {
width: 800px; } }
.navbar {
margin-bottom: 0;
color: #333;
display: inline-block; }
/* Paramètres des cellules "étapes de la page d'inscription" dans le menu.
Nous conseilleons de garder le défaut */
nav#enrollment-page-menu .navbar-nav {
table-layout: fixed; }
nav#enrollment-page-menu .navbar-nav > li {
width: 100%; }
/* Masquer l'icône ">" entre les cellules du menu */
li.divider-icon {
display: none; }
/* Largeur maximum des cellules dans le menu
Nous conseilleons de garder le défaut */
.navbar-nav > li {
max-width: 33.33%; }
.navbar-nav > li > a {
min-height: 0;
border: none; }
/* Style des cellules non actives dans le menu
C'est également ici que vous pouvez affecter la hauteur du menu'*/
.navbar-default .navbar-nav > li > a {
color: #333;/*Couleur du texte de la cellule*/
background: transparent; /*Couleur de fond de la cellule*/
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; }
/* Style des cellules du menu lorsque vous passez votre souris dessus */
.navbar-default .navbar-nav > li > a:hover {
color: #c33; /* Couleur du texte */
text-decoration: none; /* Style du texte, si par exemple il est souligné */
background: transparent; } /* Couleur de fond de la cellule */
/* Indicateur d'étape de la page d'inscription lorsque vous passez votre souris dessus*/
.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;/*couleur du texte souligné*/
z-index: -1; }
/* Style des cellules actives du menu (i.e. de la page sur laquelle vous êtes) */
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #c33; /*couleur du texte*/
background: transparent; /*couleur de fond de la cellule*/
text-decoration: none;
font-weight: 400; }
.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; }
/* Position des cellules du menu sur mobile
Nous conseillons de garder le défaut */
@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; } }
/* Style des cellules du menu désactivées */
.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); /* Couleur du texte */
background: transparent;/* Couleur de fond de la cellule */
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; }
/* Position et style du nom de l'événement apparaissant sur mobile */
.nav-event-title {
position: relative; /* Position du titre, défaut conseillé */
color: #333; /* Couleur du texte */
margin-bottom: 0;
font-weight: 400; }
/* Couleur et style des alertes infos */
/* Info classique */
.alert-info {
background: ;
color: ;
border: none; }
/* Info succès */
.alert-success {
background: ;
color: ;
border: none; }
/* Info attention */
.alert-warning {
background: ;
color: ;
border: none; }
/* Info alerte critique */
.alert-danger {
background: ;
color: ;
border: none; }
/* Form block selector */
.form-group {
padding-bottom: 15px;
font-size: inherit !important; }
/* Style et couleur des champs à remplir sur la page d'inscription */
.form-control {
background: transparent;/* Couleur de fond du champ à remplir */
padding: 0px 6px;
color: #333;/* Couleur du texte */
border-radius: 0px;
border: 1px solid #ccc; } /* Couleur, type et épaisseur de la bordure du champs */
/* Paramètre du champs à remplir sélectionné / actif sur la page d'inscription */
.form-control:focus {
border-color: #000; /*couleur de la bordure du champs actif*/
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); }
/* Style du champs à remplir s'il y a une erreur */
.has-error .form-control {
border: 1px solid #a94442; } /* épaisseur, style et couleur de la bordure du champs*/
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline {
color: #a94442; } /* Couleur du texte de l'erreur */
/* Style du champs à remplir s'il y a une erreur
et que ce champs est actif/sélectionné */
.has-error .form-control:focus {
border-color: #a94442;/* Couleur de la bordure du champs */
-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); }
/* Police et style des textes des intitulés des questions sur la
page d'inscription */
.control-label {
font-family: /* Fontstack here */;
font-weight: normal;
}
/* Polices et transitions de tous les boutons */
.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; }
/* Boutons "Continuer" sur la page d'inscription. */
.btn-success, .btn-primary {
position: relative;
background: #aaa; /* Couleur de fond */
color: #000;/* Couleur de texte */
border: 1px solid #000; /*épaisseur, style et couleur de la bordure */
box-sizing: content-box; }
/* Style des boutons "Continuer" lorsque vous passez la souris dessus */
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background: #222;/* Couleur de fond du bouton */
color: #fff;/* Couleur du texte */
border: 5px solid #000;/* Épaisseur, style et couleur de la bordure */
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
/* Paramètres par défaut de tous les autres boutons */
.btn-default {
background: #aaa;/* Couleur de fond du bouton */
color: #000;/* Couleur du texte */
border: none; /*bordure*/
position: relative; }
/* Lorsque vous passez la souris sur ces boutons */
.btn-default:hover, .btn-default:active, .btn-default:focus {
background: #555;
color: #000;
border: none; }
/* Boutons de la page des remerciements*/
#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; }
/* --- Menu sur mobile--- */
#mobile-nav {
padding: 10px; }
/* Couleur de fond du bouton menu burger */
#mobile-nav .toggle-button, #mobile-nav .dropdown-toggle {
background: #fff; /* Couleur de fond du bouton */
border: 1px solid #333; }/* Épaisseur, style et couleur de la bordure */
#mobile-nav .toggle-button .bar, #mobile-nav .dropdown-toggle .bar {
background: #333; } /* Couleur du contenu du bouton menu burger */
/* Paramètre du menu s'ouvrant à la gauche de l'écran sur mobile */
#menu-mobile {
background: #fff;
color: #333; }
/* Cellules du menu sur mobile */
#menu-mobile > ul > li > a {
color: #333; } /* Couleur du texte de la cellule par défaut */
#menu-mobile > ul > li.active { /* Couleur de fond de la cellule de la page 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