Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Creating The .tpl For The New Sprite Based Payment Icons Rate Topic   - - - - -

 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 999 posts

Posted 01 June 2020 - 05:01 PM #1

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
 

 

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 **}
<div class="my-payment-icons">
    {hook name="index:payment_icons"}
    <span class="my-payment-icons__item bg-14_bancontact100x100">&nbsp;</span>
    <span class="my-payment-icons__item bg-10_idealbetalen100x100">&nbsp;</span>
    <span class="my-payment-icons__item bg-13_tikkie100x100">&nbsp;</span>
    <span class="my-payment-icons__item bg-12_sofort100x100">&nbsp;</span>
    <span class="my-payment-icons__item bg-15_billink100x100">&nbsp;</span>
    <span class="my-payment-icons__item bg-11_paypal100x100">&nbsp;</span>

    {/hook}
</div>

Or something else ?

 

A bit in direstraites on this topic.

 

 

 


running CS Cart V4.10.3.SP1 


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20675 posts

Posted 02 June 2020 - 05:26 AM #2

You should create new file with styles and include it. See more details here

 

https://forum.cs-car...-changes-addon/


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)