Version 7 to Version 8 Upgrade: Display Skin Changes

A new set of display skins was installed when you upgraded to ClickCartPro 8 or EuropaCart 8. They are the Desktop skin (which is used for all desktop views), the Mobile skin (which is used to present the site on mobile devices), the MailMessage skin (which is used for all mail messages) and the Print skin (which is used for all printable pages like invoices).

For the Mobile, MailMessage and Print skins, you will need to change the logos used for them. To do this, in your management interface, access the System | Component | Settings | Display Skins function and follow the instructions there. If you would like to simply use the new Desktop skin, you can change the logo used for it, and the color scheme using the same function.

You will need to make changes to whichever skin you were using for the main part of your site, if you do not want to use the new Desktop skin. To make those changes, follow the instructions below:

STEP 1: Locate Your Skin

The best way to update your skin is to login to your site via FTP using your FTP client. Once you have logged in, access the public installation directory for the software. In that directory, access the 'skins' directory, then the directory for whichever skin you were using for the main part of your site.

STEP 2: Delete the print.php File

The print.php file is no longer used or necessary, so delete it.

STEP 3: Get a new skinfunc.php File

The skinfunc.php file is outdated. Copy the skinfunc.php file from the Desktop skin directory into your skin's directory.

STEP 4: Change the skin.php File

Make the following changes to the skin.php file:

Change the DOCTYPE and html tag from:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

To:

  • <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML+RDFa 1.0//EN' 'http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd'>

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">

Remove all meta tags, and the following PHP function call:

  • <?php $skinfunc->robotstag(); ?>

Replace the following:

  • <base href="<?php print $disp_baseurl; ?>" />

With:

  • <base href="<?php print $this->globals('core_display.base_url'); ?>" />

Where you have your CSS file included:

  • <link rel="stylesheet" type="text/css" media="all" href="skins/YOUR_SKIN_NAME/skins/css/skin.min.css" />

Right above that, add:

  • <link rel="stylesheet" type="text/css" media="all" href="media/skins/skins/css/skin.min.css" />

Remove the title tag:

  • <title><?php print $metatitle; ?></title>

Ensure you are using the following code to display a mini account login, if you want that feature for your site:

  • <?php $skinfunc->xnamespace('core','miniacctlogin'); ?>

If you have a div named 'skin_content' in your skin, remove it. It's injected by the system around the content so that overlays for ajax displays work.

  • <div id="skin_content">

    </div>

Anywhere you are calling the namespace 'skinwidgets', typically done with:

  • <?php $skinfunc->xnamespace('core','skinwidgets','LEFT'); ?>

Change the parameter so it is correct. Available values are 'HEADER', 'NAVMENU', 'SIDEMENU' and 'FOOTER'. Typically old skins used 'LEFT' and 'RIGHT'. We recommend that you simply replace either 'LEFT' or 'RIGHT' with 'SIDEMENU' to begin with. Then, in the management interface, access the System | Displays | Skin Widgets function, and change the value for the 'Desktop Display Group' field to 'SIDEMENU' for any skin widgets that you want to appear there.

Remove the following two PHP function calls:

  • <?php $skinfunc->titletag($disp_title); ?>

    <?php $skinfunc->content(); ?>

And replace with:

  • <core:content />

Lastly, if you have any ZipSkin function calls in your skin, delete them and replace them with skin widget function calls:

  • <?php $skinfunc->include_skinfile('includes/minisearch.php'); ?>

    <?php $skinfunc->include_skinfile('includes/minicart.php'); ?>

STEP 5: Change the Skin's CSS File

Open up the file skins/css/skin.min.css for editing. Understand that most of the styles used by the system are now in the public installation directory's media/skins/skins/css/skin.min.css file after the upgrade, so many of the styles in your all.css file are unnecessary. You should now use your all.css file for laying out and styling the content contained in your skin, and for overriding any styles from public installation directory's media/skins/skins/css/skin.min.css file, if you so choose.

Remove everything from the 'General XHTML Elements' section except for the 'body' and 'a' declarations.

Remove the entire section named 'General XHTML Classes'.

Skip over any sections which have declarations in them which begin with 'skin_'. Those are used by your skin and should be left in there. There is one exception to this. Any declarations beginning with 'skin_fenav' were previously used by the system and can be deleted.

Removed the entire section named 'System Required Divs', and all sections which begin with 'System Required Classes'.

In the end, your skin will contain only declarations for elements contained in your skin.php file, as well as 'body' and 'a' declarations.

STEP 5: Review and Make Changes

View your site and see if you like how it looks. You will probably want to make a few changes. Start by adjusting the skin widgets as instructed in step 4 above, then take a look at the public installation directory's media/skins/skins/css/skin.min.css to see what declarations you might like to override in your all.css file to give your site a custom look.

© 1999-Present Kryptronic, Inc. All rights reserved worldwide. Kryptronic, the Kryptronic logo and all Kryptronic software names and logos are trademarks of Kryptronic, Inc. All Kryptronic software is copyrighted and the intellectual property of Kryptronic, Inc. All Kryptronic software is developed and distributed under license by Kryptronic, Inc.