How to change basket icon

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?

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]

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.

[quote name='NairdaCart' timestamp='1377459653' post='167343']

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.

[/quote]



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.

This article explains how to set up the my_changes - [url=“http://docs.cs-cart.com/my-changes”]http://docs.cs-cart.com/my-changes[/url]



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.

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.

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.

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.

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.

[quote name='IdeaDirect' timestamp='1377634514' post='167442'] 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. [/quote]



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.

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.

[quote name='NairdaCart' timestamp='1389865413' post='175299'] 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. [/quote]



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.

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.

Hi Guys



I have just tried to change the basket Icon. (like in the post Glyphs - How to change? - Store Design & Templates - CS-Cart Community Forums)



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.

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

[quote name='brandonvd' timestamp='1395120252' post='179452']

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

[/quote]

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.

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

@RAVINDRAN,



Did you clear the browser cache? It shows new icon to us.

Think of the glyphs as 'wingding fonts', for example. For most of my images, or icons, I use the 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.

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 works fine, in IE,Chrome, and Firefox, i havent have problems.