Template Blue Left
This example, blue left, is a 2 column responsive template. Left column has catalog menu showing product categories and a pages menu showing the active pages. A search bar is in the lower right corner of the header and view cart link in the upper right corner.
Images displayed are Logo and Mobile Logo in catalog images.
The left column is about 34% wide, right column 66% wide. Total 1200px max as desktop.
<!DOCTYPE html>
<html>
<head>
<!-- t blue left 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%
</div>
<div class="sb_content clearfix">
<div class="sb_grid">
<section class="sidebar_left sb_unit">
<h2>Catalog</h2>
%CATEGORY_VERTICAL%
<h2>Pages</h2>
%PAGES_VERTICAL%
</section>
<section class="sb_unit mainwrap">
<h1>%PAGE_TITLE%</h1>
%CATEGORY_NAVIGATION%
%SITE_MESSAGE%
%CATEGORY_DESCRIPTION%
%CONTENT%
</section>
</div>
</div>
</div>
<footer>
<div class="sb_content">
<p>%EMAIL_FRIEND%</p>
<p>%COPYRIGHT%</p>
</div>
</footer>
</div>
%STYLE_LOWER%
</body>
css
The body gradient css makes a bluish polka dot site background
id=overwrap - max width 1200px on non-mobile
id=overwrap - on widths <= 800px
section.mainwrap - 66% width
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
tags
sb_overbox - not used. Wraps entire content. Default width is 1200px.
<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.
sitebar_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.
sb_grid - text align center, max-width: 100%
sb_unit - inline display bock
<footer> - centers, text centers, width 100%, max width: 1200px, display: block
tics
Click on template insert code link for the entire list.
%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.
%PAGE_TITLE% - note it is inside <h1> tag
%COPYRIGHT% uses small font size, default 8 pt (11 px)
%STYLE_LOWER% is for using Google analytics.
***