Payment System Icons In Footer

Store Builder Questions
1

I’m currently using the basic theme for cs-cart. I’m trying to add american express and discover to the footer and removed 2checkout and google.



I noticed the background image payments@2x.png already has american express and discover cards so I went to the css and tpl files…



I edited the following files:



templates / blocks / static_templates / payment_icons.tpl

and

design/themes/basic/css/base.css



I have two 2CO images loading… What is going on and how do I fix this?


<br />
{** block-description:tmpl_payment_icons **}<br />
<div class="payment-icons"><br />
    <span class="payment-icon visa">&nbsp;</span><br />
    <span class="payment-icon mastercard">&nbsp;</span><br />
    <span class="payment-icon american-express">&nbsp;</span><br />
    <span class="payment-icon discover">&nbsp;</span><br />
    <span class="payment-icon paypal">&nbsp;</span><br />
</div><br />
<br />
}<br />
.payment-icon.2checkout {<br />
				   background-position: 0px 0px;<br />
}<br />
.payment-icon.google-checkout {<br />
    background-position: -100px 0px;<br />
}<br />
.payment-icon.mastercard, .cc-icon .mastercard {<br />
    background-position: 0px -100px;<br />
}<br />
.payment-icon.paypal {<br />
    background-position: -100px -100px;<br />
}<br />
.payment-icon.visa, .cc-icon .visa {<br />
    background-position: -200px 0px;<br />
}<br />
.cc-icon .visa-electron {<br />
    background-position: -200px -100px;<br />
}<br />
.cc-icon .maestro {<br />
    background-position: 0 -200px;<br />
}<br />
.payment-icon.american-express, .cc-icon .american-express {<br />
    background-position: -100px -200px;<br />
}<br />
.payment-icon.discover, .cc-icon .discover {<br />
    background-position: -200px -200px;<br />
}<br />

```<p><a href="127.0.0.1/uploads/monthly_01_2014/post-13609-0-20414100-1391195660.png">Screen Shot 2014-01-31 at 2.13.22 PM.png</a></p><p><a href="127.0.0.1/uploads/monthly_01_2014/post-13609-0-67477300-1391195676.png">Screen Shot 2014-01-31 at 2.13.44 PM.png</a></p>
2

If you have Photoshop or a similar program, you can just edit the png-file in the icons-folder. Place the icons you want on top of the google and 2checkout-icons and you are done.

3

That just doesn't make since at all when there are already icons for master card and american express. Someone has to know the correct way to do this

4

Well it might not make sense, but it works.

5

For whatever reason CS does not seem to make this an easy thing to edit…at least not that I have figured out yet. I ended up just creating a new block as I believe that CS-Cart said in some post that their “payment icon” block is generic and was a static page or something. So from what I understand you can edit the image like was suggested above or you can create a new smarty html block and put the code there. I am a TOTAL rookie but here is what I put in so far…


```php













```

The only bad part so far is I have not been able to figure out how to get the icons to set next to each other. When I remove the

the icons all end up overlapping each other. They all actually end up pulling from one image to be displayed. Someone else would probably be able to better describe this and would probably also know how to show these all right next to each other. Don't forget you may have to clear your cache. When I first did this it showed the 2CO on the Discover and American Express. After I cleared the cache it showed everything for me.

I did run into issues if I put this in the same grid at any place than the far right. If I moved it any place to the left of another grid various images from the payments.png start shoing all over the bottom of the page.

To edit the image you can find it in the following folder...
/design/themes/basic/media/images/icons/payments.png

With all that, I may be approaching this the totally wrong way. This is just what I have done so far.

Again, in my mind this is such a simple thing that CS should have completed some time ago but they have the same basic thing that they has in CS3.

6

The simplest way is just to add the following lines to the custom CSS area on your theme. You shouldn't really be editing the base.css file directly as that's going to cause you issues with upgrades:



.payment-icon.google-checkout {
background-position: -100px -200px;
}
.payment-icon.mastercard {
background-position: -200px -200px;
}




That will do what you want. You could go down the route of editing the TPL (as you did, again you shouldn't really edit those files directly) to make the names correct but it's not really needed.



Make sure to clear the cache. Ideally when developing you should have the auto rebuild turned on. It makes things a great deal easier.



Using image sprites this way is a standard technique and nearly all modern web sites work this way.