Templates and Mobility
Tips on creating mobile-ready slscart templates. The template designer should be familiar with HTML5 and CSS (cascading style sheets).
The Blue Mobile template snippet. It has a horizontal menu showing the pages and a vertical menu, on the left, showing product categories. A featured column, on the right side, shows featured products.
<!DOCTYPE html>
<html>
<head>
<!-- t blue mobile 2018-06-01 -->
%META_TAGS%
<title>%TITLE_TAG%</title>
%STYLE_SHEET%
<style type="text/css">
body {
background: radial-gradient(#b2c1ed 15%, transparent 16%), radial-gradient(#cbdaff 15%, transparent 16%), #e5f4ff;
background: -webkit-radial-gradient(#b2c1ed 15%, transparent 16%), -webkit-radial-gradient(#cbdaff 15%, transparent 16%), #e5f4ff;
background: -moz-radial-gradient(#b2c1ed 15%, transparent 16%), -moz-radial-gradient(#cbdaff 15%, transparent 16%), #e5f4ff;
background-position: -10px -10px, 15px 15px;
background-size: 50px 50px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
}
header { background-color: #6482DB; }
.sb_hpages { background-color: #97B5FF; }
.mainwrap { background-color: #FFFFFF; }
#overwrap {
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #CAE8FF), color-stop(20%, #CAE8FF), color-stop(20%, #FFFFFF), color-stop(87%, #FFFFFF), color-stop(87%, #CAE8FF), color-stop(100%, #CAE8FF));
background-image: -webkit-linear-gradient(left, #CAE8FF, #CAE8FF 20%, #FFFFFF 20%, #FFFFFF 87%, #CAE8FF 87%, #CAE8FF 100% );
background-image: -moz-linear-gradient(left, #CAE8FF, #CAE8FF 20%, #FFFFFF 20%, #FFFFFF 87%, #CAE8FF 87%, #CAE8FF 100% );
background-image: -o-linear-gradient(left, #CAE8FF, #CAE8FF 20%, #FFFFFF 20%, #FFFFFF 87%, #CAE8FF 87%, #CAE8FF 100% );
background-image: -ms-linear-gradient(left, #CAE8FF, #CAE8FF 20%, #FFFFFF 20%, #FFFFFF 87%, #CAE8FF 87%, #CAE8FF 100% );
background-image: linear-gradient(left, #CAE8FF, #CAE8FF 20%, #FFFFFF 20%, #FFFFFF 87%, #CAE8FF 87%, #CAE8FF 100% );
}
/*** mobile only ***/
@media screen and (max-width: 800px) {
#overwrap { background: #FFFFFF; }
.sidebar_left { background-color: #CAE8FF; }
.sidebar_right { background-color: #CAE8FF; }
}
</style>
</head>
<body>
<div id="sb_overbox">
<header>
<div class="sb_content">
<div class="viewcartbox">%VIEW_CART%</div>
<div class="sitelogo">%SITE_LOGO%</div>
<div class="searchform">%SEARCH_SITE%</div>
</div>
</header>
<div id="overwrap">
<div class="sb_hpages">
%MOBILE%
%PAGES_HORIZONTAL%
</div>
<div class="sb_content clearfix">
<div class="sb_grid">
<section class="sidebar_left sb_unit">%CATEGORY_VERTICAL%</section>
<section class="sb_unit mainwrap">
<h1>%PAGE_TITLE%</h1>
%CATEGORY_NAVIGATION%
%SITE_MESSAGE%
%CATEGORY_DESCRIPTION%
%CONTENT%
</section>
<section class="sidebar_right sb_unit">%FEATURED_COLUMN%</section>
</div>
</div>
<div class="sb_hpages">
%PAGES_HORIZONTAL%
</div>
</div>
<footer>
<div class="sb_content">
<p>%EMAIL_FRIEND%</p>
<p>%COPYRIGHT%</p>
</div>
</footer>
</div>
%STYLE_LOWER%
</body>
</html>
%META_TAGS% above <title> tag so the charset meta tag is first. This is so the title tag, description, etc will be aware of which character set to use.
%MOBILE% shows the mobile menu when a mobile device is detected. It also sets the viewport.
sb_overbox - not used. Encompasses entire page.
<header> sets header color and font size, centered, adds margin-top 20px.
viewcartbox - positions view cart image/button upper-right corner of header. Uses abs positioning
searchform - positions search form lower-right corner of header. It will lay on top of site logo. Uses abs positioning
sb_content class will center its contents across the page (100% width). Display: block
sb_hpages class centers images (i.e. blocks) and text. width at 100% max width: 1200px.
sidebar_left - 20% width, max 300px. Notice sidebar_left has a background color in the /* mobile */ section of css. sidebar_left is normally has no background color but in mobile mode the sidebar left slides over the main part when clicked on. If it is transparent, you can see through to the main part so in mobile mode there needs to be a background color.
sitebar_right - centers text, 12% width with 1% padding
sb_unit - inline block
sb_pages - used for link color, link hover color
overwrap background-image creates 3 columns using gradients
20% for left col, 66% for center col, 13% for right col
-webkit-gradient /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
-webkit-linear-gradient /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
-moz-linear-gradient /* Firefox 3.6 - 15 */
-o-linear-gradient /* Opera 11.1 - 12 */
-ms-linear-gradient /* Internet Explorer (IE) 6-9, while they don't support the CSS gradient syntax */
linear-gradient /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
id=overwrap - max width 1200px on non-mobile
id=overwrap - on widths <= 800px
section.mainwrap - 66% width
<footer> - centers, text centers, width 100%, max width: 1200px, display: block
%COPYRIGHT% uses small font size, default 8 pt (11 px)
===sb_overbox - not used. Wraps entire content.
<header> sets header color and font size, centered, adds margin-top 20px
sb_content class will center its contents across the page (100% width)
sb_hpages class centers contents
sitebar_left - 20% width, max 300px
sb_grid - text align center, max-width: 100%
sb_unit - inline display bock
id=overwrap - max width 1200px on non-mobile
id=overwrap - on widths <= 800px
section.mainwrap - 66% width
***