Splash Pages personalization via CSS

  • Updated

In this page, you can find a collection of CSS code snippets to change the style of your Splash Page. If you are already using your own CSS, make sure the rules in these examples do not conflict with your own. 

 

Show Click through fields in home page

This hack allows to show the click through form directly in the home page. This hacks makes sense to save a click to the user in case the number of fields is limited or the click through is the only login option available.
 
div#clickCustomFields {
 display: block!important;
}
div#click_through_form {
 display: none;
}
button#clickButton {
 display: none;
}

a#clickThroughCancel {
 display: none;
}
.click_through_form_valitated {
 display:block!important;
}

.click_through_form_valitated #clickButton {
 display: block!important;
}
 

unnamed.png
 
 

Swap the order of terms and conditions and Marketing checkboxes

This hack allows to show the marketing checkbox before the terms of use checkbox. This hack helps to increase the percentage of users who opt-in to the marketing.
 
div#clickCustomFields{
 display: flex;
 flex-direction: column;
}
#clickCustomFields .click_through_input.click_privacy {
 order: 9;
}
#clickCustomFields .commit_bar {
 order: 10;
}

swap.png

 

 

Show the click through form in the full screen

This hack allows to show the click through form in a full page screen when the user clicks on the Go Online button on the main screen. This hack is suggested in case the form includes many input fields or opt-ins.

 
div#clickCustomFields {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: white;
 z-index: 2048;
 padding: 40px;
 -webkit-animation: fadeIn 1s;
 animation: fadeIn 0.2s;
 color: rgba(0,0,0,0.87);
}

.click_through_form_flip a {
 color: rgba(0,0,0,0.87);
}

div#clickCustomFields > div {
 max-width: 400px;
 margin: auto;
}
.modal.fade.in {
    z-index: 2074;
    top: 0px!important;
    bottom: 0px!important;
    left: 0px;
    right: 0px;
    border: none;
    background: white;
}

.modal.fade .modal-footer {
    display: none;
}

.modal.fade .modal-body {
    overflow-y: scroll;
    height: auto;
    padding: 15px;
    position: relative;
    background: white;
    max-height: none!important;
}

fullscreen.gif

 

Hide the topbar

The only purpose of the top bar is to give access to internet plans in case of paid services, logout in the success page and change the language. The only thing that still makes sense is the language selector.
 
home_menu {
 display: none!important;
}
li#menu1 {
 display: none!important;
}
.navbar-inner {
 background: none!important;
}
a.homeIcon.btn.btn-navbar {
 display: none!important;
}

 

 

Adjust the size of the Splash Page (full page model) main image

If you uploaded a too big image for the logo, use a few line of CSS to set some boundaries.

 
@media only screen and (max-width: 735px)
.main_brand img {
 width: auto;
 max-width: 300px;
}
.main_brand img {
 /*adjust the parameter to right value
depending on the image proportions*/
 width: 300px;
}

 smalllogo.png .  biglogo.png

 

 

 

 

 
 
 
Was this article helpful?
1 out of 1 found this helpful
Return to top

Related articles

Articles in this section

See more