Jump to content

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

How to change basket icon Rate Topic   * * * * * 1 votes

 
  • IdeaDirect
  • Junior Member
  • Members
  • Join Date: 27-Jul 07
  • 53 posts

Posted 24 August 2013 - 10:58 PM #1

I have 4.01 Ultimate and the icon for the cart is now the cs-cart logo. I would like to change this to a more traditional basket icon similar to the old versions of cs-cart. (black/white empty cart. color icon with cart contents).
I can't figure out how to do this... Should just be able to replace an empty cart icon and full cart icon somewhere.
Can't seem to find an image to replace or CSS to change.

Any ideas?

 
  • johnbol1
  • Never Re
  • Members
  • Join Date: 23-Feb 10
  • 4695 posts

Posted 25 August 2013 - 08:00 AM #2

Found this using Firebug or google elements inspect

[font=Consolas,]



[color=#888888][color=#222222].cart-icon.filled[/color][/color] {[list]
[*][color=#C80000]background-position[/color]: 0 -40px;
[/list]
}[/font][font=Consolas,]





[color=#888888][color=#222222].cart-icon[/color][/color] {[list]
[*][color=#C80000]float[/color]: left;
[*][color=#C80000]display[/color]: inline-block;
[*][color=#C80000]width[/color]: 30px;
[*][color=#C80000]height[/color]: 15px;
[*][color=#C80000]background[/color]: url([url="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAA3CAYAAAAIRLqoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzFDQzQ5RUE3QTNGMTFFMUIwNjVEMDI0MDMxRUM4MzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEUxRTJEMEU3QTQ2MTFFMUIwNjVEMDI0MDMxRUM4MzkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MUNDNDlFODdBM0YxMUUxQjA2NUQwMjQwMzFFQzgzOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3MUNDNDlFOTdBM0YxMUUxQjA2NUQwMjQwMzFFQzgzOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlvfT4gAAAMZSURBVHja7Jc9SFtRFMdvXiSYJpIMSiUlkogxSDpEqBGHtgRBUWNiB8maL3ARGirU2EFs0UqXOgSXirqVQgeT2C4tuHRqOnQoChmSFmqpEMjg0KIS7P88fY+X5CUksW7vwOE97nn3d88994P3VwUCATVj7DdcC38Ffwwvsjpte3tbtl11fn6uwfMwn8/rVldX/xwfHy95PJ71esFTU1Py4J2dHaZSqZjP57Om0+m9ra0to9VqNdvtdifi7+AG1ph9y2QydziCkiWTye8ul2u2s7PzRi6XCwJsR8xA8XqdrK2tzTY/P884MfWLwPuxsbEfarV6CVnvt7e3s0bA5A6H4xCcU04C5W1wcPBRR0eHPhqNDnR3d38tqVuNTMnMZjPDjGfonZN2TKVSfNbj4+M/KWuDwfCWsuY4jvdqYIppNBrW29ubQP+9CjDZ7u4unzWA+rm5uYLFYjmgjhioqlO8p6fnVK/XzwocHowtV85PjY6OUtbPTSaTo6+vj2m1WtlsKVMMzlC2p+j3SyxbIpEQ6+f1eqXwB4uLi2+wv1+ura0VWltbH6Ltlsz2KsBfw6PSgyXuYzn40dHRfjwe1wPeVbZ7mHSml8+RjY2NjyVg6Yrz9eEuSo8TeA+PZ/D7dRyMGPyFCMZdweS2VNn7J/hfvI+U05DtB7pnkO1daXuL3NA0NQIKU8WK36b6ZbPZim8R6z87O6vgtNSCCs9YLPaFwJFIRJyJMCiO7+fLm7HidmPXYQpYAStgBayAFbACVsD/DXydOo8HS3VesVhcvzJY+NvEB6LOOzk5uYkmV7M6D94vapBgMCjqPPz+z0xOTtqbgDJICxvNokTnhUIhUee53e590h6NCsjp6WnSecWqOm9hYWFgeHi4IZ03NDTEnE7njKwco6wFnWez2WLQbhWAioVCDOKH9Et1nUcfCToPP9VWlORAEInVnOITExOnWJ/aOi8cDos6D9r4id/vZ0ajUTZbnU7HUDKG70t1nrDdpIKGbHNz82o6T6qayhXT8vJy0zqvprhBzTwrKyt0tLqauSsUncfbPwEGAHSVmWVdmBjrAAAAAElFTkSuQmCC"]data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAA3CAYAAAAIRLqoAAAAGXRFW…o6T6qayhXT8vJy0zqvprhBzTwrKyt0tLqauSsUncfbPwEGAHSVmWVdmBjrAAAAAElFTkSuQmCC[/url]) 0 0 no-repeat;
[/list]
}[/font]

Custom printed hi visibility clothing sale the UK's online hivis safety shop
v4.5.2


 
  • NairdaCart
  • Senior Member
  • Members
  • Join Date: 18-Jul 11
  • 306 posts

Posted 25 August 2013 - 07:40 PM #3

The icons are part of a custom fonts file now rather than graphics. You need to create a my_changes style for the relevant style in the /design/themes/basic/css/glyphs.css file.

 
  • IdeaDirect
  • Junior Member
  • Members
  • Join Date: 27-Jul 07
  • 53 posts

Posted 26 August 2013 - 08:22 PM #4

The icons are part of a custom fonts file now rather than graphics. You need to create a my_changes style for the relevant style in the /design/themes/basic/css/glyphs.css file.


This is very helpful. I saw that I could color it via css so this makes sense.
However, can you elaborate on how to create a my_changes style? This is new to me. Basically, I would like to reference two images, 1 for empty cart and 1 for full cart.
Not crazy that a paid version of a cart has so many tiny elements referencing the cart (i.e. favicon, copyright, etc.). Not a big deal to change overall.

 
  • NairdaCart
  • Senior Member
  • Members
  • Join Date: 18-Jul 11
  • 306 posts

Posted 27 August 2013 - 07:55 AM #5

This article explains how to set up the my_changes - http://docs.cs-cart.com/my-changes

I only have one image on mine rather than two but I used this code in my custom less file:

.icon-basket {
  background: url(../media/images/basket.png) no-repeat;
  width: 36px;
  height: 24px;
}

There were a few other style changes to adjust heights on other elements etc as the icon I'm using is much bigger than standard and I have my basket as part of the top row but that bit of code is the basic bit to put your own icon in.

 
  • IdeaDirect
  • Junior Member
  • Members
  • Join Date: 27-Jul 07
  • 53 posts

Posted 27 August 2013 - 01:14 PM #6

Thank you NairdaCart. Nice of you to go out of your way to help someone out. I glanced at the article and think I understand and can figure it out. I'll work on it this weekend.

Weird that they would use a logo instead of a general cart icon. I know it is a tiny detail but a good site is basically the sum of a bunch of tiny details.

 
  • IdeaDirect
  • Junior Member
  • Members
  • Join Date: 27-Jul 07
  • 53 posts

Posted 27 August 2013 - 08:15 PM #7

Still can't quite figure this thing out... I made sure to active my_changes
and followed the instructions to add the correct directory and styles.post.tpl file.

I'm using version 4 so I made a styles.less sheet located at:
design/themes/basic/css/addons/my_changes/styles.less

I combed through stylesheets and think the correct classes are:
.icon-basket.empty
.icon-basket.filled

So in my styles.less file, I have
.icon-basket.empty {
  background: url(../media/images/basket.png) no-repeat;
  width: 36px;
  height: 24px;
}

I'm expecting the cart to have a broken image link (since I didn't upload an image). But it still shows the gray font logo for CS-cart.

 
  • NairdaCart
  • Senior Member
  • Members
  • Join Date: 18-Jul 11
  • 306 posts

Posted 28 August 2013 - 08:14 AM #8

There are some issues with the order in which the CSS sheets are loaded. Try putting !important on the end of the background tag.

If that doesn't work then you might have to remove the corresponding lines from the glyphs.css file.

I'm assuming you've rebuilt the CSS cache with the Rebuild Cache Automatically toggle in Design/Template Editor? That seems to be the only reliable way to get the changes picked up. The usual ?CC method doesn't seem to affect the CSS files always.

 
  • NairdaCart
  • Senior Member
  • Members
  • Join Date: 18-Jul 11
  • 306 posts

Posted 01 November 2013 - 09:35 AM #9

I posted the replies above before the documentation for the v4 version of my_changes was documented. If you create a custom less file rather than css then you don't need the !important tag and it works fine.

The rule of thumb I've been using is to put any styles that don't already exist in CS-Cart into a my_changes CSS file and modified rules into a my_changes LESS file.

 
  • fishtail
  • Member
  • Members
  • Join Date: 11-Jan 10
  • 123 posts

Posted 16 January 2014 - 08:41 AM #10

Still can't quite figure this thing out... I made sure to active my_changes and followed the instructions to add the correct directory and styles.post.tpl file. I'm using version 4 so I made a styles.less sheet located at: design/themes/basic/css/addons/my_changes/styles.less I combed through stylesheets and think the correct classes are: .icon-basket.empty .icon-basket.filled So in my styles.less file, I have

.icon-basket.empty { background: url(../media/images/basket.png) no-repeat; width: 36px; height: 24px; }
I'm expecting the cart to have a broken image link (since I didn't upload an image). But it still shows the gray font logo for CS-cart.


Hi. Did you ever figure this out? I added the .icon-basket code to my style.less file in my changes and it does add my new "icon.png", but it also shows the other cs-cart icon. It just shifts it to the right over top the the words "Cart is empty", so it looks really ugly.

I have no idea where this cs-cart icon is located. Makes no sense.

 
  • NairdaCart
  • Senior Member
  • Members
  • Join Date: 18-Jul 11
  • 306 posts

Posted 16 January 2014 - 09:43 AM #11

You don't need the my_changes anymore to do this. Just add the CSS to the theme using the theme editor.

The icons come from the glyphs. Look in the relevant CSS file if you want to see how it works.

 
  • fishtail
  • Member
  • Members
  • Join Date: 11-Jan 10
  • 123 posts

Posted 16 January 2014 - 06:58 PM #12

You don't need the my_changes anymore to do this. Just add the CSS to the theme using the theme editor. The icons come from the glyphs. Look in the relevant CSS file if you want to see how it works.


Thanks for the reply after so many months.

I really don't know where to look for the css code for the "cs-cart basket image". There's nothing in "glyphs.css that I really understand. The only line I could find that would indicate the graphic used for this is this:
.icon-basket:before {
    content: "\e044";
}
But I don't know where this points to and what the code means in "content".

I also tried changing the class name in "basic / templates / blocks / cart_content.tpl" to match my own custom one in the style.less file, and their icon still shows up.

I find it strange that cs-cart would make it so difficult to change this icon.

 
  • NairdaCart
  • Senior Member
  • Members
  • Join Date: 18-Jul 11
  • 306 posts

Posted 16 January 2014 - 08:22 PM #13

That's the correct line for the reference to the glyph in the fonts file referenced in the CSS. Content is a standard CSS property used to insert generated content where the class is used.

If you want to replace it glyph for glyph then you will need to create a new font or insert a new glyph into the existing one.

Another way is to replace it with a standard image as outlined earlier in this thread. As with most things there are several different ways of doing it.

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1449 posts

Posted 17 March 2014 - 08:12 PM #14

Hi Guys

I have just tried to change the basket Icon. (like in the post http://forum.cs-cart...__fromsearch__1)

So I went to icomoon.com imported the glyph.svg from cs-cart 4.03 and changed only the icon-basket, leavin all the same (also the encoding for icon-basket)

So I then uploaded the files that icomoon creates, all other icons are ok only icon-basket is now a box with the encoding inside.

So no Icon there.

Tried also to import a second glyph set with a custom name (I also imported the line in styles.post.tpl and the css file for that in the css folder) . All new icons worked fine, but this time I lost most of the glyph icons (not all of them!!) again I see many boxes with the encoding inside

I have no more ideas how this should work.

Any fresh ones will be appreciated

Thanks

Fotis

PS I used both versions of icomoon (old and new) as it was stated that the new version has some issues. Same results in both cases.
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • brandonvd
  • is Super Awesome
  • Members
  • Join Date: 19-Dec 06
  • 2633 posts

Posted 18 March 2014 - 05:24 AM #15

I personally don't fully understand the whole glyph thing and get annoyed with it, so I just changed it all together for the icon. I just use:

.icon-basket:before {
  background: url("images/cart-icon.png") no-repeat scroll left center rgba(0, 0, 0, 0);
  content: "";
  display: block;
  height: 22px;
  width: 27px;
}

Pretty nitty gritty simple, but it does the job.

I hope it helps.

Brandon

 
  • RAVINDRAN
  • Advanced Member
  • Members
  • Join Date: 31-Mar 14
  • 85 posts

Posted 01 April 2014 - 02:57 PM #16

I personally don't fully understand the whole glyph thing and get annoyed with it, so I just changed it all together for the icon. I just use:

.icon-basket:before {
  background: url("images/cart-icon.png") no-repeat scroll left center rgba(0, 0, 0, 0);
  content: "";
  display: block;
  height: 22px;
  width: 27px;
}

Pretty nitty gritty simple, but it does the job.

I hope it helps.

Brandon

Thank you Barndonvd for the help. I just used it on the Theme editor CSS. uploaded the icon PNG file to the specified location and it worked perfectly.

 
  • RAVINDRAN
  • Advanced Member
  • Members
  • Join Date: 31-Mar 14
  • 85 posts

Posted 01 April 2014 - 04:16 PM #17

It works fine but only in Google chrome and Firefox shows the changes and
IE remains the same old view

Take a look. www.shishastar.ch

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

Posted 02 April 2014 - 09:38 AM #18

@RAVINDRAN,

Did you clear the browser cache? It shows new icon to us.
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)

 
  • kmsdove
  • Newbie
  • Members
  • Join Date: 19-Nov 13
  • 7 posts

Posted 02 April 2014 - 02:26 PM #19

Think of the glyphs as 'wingding fonts', for example. For most of my images, or icons, I use the <i> tag that corresponds to a particular font, which is basically an icon. You can google bootstrap fontawesomeness to get a better explanation using i tags.

 
  • florinsurdu
  • Advanced Member
  • Trial users
  • Join Date: 31-Mar 14
  • 51 posts

Posted 03 April 2014 - 08:14 AM #20

hey, i used :
.top-cart-content .icon-basket{ background:url("images/addons/my_changes/cart-icon.png"); width:15px; height:13px; display:block; margin-top:2px }
.top-cart-content .icon-basket:before{ content:''; }
And it work`s fine, in IE,Chrome, and Firefox, i haven`t have problems.