Implementing sprite images

Developers Frontend
1

Dear developers, members… anyone

I have tried to implement a sprite image to show visitors of our shop what kind of payment options we offer. Those images suppose to be show in a .

I created a block via the template engine in the store which is placed in
…/design/themes/abt__unitheme2/templates/blocks/static_templates

the static template I called : custom_payment_icons.tpl

the code inside:

{** block-description:custom_payment_icons **}

 {hook name="index:custom_payment_icons"}

<div class='sprite bg-10_idealbetalen100x100'></div>
<div class='sprite bg-15_billink100x100'></div>
<div class='sprite bg-14_bancontact100x100'></div>
<div class='sprite bg-12_sofort100x100'></div>
<div class='sprite bg-11_paypal100x100'></div>
<div class='sprite bg-13_tikkie100x100'></div>
{/hook}

the sprite image is placed
…/design/themes/abt__unitheme2/media/images/icons

and finally I amended the active theme css file
with the following addtional code

/* 
custom payment icons footer
*/

.sprite { background-image: url('design/themes/abt__unitheme2/media/images/icons/pasio-payment-icons.png') no-repeat top left; width: 675px; height: 100px; display: inline-block;margin-left: 5px; }
.bg-10_idealbetalen100x100 {
    width: 100px; height: 100px;
    background-position: -20px -100px;
}
.bg-15_billink100x100 {
    width: 100px; height: 100px;
    background-position: -293px -5px;
}
.bg-14_bancontact100x100 {
    width: 100px; height: 100px;
    background-position: -293px -119px;
}
.bg-12_sofort100x100 {
    width: 100px; height: 100px;
    background-position: -21px -10px;
}
.bg-11_paypal100x100 {
    width: 100px; height: 100px;
    background-position: -151px -119px;
}
.bg-13_tikkie100x100 {
    width: 100px; height: 100px;
    background-position: -156px -25px;
}

Now the sprite image is NOT shown, I not sure why. Can anyone see here what I did wrong of perhaps forgot?

2

Hello!

The path in the url() has to be relative and it should be relative from the theme’s folder and without quotes. I.e. instead of:

url('design/themes/abt__unitheme2/media/images/icons/pasio-payment-icons.png')

it should be:

url(../media/images/icons/pasio-payment-icons.png)

I hope it will help you.

3

Thank you for the input but the sprite image simply does not appear in the browser at the footer where I place that block in the layout.

4

I amended the code by the way you suggested but somehow without the desired result

5

Sorry, it seems like I’ve misled you.

The url should be relative against the place where the used LESS file is located. It should move up through the folders to the root folder of your installation, and from there - point to the location of the image.

For example, I have image located at the following path (relative from the root folder of the installation):
design/backend/media/images/csse_bg.png

In my LESS file located by the following path:
design/themes/responsive/css/addons/my_changes/styles.less
I need to specify the url in the following way:

.ty-product-block__left{
  background-image: url(../../media/images/csse_bg.png);
}

So it goes up by two folders, from my_changes folder here: design/themes/responsive/css/addons/ to design/themes/responsive/ folder, and then descend to media/images/csse_bg.png.

I hope it will help you.

6

Sorry to quote a certain… dude
“This is getting way above my pay grade”.

I remember asking help with this before and eCom Labs kept referring this

think, it is a most frequently asked question. So let me answer here for everyone.

The tutorial is actual for CS-Cart and Multi-Vendor 4.x

  1. Make sure that the status of the My changes add-on is Active (Add-ons → Manage Add-ons )

  2. Create the design/themes/[your theme]/templates/addons/my_changes/hooks/index/styles.post.tpl file with the following content

{style src="addons/my_changes/styles.less"}

  1. Create the design/themes/[your_theme]/css/addons/my_changes/styles.less
  2. Add your CSS rules to this file
  3. Clear the cache (Administration > Storage > Clear cache)
  4. Check the result

Well I am lost right now, I simply do not get how it is done correctly

7

This Instruction looks correct. However this instruction describes how to make changes in general.

In my previous message I have provided example with changes that you need to make in particular (the third step of the mentioned general instruction).