Skinning CM

Skinning your Kiosks

The convention master system is fully skinnable. This allows you to work with your own web and graphic designers to make new themes.  

In order to help your designers make custom skins,  we have provided the following zip download. This download will let your designers make custom themes by creating a kiosk which will step through each of the most common screens customers see.  When complete, the theme folder can be uploaded into your convention master system.

Download

You can download the theme_testing zip file here.

How to use this zip

• Requirements - Any webserver, with PHP5
• Installation - Simply extract the contents of the ZIP file into a web accessible folder.
• Usage  
  • Copy the default theme folder - Make a copy of the console-default folder (in the /theme/ folder)   name the copy of the folder whatever you want to name your theme.
  • Change the steps file to referenece the new theme - edit the  kiosk/theme_test/steps.inc.php file, change the $_SESSION['system_theme'] setting to reflect the name of your new folder.
  • Modify the theme - Modify the files in your newly copied theme folder. You can change the CSS , images, or even head and footer of the pages.
  • Test your theme - Use the kiosk/theme_test/ url to step through the kiosk just like a customer would.  Almost every screen and every CSS element should be present.   On the membership selection screen, if you choose child, it will take you through the screens that related to linking a membership to a adult.
  • Upload your theme to your own CM install - Once you're finished tested, upload your theme into the theme/ folder in your CM install, and change the steps file of any kiosk to activate it.
• Contents of the theme folder
  • layout_no_menu.inc.php - This file is the file which starts the top of each page. You will want to edit htis in order to edit the top of each page.
  • bottom.inc.php - This file is included after the module content. You will want to edit this in order to edit the bottom of each page.
  • styles.css - This file is the primary CSS file, if you just want to change the colors of the skin, most of your editing will be done here.
  • images/ - This folder contains images reference by the above-mentioned php files. 
  • Other files located in the theme folder can be ignored. They control how the console looks, how scangun is styled, and you are free to experiement with them, but do not affect the kiosk look/feel.

What is <?php print $relurl; ?>

   While editing bottom.inc.php and layout_no_menu.inc.php you will run across some php code written as <?php print $relurl; ?> when this is executed as a php program, this will be replaced with the url to the theme folder. This code must be put in front of things like images, because otherwise you would need to copy the images into each kiosk folder.  

   Also at the top there is a block of code that says 

    if ($_SESSION['looking_at'] == "console") {
        $relurl = $_SESSION['console_relative_url_to_theme_folder'];
    } else {
        $relurl = $_SESSION['relitive_url_to_theme_folder'];
    }
    //$relurl = $_SESSION['relitive_url_to_theme_folder'];

    Leave this code alone from the <?php to the ?>  this is waht enables the $relurl code mentioned above to work.

?>