Custom Template Design 2.84 - 2.93 - with Visual Guide

As with previous versions, an htm and php file should be loaded to the public_html/template directory of the site.  System/core files need not be, and should not be changed in any way to accommodate the new responsive design. 

Visual Guide

You can use the guide below to see how our base template styles appear on the site itself. Please also view the HTML code within the default templates for further help

Included Templates

The following base template styles are included in the 2.84 release files, in eight general colors.

Template Type

Top/Bottom Bars?

Right Column?

Mobile

yes

yes

Top Left

yes

no

Left Right

no

yes

Left

no

no

Customization Options

Remove Search Box

To remove the search box from the header, remove the lines:

<div class="searchform"><script language="php">include(SB_HOME_PATH ."/" .SB_INC_DIR ."/search_site.php");</script></div>

From the <header></header>. You can then add:

<script language="php">include(SB_HOME_PATH ."/" .SB_INC_DIR ."/search_site.php");</script>

elsewhere in the template. Note: the mobile menu will adjust to moving the search include out of the header by pointing to the search page vs. popping up a search box.

Remove View Cart

To remove the view cart link from the header, remove the lines:

<div class="viewcartbox"><script language="php">include(SB_HOME_PATH ."/" .SB_INC_DIR ."/viewcart.php");</script></div>

From the <header></header>. You can then add:

<script language="php">include(SB_HOME_PATH ."/" .SB_INC_DIR ."/viewcart.php");</script>

elsewhere in the template.

Change Site Width

The current width of the inner box on the site is 1200px. To change that to a different amount, add the following to your template's style codes (inside ):

Fixed Pixel Width (e.g. 920px - but you can change that to any value)

#overwrap, div.sb_hpages, header, footer {

    max-width: 920px;

}

@media screen and (max-width: 920px) {

    header {

        margin-top: 0;

    }

}

Full Width (100%)

#overwrap, div.sb_hpages, header, footer {

    width: 100%;

    max-width: 100%;

        margin-top: 0;

}

Body Background

Each template uses a different CSS-created background design (horizontal or vertical stripes, large or small polka dots, or diagonal stripes). You can easily replace those styles with your own background images.

The body {} class in the <style type="text/css"> creates the background. Change the entire line:

body {

... CSS background here ...

}

with:

body {

background-image: url('<?php echo $urldir; ?>/images/bkgd.png');

}

Left/Right Column Backgrounds

The template creates a colored background behind the div.overwrap, which creates the column colors. (It's done this way to allow the colors to extend to the full height of the site and not just the height of the content in the columns.) To change these colors, change the hex color values in the #overwrap {} entry in the template.

e.g.) The Blue_Mobile template uses the entry:

#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% );

}

In this code, you can change #CAE8FF to a different color to reflect the background of the left and right columns. Or you can change #FFFFFF to reflect the background color of the center content.

Left Image Backgrounds

If you use a template without a right vertical navigation column, you can set a background image on the left navigation bar. This image must be at least the width of the navigation column. We recommend using an image the exact width to avoid the background showing when page content is shorter than the navigation bar.

e.g.) You want to use the image 'images/leftbackground.png' as the background in your left navigation column.

#overwrap {

background-color: #FFFFFF;

background-image: url('/images/leftbackground.png');

background-repeat: repeat-y;

}

In this code, you can change #FFFFFF to reflect the background color of the center content.

Mobile Logo

The system now allows you to upload a separate mobile logo, to be shown only when you are viewing the site in a mobile browser. This logo appears as a small logo. If you want the mobile logo to be a header image that takes up the entire header, add:

@media screen and (max-width: 800px) {

header .sb_content { display: block; }

header .sb_content .sitelogo img.mobile_logo { max-width: 100%; max-height: none; height: auto; }

header .sb_content h1.header { display: none; }

}

to your template's styles.

New Mobile Divs

The mobile functionality is controlled by the app.js file in the /go/ folder, through the %MOBILE% include. This is completely optional. If you do include the %MOBILE% include, a mobile menu appears when the screen narrows, with links to the catalog and/or site pages:

  • If you include:

<div class="searchform">

in the <header> tag of your template, that content will hide when the screen narrows, and will be displayed when you click the 'Search' link in the mobile menu.

  • If you include:

<div class="viewcartbox">

in the <header> tag of your template, that content will hide when the screen narrows.

  • If you include:

<div class="sb_hpages">

in the page body of your template, that content will hide when the screen narrows, and will be displayed and styled when you click the 'Pages' link in the mobile menu.

  • If you include:

<div class="sidebar_left">

in the page body of your template, that content will hide when the screen narrows, and will be displayed when you click the 'Catalog' link in the mobile menu.

  • Email, SSL
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

MM Custom (DIY) Templates - 2.93+ Responsive

We've updated our DIY templates for the new 2.93+ responsive system and they're now available for...

Fonts & Colors

1 Font Style = This font applies to all elements on your pages 2 Font Size = The main font...

Image Display Option ( 2.93)

Version 2.93 allows you to choose different image styles/functions for each layout. Change the...

Template Includes for 2.71 & 2.84(OLDER MM SOFTWARE )

INCLUDE TYPES AND USES: Includes in the following format are used when making edits to your...

Page Groupings

You can "group" different pages together to appear in different areas of the site. For...