Jump to content

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

My Account and My Cart Icons CS-Cart V4 Rate Topic   - - - - -

 
  • hivecenter
  • Member
  • Members
  • Join Date: 20-Aug 12
  • 25 posts

Posted 23 July 2013 - 04:35 AM #1

There again know where to find these files in version 3 of cs-cart and have not figured out where they are in V4. I want to change the images that it's using to something else. For those that don't know the icons i'm talking about it's these 2.
Posted Image

Thanks

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

Posted 23 July 2013 - 08:06 AM #2

They're now done as glyphs (custom characters in a font file) look at the glyphs.css file.

It's reasonably easy to override them with "normal" graphics in a my_changes css file.

 
  • hivecenter
  • Member
  • Members
  • Join Date: 20-Aug 12
  • 25 posts

Posted 23 July 2013 - 02:07 PM #3

They're now done as glyphs (custom characters in a font file) look at the glyphs.css file.

It's reasonably easy to override them with "normal" graphics in a my_changes css file.


I'm not good with that kind of coding. Anyone else done this that would have that kind of change already implemented be able to share a file?

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

Posted 23 July 2013 - 07:56 PM #4

I already have but the code does depend on exactly what you're trying to achieve.

I have a custom icon for the basket. The code in my custom changes CSS file is:

.cm-popup-title .icon-basket {
  position:absolute;
  top:6px;
}
.icon-basket {
  background: url(../media/images/basket.png) no-repeat;
  width: 36px;
  height: 24px;
}


 
  • hivecenter
  • Member
  • Members
  • Join Date: 20-Aug 12
  • 25 posts

Posted 23 July 2013 - 11:33 PM #5

ok ya having a hard time with this... what i'm trying to do is get it like on v3 i had
This as My Cart Icons
Posted Image
and this as my Account icons.
Posted Image
They were really easy to change on V3. But i can't seem to get it to work on V4.
I've tried my luck with following this
http://docs.cs-cart.com/my-changes
to try to get it setup. But i have to be doing something wrong. i don't want to overwrite the whole script, i just want to overwrite those to icons. Everything else is fine. I had the search icon originally different to. but i'm only concerned with these other 2. Any help would be appreciated. I've been able to pretty much figure out everything else but this at this point.

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

Posted 24 July 2013 - 08:22 AM #6

They are a lot harder to change in V4 for sure.

I'm surprised there aren't more instructions on how to do it as I'm sure the way I've done it probably isn't the "correct" way but it works. I forgot to mention that I commented out the .icon-basket section in the glyphs.css file as well otherwise I got my icon and the original one as well. Nothing I set seemed to override it cleanly.

For the my_changes stuff you might want to read through these threads -

http://forum.cs-cart...w-to-change-css
http://forum.cs-cart...uilt-in-editor/

 
  • hivecenter
  • Member
  • Members
  • Join Date: 20-Aug 12
  • 25 posts

Posted 24 July 2013 - 05:11 PM #7

Ok this is what i have done following these orders..

1. Installed and Enabled My_Changes addon
2. Ok had to create these directories cause they were not created
design/themes/my_theme/css/addons/my_changes
design/themes/my_theme/templates/addons/my_changes/hooks/index
3. Made my styles.post.tpl and put it in the above index directory.
styles.post.tpl contains the following ----

{style src="addons/my_changes/mystyles.css"}

