Jump to content

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

Payment Icons? Rate Topic   - - - - -

 
  • drillsar
  • Junior Member
  • Members
  • Join Date: 10-Feb 11
  • 77 posts

Posted 14 December 2017 - 12:27 AM #1

I am trying to add payment icons to the footer. I understand have to edit payment_icons.tpl and the styles.less. What I don't understand how do you know position of an image. How do you make another payments.png? Thanks



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 16,123 posts

Posted 14 December 2017 - 05:47 AM #2

Why you cannot just create HTML block with your own images?


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration

Certified CS-Cart RU Developer | Сертифицированный разработчик на CS-Cart Русская Версия

 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3,022 posts

Posted 14 December 2017 - 06:23 AM #3

He wants to learn to do sprites ;)

 

Why you cannot just create HTML block with your own images?


4.5.2 SP2


 
  • Flow
  • Super Duper and Amazingly Sexy Senior
  • Members
  • Join Date: 13-Oct 10
  • 2,000 posts

Posted 14 December 2017 - 07:02 AM #4

For newcomers I understand this can be confusing. But yeah, just create an html block and put a nice image in it. 

Or make a banner with payment icons and add a banner block filled with that banner.


When life hands you lemons, bring on the Tequila baby!


 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3,022 posts

Posted 14 December 2017 - 07:59 AM #5

Ur use payment font

https://paymentfont.com/#icons

 

or SVG vertors

 

 

gt metrics, google page speed are giving F now for poor image optimization


4.5.2 SP2


 

Posted 18 December 2017 - 11:41 AM #6

You can create an HTML block with content like the following:

 

<div class="my-payment-icons">

<img src="path-to-your-icons/icon1.svg">

<img src="path-to-your-icons/icon2.svg">

<img src="path-to-your-icons/icon3.svg">

</div>

 

And then add to your custom css style the following:

 

.my-payment-icons img {
    width: 36px;
    height: 36px;
    display: inline-block;
}

 

You can replace the width and height values to whatever size you wish.

A good source for svg images is flaticon. Just google it and it will come up.