This question in some form or another has popped up before but It still puzzles me.
Let me tell you what I have done sofar.
Step 1. I created a new sprite image from which to draw the icons for the static template block
payment_icons.override.tpl file
I plan to drop that into the design/themes/responsive/templates/addons/my_changes/hooks/index
location
Step 2. created the sprite image below
[attachment=14410:css_sprites.png]
and upload that file to
/design/themes/responsive/media/images
Step 3. created the CSS code
.bg-14_bancontact100x100 {
width: 100px; height: 100px;
background: url('css_sprites.png') -10px -10px;
}
.bg-10_idealbetalen100x100 {
width: 100px; height: 100px;
background: url(‘css_sprites.png’) -130px -10px;
}
.bg-13_tikkie100x100 {
width: 100px; height: 100px;
background: url(‘css_sprites.png’) -10px -130px;
}
.bg-12_sofort100x100 {
width: 100px; height: 100px;
background: url(‘css_sprites.png’) -130px -130px;
}
.bg-15_billink100x100 {
width: 100px; height: 100px;
background: url(‘css_sprites.png’) -250px -10px;
}
.bg-11_paypal100x100 {
width: 100px; height: 100px;
background: url(‘css_sprites.png’) -250px -130px;
}
and then I lost, I remember from my previous post on this topic in 2015 I need to create my own CSS classes from which I presume that piece of code goes into the payment_icons.override.tpl file.
But what is needed for that code, in other words what should the coding of this new payment_icons.override.tpl file look like?
Is it something like this
{** block-description:tmpl_payment_icons **}
{hook name="index:payment_icons"}
{/hook}
Or something else ?
A bit in direstraites on this topic.