ShopSite Forums

Your source for ShopSite user collaboration

Skip to content

changing the hspace in a custom template

Questions and answers about ShopSite Custom Templates
Post a reply

changing the hspace in a custom template

Postby omnidesigner » Thu Feb 02, 2012 3:13 pm

I created a custom template.. added the necc code to import as a template..?

However.. yet when the page is created.. and the images and content is inserted.. I cannot seem to have the hspace set at a certain amount. Changing it in the Images > Configure does not ever seem to take/stay. I am sure it is something I am needing to change in my css or something else. I know where to change it for each item.. however.. i have 2500 items.. there has to be a easier way. however.. i have ZERO idea on how to fix it.

Any advice would be greatly appreciated.

template code
Code: Select all
[-- DEFINE LINK_TO_PAGE --]
<a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">
[-- IF PAGE.LinkGraphic --][-- PAGE.LinkGraphic --]
[-- END_IF --]
[-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name --][-- END_IF --]
[-- IF PAGE.LinkText --]
[-- PAGE.LinkText --][-- END_IF --]
[-- END_DEFINE LINK_TO_PAGE --]

[-- DEFINE PAGE --]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[-- IF PAGE.Title --]
  <title>[-- PAGE.Title --]</title>
[-- ELSE --]
  <title>[-- PAGE.Name --]</title>
[-- END_IF --]

[-- IF PAGE.MetaKeywords --]
<meta name="keywords" content="[-- PAGE.MetaKeywords --]">
[-- END_IF --]

[-- IF PAGE.MetaDescription --]
<meta name="description" content="[-- PAGE.MetaDescription --]">
[-- END_IF --]

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Welcome to Bicycle Heaven</title>

