Your Cart

Shopping Cart Items: 0   Sub-Total : $0.00    View Cart    Checkout
Welcome, Guest ( Customer Panel | Login )


Home | Profile | Register | Active Topics | Members | Search | FAQ


Forgot your Password?
 All Forums
 VPCart Forum
 Customization
 CSS SPRITES, VPASP AND FASTER LOAD TIMES		  New Topic  Reply to Topic
 Printer Friendly
Author Previous Topic Topic Next Topic  

billcat99
Starting Member

USA
23 Posts
Posted - October 14 2014 :  15:00:05  Show Profile  Visit billcat99's Homepage  Reply with Quote
Hi Everyone

In an attempt to to make my site loading times faster I used Google Analytics Page Insights to analyze my pages , amongst many suggestions one thing that kept coming up is the use of CSS Sprites to lessen the sites calls to the server to load images that are constantly used.

CSS Sprites allows you to combine multiple images , lets say 10 of them into one image with individual image coordinates that is loaded once. You then call that coordinates of the section or image you want and display, The result one image call to the server with the ability to display different sections, while speeding your site up.

Sounds great until I tried to implement it, I hope someone out there can shed some light on the subject.

I figured that the css part of the coding would go into the layout.css file. Looks like this.

.Prod_ico {
background:url("/images/sprite_icons.png");
}

sprite_icons.png is my image file that contains 10 images and is places in my /templates/images/ folder.

You are then to assign the image coordinates as follows

.Prod_ico {
background:url("../images/sprite_prod_ico.png") no-repeat; width:650px; height:75px;
}

.Prod_ico .Icon1 {
background:url("../images/sprite_prod_ico.png") 0,0;
}
.Prod_ico .Icon2 {
background:url("../images/sprite_prod_ico.png") 0,-85;
}

Then from your template files you are to pull the css like this

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="Icon1">

Nothing seems to work for me , It just does not pull the image in any of my testing.

I believe I am using the wrong syntax, any help would be appreciated and will help others too.

Bill

AleChe91
VP-CART New User

Italy
127 Posts
Posted - October 16 2014 :  08:23:20  Show Profile  Reply with Quote
i understand what you say,

i dont know the solution

let me know if you find it, good luck

Alessandro

www.stockelettrico.it
Go to Top of Page

serjtankian
VP-CART Super User

Armenia
378 Posts
Posted - October 16 2014 :  10:39:37  Show Profile  Visit serjtankian's Homepage  Reply with Quote
it''s new to me, and i think quite interesting, i''m registering this topic and hope someone expert with css can explain this






*serj*
Go to Top of Page

diegomilito
VP-CART Expert

Argentina
779 Posts
Posted - October 18 2014 :  05:08:14  Show Profile  Reply with Quote
quite interesting, and like other saying im also just heard of this.
diego
Go to Top of Page

manilow
VP-CART New User

France
134 Posts
Posted - October 19 2014 :  09:34:39  Show Profile  Visit manilow's Homepage  Reply with Quote
Hi Bill,

I think it will work in the following way:

Suppose your image sprite_icons.png with dimensions 240 x 120 px.

Specify in your stylesheet:

.prod_ico li {
background:url("../images/sprite_icons.png") no-repeat;
width:60px;
height:60px;
list-style-type: none;
}

.prod_ico .icon1 { background-position: left top; }
.prod_ico .icon2 { background-position: -60px top; }
.prod_ico .icon3 { background-position: -120px top; }
.prod_ico .icon4 { background-position: right top; }

.prod_ico .icon5 { background-position: left bottom; }
.prod_ico .icon6 { background-position: -60px bottom; }
.prod_ico .icon7 { background-position: -120px bottom; }
.prod_ico .icon8 { background-position: right bottom; }

(notice the negative values !!)


To display the individual images :

<ul class="prod_ico">
<li class="icon1"></li>
<li class="icon2"></li>
<li class="icon3"></li>
<li class="icon4"></li>
<li class="icon5"></li>
<li class="icon6"></li>
<li class="icon7"></li>
<li class="icon8"></li>
</ul>


I hope this will help you further.

Kind regards,

Erik
www.aquathermia.com
Go to Top of Page

pdieppa
VP-CART New User

USA
86 Posts
Posted - October 21 2014 :  10:00:50  Show Profile  Reply with Quote
I think VPASP version 7 already uses this for the default menus.
Go to Top of Page

billcat99
Starting Member

