Skip to main content

 

Cisco Meraki Documentation

Custom Splash Page Themes

  1. Last updated
  2. Save as PDF

A splash page (also known as a 'captive portal') can provide a branded experience to wireless users, in addition to prompting for username/password credentials. For example, the splash page can display a corporate logo and color scheme. The splash page can also show the terms of service, which might include an acceptable use agreement or a privacy statement. This can be useful for an open guest wireless network.

Custom splash page themes are shared across dashboard organizations, which means they can be used across different networks in the organization. Admins with network write permissions on one network will be able to edit custom splash pages that span the entire organization, which would affect other networks in the same organization that also use splash pages.

This KB article overviews how to implement a custom theme for your splash page.

For additional information on splash page configuration, please refer to our documentation on Configuring Splash Pages.

Creating a Custom Theme 

  1. Click on Create something new to start creating the custom theme for the splash page.
    2017-07-25 08_35_22-Splash Page - Meraki Dashboard.png
     
  2. Pick a base theme from the drop-down menu.
    2017-07-25 08_38_26-Splash Page - Meraki Dashboard.png
     
  3. Click the Copy button.

Editing a Custom Theme Color

  1. Choose the custom theme to edit.
  2. Customize the color of the background, text and links as desired.
    2017-07-25 08_48_50-Splash Page - Meraki Dashboard.png
     
  3. Click on Save changes at the bottom of the page to apply the changes.
  4. The Color Motif will automatically change to Custom.

Editing the Custom Theme's HTML Files

Note: This section requires working knowledge of HTML and CSS.

  1. Click on the pencil icon right next to the custom theme.
    2017-07-25 08_49_33-Splash Page - Meraki Dashboard.png
     
  2. Select the available HTML files and click on edit.

2017-07-25 08_51_08-Meraki Dashboard.png

  • continue_with ads.html – This is the click-through HTML file that includes a side advertisement.
  • auth.html – This is the authentication portal HTML file.
  • continue.html – This is the click-through HTML file without the side advertisement.
  • sms.html – This is the HTML file for Short Message Service (SMS) authentication.
  • blocked.html – This is the HTML file of the blocked page displayed to users that cannot authenticate successfully.

 

If the page becomes unusable after an edit and cannot be corrected, delete the custom theme and start again. While making changes to the templates, it is important to make note of what is being added and/or removed.   Deleting certain lines can have unintended effects.  Specifically, if the variable <meta name="viewport" content="user-scalable = yes"> is removed, the page will no longer scale when moving from a computer browser to a phone or tablet.

 

3.  Click on save to apply the settings.

Renaming a Custom Theme 

  1. Click on the pencil icon right next to the custom theme.
  2. Double click the name of the custom theme.
    2017-07-25 08_52_53-Meraki Dashboard.png
     
  3. Rename as desired and click ok to apply changes.

Deleting a Custom Theme 

  1. Click the "X" next to the custom theme to delete.
    2017-07-25 08_54_05-Splash Page - Meraki Dashboard.png
     
  2. Click on Save changes to apply.

Previewing the Splash Page 

  1. Choose the custom theme to preview.
  2. Click on the Preview option on upper part of the grayed box.
    2017-07-25 08_54_53-Splash Page - Meraki Dashboard.png

Additional Resources