Gruppas innmeldingsskjema for nye medlemmer har en standard layout/stil som følger den grafiske profilen til NSF. Gruppa kan selv legge til egen layout ved å bruke CSS.

Hva er CSS?

CSS er språket man skriver når man designer nettsider. I skjemaet kan du skrive din egen CSS, og/eller ta inspirasjon fra en av våre eksempler.

Eksempler på CSS

speiding.no-stil



* {
   font-family: 'Lato', sans-serif !important;
   box-sizing: border-box;
}

label, h2 {
   color: white !important;
   display: block;
}

html {
   background: none;
}

body {
   background: #33778f !important;
   background-image: url('https://speiding.no/assets/images/footer.png') !important;
   font-size: 0.9em !important;
}

body.frameless {
   margin: 0 !important;
}

div.frameless_wrapper {
   margin: 0 !important;
   max-width: 100vw;
}

#header_bar.slim_header .header_logo {
   width: 200px !important;
   height: auto !important;
   transform: translateY(17px);
}

#header_bar, #header_bar.slim_header {
   border-radius: 0 !important;
}

.slim_header #header_user_details p.logout_link {
   border: none;
}

#main_content {
   padding: 10px !important;
}

.tab_menu.inset {
   margin: 0;
   padding: 20px 10px;
   border-radius: 7px 7px 0 0;
}

.tab_pane.flat {
   padding: 10px;
   overflow-x: auto;
}

h1 {
   font-size: 2em !important;
   line-height: 100%;
   color: white !important;
}

h1 > a:link, h1 > a:visited, h1 > a:active, h1 > a:hover {
   color: #ddd;
}

h1::first-line {
   color: currentcolor !important;
}

.inline_add_box {
   height: auto !important;
}

.mini_main_menu_wrapper {
   display: none;
}

input[type=submit], input[type=submit]:hover {
   border: 1px solid #66a457 !important;
   border-radius: 200px !important;
   display: inline-block !important;
   padding: 12px 30px !important;
   background: none !important;
   background-color: #66a457 !important;
   color: #fff !important;
   font-size: 17px !important;
   text-decoration: none !important;
   position: absolute;
   left: 50%;
   margin: 20px 0;
   transform: translateX(-50%);
}

body.frameless .button {
   padding: 12px 30px !important;
}

input, select {
   padding: 10px !important;
   border-radius: 7px;
}

.question_list ul.custom_list_form li {
   margin: 20px 0;
}

.dob_field {
   max-width: none !important;
   width: 90px !important;
}

.checkbox_description {
   color: white;
}

/* CSS: Andreas Røste - Fri gjenbruk. */




Iframe

Hvis du bruker iframe, kan du style skjemaet slik at det ser mer ut som en del av sida di. Hønefoss speidergruppe har brukt iframes på denne måten.



Skjemaet er stylet på denne måten:



* { font-family: 'Open Sans', sans-serif !important; }

h1 { display: none; }

h2, h3 {
    font-family: 'Roboto Slab', sans-serif !important;
    font-size: 190% !important;
    margin-bottom: 10px;
}

html, body {
    background-color: #fff !important;
    margin: 0;
    padding: 0;
}

div.frameless_wrapper { max-width: none; }

.question_list, .register_integrated_form_container {
    background-color: white;
}

.question_list .question_section {
    border: none;
    border-radius: 0;
    padding: 0;
    margin-right: 0;
    margin-left: -7px;
}

.question_list ul.custom_list_form { margin-left: 0; }

.button-green, input[type=submit].button-green, a.button-green, a.button-green:link, .button-green:active, input[type=submit].button-green:active {
    background: none;
    background-color: #da4453;
    color: #fff;
    text-shadow: none;
}

.button, a.button:link, .button-silver, input[type=submit].button-silver, button.button-silver, a.button-silver, .button-silver:active, button.button-silver:active, input[type=submit].button-silver:active, a.button-silver:active, .button-green:active, input[type=submit].button-green:active {
    text-shadow: none;
}

.button {
    line-height: normal;
    padding: 10px !important;
    border: none;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

input {
    border: none;
}

.button, .button:hover, .button:link, .button:visited {
    line-height: normal;
    padding: 10px !important;
    border: none;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

CSS: Andreas Røste. Grafisk profil: PR-teamet til Hønefoss speidergruppe.