<style type="text/css">
<!--
body  {
   background: #666666;
   margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
   padding: 0;
   text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
   color: #000000;
   background-image: url();
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 11px;
}
.twoColFixLtHdr #container {
   width: 1020px; /* the auto margins (in conjunction with a width) center the page */
   border: 1px solid #000000;
   text-align: left; /* this overrides the text-align: center on the body element. */
   background-color: #FFFFFF;
   background-image: url(WEB/images/bgrnd.gif);
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
}
.twoColFixLtHdr #header {
   padding-top: 0;
   padding-right: 10px;
   padding-bottom: 0px;
   padding-left: 50px;
}
.twoColFixLtHdr #header h1 {
   margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
   padding-top: 10px;
   padding-right: 0;
   padding-bottom: 10px;
   padding-left: 0;
}
.twoColFixLtHdr #sidebar1 {
   float: left; /* since this element is floated, a width must be given */
   width: 230px;
   padding-top: 15px;
   padding-right: 10px;
   padding-bottom: 15px;
   padding-left: 70px;
}
.twoColFixLtHdr #mainContent {
   clip: rect(auto,auto,auto,auto);
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 295px;
   padding-top: 0;
   padding-right: 10px;
   padding-bottom: 0;
   padding-left: 10px;
   width: 85%;
}
.twoColFixLtHdr #footer {
   padding: 0 10px 0 20px;
}
.twoColFixLtHdr #footer p {
   margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
   padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
   float: right;
   margin-left: 20px;
}
.fltlft { /* this class can be used to float an element left in your page */
   float: left;
   margin-right: 20px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
   clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body class="twoColFixLtHdr" onload="MM_preloadImages('WEB/images/nav_home_down.gif','WEB/images/nav_news_down.gif','WEB/images/nav_images_down.gif','WEB/images/nav_links_down.gif','WEB/images/nav_contact_down.gif','WEB/images/nav_store_down.gif')">

<div id="container">
  <div id="header"><br />
    <br />
    <table width="749" border="0" cellspacing="0" cellpadding="2">
      <tr>
        <td width="215"><img src="WEB/images/header-logo.gif" width="253" height="149" /></td>
        <td width="534"><img src="WEB/images/header1.gif" width="666" height="149" /></td>
      </tr>
    </table>
    <table width="908" border="0" cellspacing="0" cellpadding="2">
      <tr>
        <td width="253"><img src="WEB/images/categories.gif" width="253" height="45" /></td>
        <td width="65"><a href="Templates/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','WEB/images/nav_home_down.gif',1)"><img src="WEB/images/nav_home.gif" alt="home" name="home" width="65" height="45" border="0" id="home" /></td>
        <td width="78"><a href="Templates/news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','WEB/images/nav_news_down.gif',1)"><img src="WEB/images/nav_news.gif" alt="news" name="news" width="78" height="45" border="0" id="news" /></a></td>
        <td width="96"><a href="Templates/images.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('images','','WEB/images/nav_images_down.gif',1)"><img src="WEB/images/nav_images.gif" alt="images" name="images" width="96" height="45" border="0" id="images" /></a></td>
        <td width="84"><a href="Templates/links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','WEB/images/nav_links_down.gif',1)"><img src="WEB/images/nav_links.gif" alt="links" name="links" width="84" height="45" border="0" id="links" /></a></td>
        <td width="118"><a href="Templates/contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact_us','','WEB/images/nav_contact_down.gif',1)"><img src="WEB/images/nav_contact.gif" alt="contact us" name="contact_us" width="118" height="45" border="0" id="contact_us" /></a></td>
        <td width="134"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('store','','WEB/images/nav_store_down.gif',1)"><img src="WEB/images/nav_store.gif" alt="online store" name="store" width="134" height="45" border="0" id="store" /></a></td>
        <td width="2"><img src="WEB/images/nav_spacer.gif" width="67" height="45" /></td>
      </tr>
    </table>
    <!-- end #header -->
  </div>
  <div id="sidebar1"><form action="[-- SHOPPING_CART_URL BASE --]/productsearch.cgi?storeid=[-- STORE.ID --]" method="post">
<input type=hidden name="storeid" value="[-- STORE.ID --]">
<input type="text" name="search_field" size="13" value="[-- STORE.Search --]" onFocus="value=''">
<input type="submit" value="[-- STORE.Go --]">
  </form>
    <table id="Table_01" width="212" height="849" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="WEB/images/cat_01.png" width="212" height="21" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_02.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_03.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_04.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_05.png" width="212" height="24" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_06.png" width="212" height="21" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_07.png" width="212" height="25" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_08.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_09.png" width="212" height="22" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_10.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_11.png" width="212" height="22" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_12.png" width="212" height="24" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_13.png" width="212" height="22" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_14.png" width="212" height="24" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_15.png" width="212" height="22" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_16.png" width="212" height="24" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_17.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_18.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_19.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_20.png" width="212" height="22" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_21.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_22.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_23.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_24.png" width="212" height="24" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_25.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_26.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_27.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_28.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_29.png" width="212" height="22" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_30.png" width="212" height="24" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_31.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_32.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_33.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_34.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_35.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_36.png" width="212" height="23" alt="" /></td>
      </tr>
      <tr>
        <td><img src="WEB/images/cat_37.png" width="212" height="23" alt="" /></td>
      </tr>
    </table>
    <!-- End Save for Web Slices -->
<!-- end #sidebar1 --></div>
  <div id="mainContent">
    <table width="80%">
 <tr>
  <td align="left">
 [-- PRODUCT.ImageAlignment --]
 [-- IF PAGE.DisplayPageHeader --]
  [-- HEADER --]
 [-- END_IF --]
 
 [-- IF PAGE.DisplayName --]
  [-- IF PAGE.Name --]
   <h1>[-- PAGE.Name --]</h1>
  [-- END_IF --]
 [-- END_IF --]
 
 [-- IF PAGE.DisplayGraphic --]
  [-- IF PAGE.Graphic --]
    <img [-- PAGE.Graphic REMOVE_HTML --] align="left">
  [-- END_IF --]
 [-- END_IF --]
 
 [-- IF PAGE.Text1 --]
  <p>[-- PAGE.Text1 --]</p>
 [-- END_IF --]
 
 [-- INCLUDE Page-Layout PROCESS --]
 
 [-- IF PAGE.NumLinks 0 --]
 [-- ELSE --]
 <table class="Products" width="80%" align="center" border="[-- VAR.border --]" cellpadding="10">
  [-- LOOP LINKS PAGE.Columns --]
   <td valign="top" align="[-- VAR.align --]">[-- LINK --]</td>
 [-- END_LOOP LINKS --]
 </table>
 [-- END_IF --]
 
 [-- IF PAGE.Text2 --]
  <p>[-- PAGE.Text2 --]</p>
 [-- END_IF --]
 
 [-- IF PAGE.NumProducts 0 --]
 [-- ELSE --]
 <table class="Products" width="80%" align="center" border="[-- VAR.border --]" cellpadding="10">
  [-- LOOP PRODUCTS PAGE.Columns --]
   <td valign="top" align="[-- VAR.align --]">[-- PRODUCT --]</td>
  [-- END_LOOP PRODUCTS --]
 </table>
 [-- END_IF --]
 
 [-- IF PAGE.ProductsPerPage "0" --]
 [-- ELSE --]
  <div class="pagination">[-- PREVNEXT --]</div>
 [-- END_IF --]
 
 [-- IF PAGE.DisplayPageFooter --]
  [-- FOOTER --]
 [-- END_IF --]
 
 [-- IF PAGE.Text3 --]
  <p>[-- PAGE.Text3 --]</p>
 [-- END_IF --]
 
 [-- IF Page.GlobalCrossSell --]
 <table class="gcs_table">
 <caption>[-- STORE.GlobalCrossSellHeader --]</caption>
  [-- LOOP GLOBAL_Cross_Sell 3 --]
   <td class="gcs_table_content">[-- GLOBAL_CROSS_SELL --]</td>
  [-- END_LOOP Global_Cross_Sell --]
 </table>
 [-- END_IF --]
   </td>
  </tr>
 </table>
 </div>
    <h1>&nbsp;</h1>
<h1>&nbsp;</h1>
<h1>&nbsp;</h1>
  <!-- end #mainContent --></div><br class="clearfloat" />
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
[-- END_DEFINE PAGE --]
omnidesigner
 
Posts: 1
Joined: Thu Feb 02, 2012 3:02 pm
Top

Re: changing the hspace in a custom template

Postby ShopSite Lauren » Tue Feb 14, 2012 12:55 pm

What image are you trying to add the padding on? I would suggest hard coding the padding with CSS (it is cleaner and better for SEO). You have included the page template code below so I am assuming that you want the padding on the page template (however in your text you mention your products so if you want the padding on your product template you would do a similar thing as what I describe below, but in the product template to the product.graphic tag).

Add a class to the Page.Graphic tag.

[-- IF PAGE.DisplayGraphic --]
[-- IF PAGE.Graphic --]
<img [-- PAGE.Graphic REMOVE_HTML --] align="left" class="page-graphic">
[-- END_IF --]
[-- END_IF --]

Then add the following CSS to the page.

img.page-graphic {padding: 8px;}
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 887
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT
Top
Post a reply

Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 2 guests

Powered by phpBB® Forum Software © phpBB Group