4. Created by mystyles.css file and it contains
.cm-popup-title .icon-basket {
position:absolute;
top:6px;
}
.icon-basket {
background: url(http://www.mydomain....cart_before.png) no-repeat;
width: 36px;
height: 24px;
}

5. I deleted the information from the glyphs file for the
Containing this info

.icon-basket:before {
content: "\e044";
}

5. i have turned on the Rebuild cache automatically option in the editor.

So with what you have done, what am i missing here?

Thanks sorry for hte trouble. I kinda liked the old setup

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

Posted 24 July 2013 - 06:52 PM #8

Check your url for the background image as the CSS merge process can change them. If you use the same format as I did it should work.

Also don't just copy the CSS I use it may well not work for you as my cart is in a different position to the base theme and my font sizes are much bigger etc.

You need to use it as a guide to changing what works for you. Use FireBug or similar to look at the CSS and experiment to see what gets you what you want.

 
  • hivecenter
  • Member
  • Members
  • Join Date: 20-Aug 12
  • 25 posts

Posted 25 July 2013 - 05:37 PM #9

Ok thanks NairdaCart you've been a big help, and actually the code you sent worked just had to tweak it once the image finally showed up. For some reason it wasn't there at one point and then all of a sudden just appeared out of no where. Once it showed up it was just adjusting it alittle at a time.

So this is what i've got now.
Posted Image

Ok now maybe you might know how to do this. On v3 you can have 2 different images, one as a black and white for not logged in and nothing in cart and then another for when it was logged in and stuff in the cart. Any idea how to do that on this version? I know in the glpys i see a before option but i have not seen a after option or a way to put a after option in the code.

 
  • Roto
  • Advanced Member
  • Banned
  • Join Date: 23-May 12
  • 127 posts

Posted 08 October 2013 - 03:44 PM #10

why is so difficult change a simple f****** icon agg :mad:
...

 
  • moving
  • Newbie
  • Members
  • Join Date: 25-Oct 13
  • 3 posts

Posted 25 October 2013 - 04:16 PM #11

There again know where to find these files in version 3 of cs-cart and have not figured out where they are in V4. I want to change the images that it's using to something else. For those that don't know the icons i'm talking about it's these 2.
Posted Image

Thanks


hi guys,

i hade the same problem with basket icon and finally i found the solution in 10 minutes without the "my changes" addon.. really simple..

1) create the new basket icon with size like 16px or max 20 px.
2) via ftp put the new icon in any directory you want, i decide to inlcude in directory like: media/images/my-basket-icon.png
3) by the admin panel go to design>models editor
4) select basic>css>glyphs.css
5) at raw 245 you find this code:

.icon-basket:before {
content: "\e044";
}

at raw 248 you find this code:

.icon-image:before {
content: "\e045";
}

6) change the raw 245 with this:

.icon-basket:before {
content: url(../media/images/my-basket-icon.png);
}

change the raw 248 with this:


.icon-basket:before {
background: url(../media/images/my-basket-icon.png);
}

7) Repeat this changment even at raw 497 and raw 500 (near the bottom of css file)

8 ) go to Storage>clear cache and click on to clear the cache.

9) open the front end in a new page.. it should work

This solution worked for stores that use only one basket icon.. let me know.

hope this thing helps.

Dino

 
  • makneto
  • Member
  • Members
  • Join Date: 29-Apr 15
  • 24 posts

Posted 08 May 2015 - 01:52 PM #12

Hi all,

I lost my custom cart icon after upgrading to 4.3.1 and cannot find the way to put it back.

Any ideas would be appreciated.

 
  • lzacharyjw
  • Newbie
  • Trial users
  • Join Date: 27-Sep 12
  • 4 posts

Posted 30 July 2018 - 07:04 PM #13

Makneto if they are anything like the older version go into your theme, Active Preset, and then go to Custom CSS in the dropdown menu 

 

.icon-basket - Default Basket Icon when Basket is Empty

.icon-basket.filled - Icon when Basket has items in it. 

.icon-user - Users Icon next to My Account 

 

Make sure  you go to the File Editor, CSS/glyphs.css and delete the 

.icon-basket

.icon-user   

from the glyphs.css file or you will have 2 icons showing. 

 

.icon-basket {
  background: url(../images/cart_before.png) no-repeat;
  ;
  margin-right: -4px;
  width: 36px;
  height: 24px;
}
.icon-basket.filled {
  background: url(../images/cart_after.png) no-repeat;
  ;
  margin-right: -4px;
  width: 36px;
  height: 24px;
}
.icon-user {
  background: url(../images/user.png) no-repeat;
  ;
  margin-right: -5px;
  width: 36px;
  height: 24px;
}