View Single Post
  #30  
Old 04-17-2013, 08:32 PM
 
elmirage001 elmirage001 is offline
 

X-Wizard
  
Join Date: Apr 2007
Posts: 1,964
 

Default Re: X-Cart - reBOOT - Responsive Template

Hi Phil,

I've finally found a solution that gives responsive sprite images. I used InstantSprite to create the image sprite (great tool!) which in my example is 4 images 209px by 89px each, lined up horizontally for a total horizontal width of 836px. I do not use any of the CSS or code that it generates and instead us the CSS and code below.

The example below displays my 4 sprite promo images in bar.tpl just like I had in Ability except now the images are responsive.

CSS:
Quote:
#promo-wrap {
max-width: 836px;
margin-bottom: 0px;
padding: 4px 4px 0px 4px;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

#promo-wrap img {max-width: 400%;}

#one {max-width:100%; overflow:hidden; display:inline-block;}
#one img {width:400%;}

#two {max-width:100%; overflow:hidden; display:inline-block;}
#two img {margin-left:-100%; width:400%;}

#three {max-width:100%; overflow:hidden; display:inline-block;}
#three img {margin-left:-200%; width:400%;}

#four {max-width:100%; overflow:hidden; display:inline-block;}
#four img {margin-left:-300%; width:400%;}

My promo.tpl code:
Quote:
{capture name=menu}

<div id="promo-wrap">
<a id="one" href="product_one.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>

<div id="promo-wrap">
<a id="two" href="product_two.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>

<div id="promo-wrap">
<a id="three" href="product_three.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>

<div id="promo-wrap">
<a id="four" href="product_four.html"><img src="images/sprites/promo-sprite.jpg" alt=""></a>
</div>

{/capture}

{include file="customer/menu_dialog_bordered.tpl" title="Promo Items" content=$smarty.capture.menu}
__________________
X-Cart GoldPlus v4.7.12 | reBOOT (reDUX) Template v4.7.12.9 | Always The Best
Reply With Quote