Home > Security Appliances > Access Control and Splash Page > Custom Splash Page Themes

Custom Splash Page Themes

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.

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

Note: 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.

     
  2. Pick a base theme from the drop-down menu.

     
  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.
    5ecc0801-32be-423d-942e-a5cd29769847
     
  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.

     
  2. Select the available HTML files and click on edit:
    .da0fe3d2-a96f-4dcd-82ca-639cd885d1a2
  • 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. Below is an example of what the tag should look like:

6141cdac-7761-476d-9396-aeef9d7e1811
 

       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.
    f1ad57be-766c-4692-aebb-76e989fa9706
     
  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.

     
  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 lower part of the grayed box.
You must to post a comment.
Last modified
11:11, 3 Feb 2015

Tags

Classifications

This page has no classifications.

Explore Meraki

You can find out more about Cisco Meraki on our main site, including information on products, contacting sales and finding a vendor.

Explore Meraki

Contact Support

Most questions can be answered by reviewing our documentation, but if you need more help, Cisco Meraki Support is ready to work with you.

Open a Case

Ask the Community

In the Meraki Community, you can keep track of the latest announcements, find answers provided by fellow Meraki users and ask questions of your own.

Visit the Community