USA
23 Posts
Posted - October 21 2014 :  17:18:32  Show Profile  Visit billcat99's Homepage  Reply with Quote
Yes the above example from manilow worked , i do have one issue though , explained below.

Here is what I ended up doing on my end

in the shop700.css file added the following

#prod_ico {

}

#prod_ico li {
margin: 0;
padding: 0;
list-style: none;
position: top;
top: 0;

}

#prod_ico li, #prod_ico a {
height: 75px;
display: block;
}



I then defined the individual image parts as below.

#glut {
left: 0px;
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px 0px;
}
#soy {
left: 0px;
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -85px;
}

#formal {
left: 150px;
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -170px;
}
#hypo {
left: 225px;
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -255px;
}
#alco {
left: 300px;
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -340px;
}
#sulfate {
left: 375px;
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -425px;
}
#paraben {
left: 450px;
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -510px;
}
#gmo {
left: 525px;
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -595px;
}
#vegan {
left: 0px;
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -680px;
}

I THEN CALLED THEM FROM MY TEMPLATE OR PAGES AS FOLLOWS

<ul id="prod_ico">
<li id="soy"></li>
<li id="vegan"></li>
</ul>
it all works fine and pulls the image parts and displays them one by one.

THE ISSUE: The above code pulls the images one on on top of each other, you can see all the images but places the first one , next line the next one, ,etc. I wish I had a way to display the images side by side , horizontally not vertically. I tried assigning coordinated to the image pieces but that always display the pulls image in that exact spot not next to each other.

Maybe if I explain what i am trying to do and why it makes more sense.

We sell bath and body and cosmetics products. Some products we sell are vegan friendly , some are alcohol free, some are SOY free, etc and I have an icon for each of these things the product has or does not have. 15 icons in all . So I put all 15 icons in one image and used sprites to pull the appropriate icons for any particular product. Now if the product is soy free and Alcohol free, I want to pull just those two icons next to each other horizontally not vertically. If I specify an exact position to display the icons they will end up horizontally but not next to each other . They will end up with gaps where the other icons belong that i did not call for.

I tried messing with the padding margin and position and none seem to do what i need.

help anyone

Bill
Go to Top of Page

billcat99
Starting Member

USA
23 Posts
Posted - October 21 2014 :  19:12:14  Show Profile  Visit billcat99's Homepage  Reply with Quote
ISSUE SOLVED !

I basically changed
display: block; to display: inline-block;
this displayed the icons horizontally side to side

and
margin: 0px; to margin: 15px;
this gave it a 15px gap between images

The final code is below and sample of page is here http://www.essentialsbycatalina.com/shopcontent.asp?type=sprites


CODE: FOR CSS FILE
#prod_ico {

}

#prod_ico li {
margin: 15px;
padding: 0px;
list-style: none;
position: left;
top: 0;

}

#prod_ico li, #prod_ico a {
height: 75px;
display: inline-block;

}


#glut {
width: 80px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px 0px;
}
#soy {
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -85px;
}

#formal {
width: 80px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -170px;
}
#hypo {
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -255px;
}
#alco {
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -340px;
}
#sulfate {
width: 80px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -425px;
}
#paraben {
width: 80px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -510px;
}
#gmo {
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -595px;
}
#vegan {
width: 75px;
background: url(''/TEMPLATES/DEFAULT-3COLS/IMAGES/SPRITE_PROD_ICO.PNG'') 0px -680px;
}


CODE TO PULL ICONS FROM TEMPLATE OR PAGE MANAGER:

<ul id="prod_ico">
<li id="soy"></li>
<li id="vegan"></li>
<li id="glut"></li>
<li id="hypo"></li>
<li id="paraben"></li>
<li id="sulfate"></li>
<li id="gmo"></li>
<li id="formal"></li>
</ul>


THANKS
Bill V
Go to Top of Page

diegomilito
VP-CART Expert

Argentina
779 Posts
Posted - October 25 2014 :  00:48:22  Show Profile  Reply with Quote
interesting to try out. i will later when found time.
diego.
Go to Top of Page

manilow
VP-CART New User

France
134 Posts
Posted - October 25 2014 :  05:57:11  Show Profile  Visit manilow's Homepage  Reply with Quote
Hi Bill,

I''m glad to see you managed to make it work. Great job !

I visited your web site and noticed the vertical category menu with flyout windows. How do you generate such flyout windows (like Wholesale Bulk Bases)?

Thanks in advance for your help.

Kind regards,

Erik
www.aquathermia.com
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Snitz Forums 2000
0 Item(s)
$0.00
  • Your Cart Is Empty