CubeCart Tutorials

Create a warning div for Internet Explorer 6 users for CubeCart

As Internet Explorer 6 is no longer supported by most web developers due to it being very outdated and a security risk aswell as the fact that it carnt understand standard css without having its own css/hacks applied, it would be nice to let any ie6 users that are still out there to upgrade there browser.

This simple tutorial will show you how to create a warning div that will display above the main page content to anyone that visits your site using ie6 - but it wont be displayed to users using any other browsers.

1) in 'skins/????/styleSheets/' folder you need to create an "ie6.css" file and place this code into it:

/* start ie6 warning notice */
div.no-ie6 {
  display:inline-block;   
  height:160px;
  border:3px solid red;
  background-color:#FD7575;
  margin:0 20px 0 10px;
  text-align: center;
  padding:6px;
  font-weight: bold;
  font-size: 15px;
}
div.no-ie6 span {
  font-weight: bold;
  font-size: 20px;
}
/* end ie6 warning notice */ 

2) in 'skins/????/styleSheets/layout.css' you need to add this code so that it hides the div from all other browsers:

/* start ie6 warning notice */
/* we dont want to show this if the browser is not ie6 so lets hide it*/
div.no-ie6 {display: none;}
/* end ie6 warning notice */ 

3) in 'skins/????/styleTemplates/global/index.tpl' we need to make sure ie6 calls the ie6 css code, so find:

<link href="/skins/{VAL_SKIN}/styleSheets/layout.css" rel="stylesheet" type="text/css" />
<link href="/skins/{VAL_SKIN}/styleSheets/lightbox.css" rel="stylesheet" type="text/css" media="all, screen"  />

(NOTE - if there is an ie7.css or ie.css file make sure that the new code goes below it)

place this code under all other stylesheet references:

<!--[if lt IE 7.0]>
<link href="/skins/{VAL_SKIN}/styleSheets/ie6.css" rel="stylesheet" type="text/css" />
<![endif]--> 

4) again in 'skins/????/styleTemplates/global/index.tpl' we need to add the div to show to ie6 users.

so find:

{PAGE_CONTENT}

and above it add:

<!-- start ie6 upgrade warning -->
   <div class="no-ie6">
    <span>Internet Explorer 6 is no longer supported !</span>
    <br/><br/>This Website will not display properly in you current browser
    <br/><br/>Please Update your web browser to either Internet Explorer 7 / 8 or Firefox
   <br/><br/>All 3 are availiable as free update or free download.
   </div>
 <!-- end ie6 upgrade warning --> 

you can always change the text that is displayed.

Note: if you want to view the warning div to customise it, just add the ie6 css code to your normal layout.css.
just remember to copy the custom code to the ie6.css file after you have finished and change the normal layout.css to 'div.no-ie6 {display: none;}'

and thats it, all finished..