cancel
Showing results for 
Search instead for 
Did you mean: 

Splash Page Accept Box

Highlighted
Here to help

Splash Page Accept Box

Happy New Year Everyone!

 

 

Is there a way to increase the Accept box on the Meraki splash page? I've noticed on iPhones, when I get the splash page the "I Accept terms" checkbox is a little dot...Not even a real box, like it is on laptops and droid phones.

 

Anyone else notice that? Any way to increase the size of that box?

 

Thanks in advance!

 

Mick~

3 REPLIES
Building a reputation

Re: Splash Page Accept Box

I'm not a web designer but checkboxes usually have a standard size tied to the resolution, if it's too small it's more an issue with the used browser than something else.

 

That being said, yes you can change the size of it.

 

You can create a copy of the standard "modern" and add some custom CSS to make it bigger:

 

First create the custom theme:splash_page_theme.PNG

Then edit its CSS, the checkbox's id is gdpr_checkbox:splash_page_css.PNG

Here to help

Re: Splash Page Accept Box

@BrechtSchamp thanks so much! I'll try that!

Here to help

Re: Splash Page Accept Box

Hi @BrechtSchamp,

 

I do not see gdpr_checkbox in the code. Any suggestions? Please see below:

html { font-size: 100%;-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
form { margin: 0; }
label { cursor: pointer; }
button, input {
-webkit-appearance:none;
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
line-height: normal;
*overflow: visible;
}
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

a, a:visited, a:active {color: #fff; text-decoration: none;}

.hidden { display: none; }

body {
margin: 0;
background: #eee;
color: #555;
font-size: 14px;
line-height: 1.4em;
font-family: georgia, palatino, serif;
}

h1, h2, h3, p, a {
font-family: CiscoSans, helvetica, helvetica neue, verdana, tahoma, sans-serif;
}
h1 {
font-size: 30px;
font-weight: 100;
line-height: 35px;
color: #555;
margin: 0 0 1em;
}
h2 {
font-size: 14px;
font-weight: normal;
}
h3 {
font-size: 9px;
font-weight: 400;
letter-spacing: 1px;
color: #888;
}
p{
color: #555;
}

.link_in_text a { color: #555 }

.header {
border-bottom: 1px solid #ddd;
padding: 2em 0;
margin: 0 0 2em 0;
}

.header table { width: 100%; }
#title_cell { vertical-align: bottom; }
#icon_cell { text-align: center; }
#icon_cell img {
max-width:150px;
max-height: 100px;
}

#container {
max-width: 900px;
min-width: 300px;
margin: 0 auto;
background: #fff;
text-align: center;
}

#content {
background: #fff;
}

#continue {
padding: 2em;
}

#blocked {
padding: 2em;
}

#auth {
box-sizing: border-box;
padding: 0 1.5em 2em;
}

#left_col {
width: 100%;
margin-bottom: 3em;
text-align: left;
}

#right_col {
width: 100%;
text-align: left;
margin-top: 4em;
margin: 0 auto;
}

#account a {
color: #1795E6;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid #ccc;
}

#account a:hover {
color: #0876BD;
}

#account a:last-child {
border: none;
}

#sign_in {
background: $MERAKI:CONTENT1_BACKGROUND_COLOR$;
color: $MERAKI:CONTENT1_TEXT_COLOR$;
border-radius: 2px;
margin: 2.5em 0 1em;
padding: 1em;
box-sizing: border-box;
width: 100%;
display: inline-block;
text-align: center;
}

#sign_in:hover {
opacity: .85;
}

#blocked_msg {
text-align: center;
padding: 15px 0;
}

#claim_ap_msg {
text-align: center;
padding: 15px 0;
}

.formarea h3 {
line-height: 0;
}

.formarea input {
background: #eee;
border: 1px solid #ddd;
box-sizing: border-box;
border-radius: 2px;
padding: .7em;
width: 100%;
}

#email_field {
margin-bottom: 1.5em;
}

.button {
color: $MERAKI:CONTENT1_TEXT_COLOR$;
background: $MERAKI:CONTENT1_BACKGROUND_COLOR$;
padding: 1em 2em;
-moz-border-radius: 3px;
border-radius: 3px;
display: inline-block;
margin: 1em 0;
}

.button:hover {
opacity: .85;
}

#forgot_password, .form_links:not(.hidden) {
display: inline;
}

#signin_form .form_links {
float: right;
}

#forgot_password a,
.form_links a {
font-size: 12px;
color: #1795E6;
}

#forgot_password a:hover,
.form_links a:hover {
color: #0876BD;
}

#create_account_form h3 {
margin-top: 3em;
}

.footer {
width: 100%;
background: #eee;
border-top: 1px solid #ddd;
padding: 2em 0;
text-align: center;
display: inline-block;
}

.footer img {
margin: .5em 0;
}

.meraki_go_footer {
width: 100%;
background: #fff;
border-top: 1px solid #ddd;
padding: 2em 0;
text-align: center;
display: inline-block;
}

.meraki_go_footer img {
margin: .5em 0;
}

.error {
background: #eee;
border-radius: 2px;
border: 1px solid #ddd;
margin: 3em 3em 0;
box-sizing: border-box;
padding: 0 .5em;
}

.error p {
color: #999;
font-size: 12px;
}

.login-error {
background: #ffdddd;
border-radius: 2px;
border: 1px solid #ffb8b8;
box-sizing: border-box;
text-align: center;
margin-bottom: 2em;
}

.login-error p {
color: #ff5959;
font-size: 12px;
}

.login-error img {
width: 11px;
margin: 5px 7px 0 0;
}

input:invalid, textarea:invalid { background-color: #f0dddd; }
.formarea input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 0px red; -webkit-box-shadow: 0px 0px 0px red; box-shadow: 0px 0px 0px red; }
.formarea label.invalid {border: none; color: red; min-height: inherit; padding: 5px 0 0; margin: 0;}

@media (min-width: 370px) {
#auth {
padding: 3em 3em 5em;
}
#left_col {
text-align: center;
}
}

@media (min-width: 550px) {
#auth {
padding: 3em 3em 5em;
}
#left_col {
width: 70%;
margin: 0 auto;
padding-bottom: 3em;
text-align: center;
}
#right_col {
width: 70%;
margin: 0 auto;
}
}

@media (min-width: 730px) {
#auth {
display: inline-block;
padding: 3em 3em 5em;
}
#left_col {
float: left;
text-align: left;
width: 50%;
padding-right: 3em;
box-sizing: border-box;
}
#right_col {
float: left;
width: 50%;
margin: 0;
padding-left: 3em;
box-sizing: border-box;
}
}

.GoSplash .header {
padding-top: 4em;
border-bottom: none;
margin-bottom: 0;
}

.GoSplash #blocked {
padding-top: 1em;
}

.GoSplash .GoSplash__blockedIcon {
height: 8em;
}

.GoSplash .GoSplash__blockedIconLine--primary {
fill: #213A44;
}

.GoSplash .GoSplash__blockedIconLine--accent {
fill: #16E4D8;
}

.GoSplash h1 {
font-weight: 300;
color: #213A44;
}

.GoSplash p {
color: #666F77;
}

@media (max-width: 400px) {
.GoSplash .GoSplash__blockedIcon {
height: 6em;
}

.GoSplash .header {
padding-top: 2em;
padding-bottom: 0.5em;
}

.GoSplash h1 {
font-size: 24px;
}
}