Newbie (to CS Cart) needs help with CSS customization

General General Questions
1

Greetings all,



I have suddenly been designated the task of altering the appearance of a customer's CS Cart installation, despite having no experience with the platform. I'm an experienced web designer and know my way around CSS and PHP, so I don't need any help with the code - I just need to know where to put it.



I simply want to override the CSS - I'm not looking to alter any functionality of the basic skin. I thought I found my answer on the following page:



http://docs.cs-cart.com/my-changes



But uploading a CSS file to this location has absolutely no effect. I'm clearly not understanding how CSS changes are meant to be applied - can somebody give me a bit of guidance here? My eternal thanks in advance.

2

Hello ccarrot,



Thank you for your message.



You can find detailed instructions on how to use your own .css file via the My changes add-on in our Knowledge base article:



http://kb.cs-cart.co…ment-font-color



Please check it. Should you need any further information, please do not hesitate to post your questions here, in this topic.



Thank you.



—

Pavel Zyukin

CS-Cart Support team

3

Thanks Pavel. However, this still doesn’t help, because the folder:



skins/[CUSTOMER_ACTIVE_SKIN]/customer/addons/my_changes/hooks/index



…does not exist in my installation. Is this because I am using the default (“basic”) skin?



If so, then I need to know how to create a new skin - even if it is a clone of the basic one. When I go to Design > Skin Selector, I get a message that says:



“Cart is in development mode now and skin selector is unavailable”



Thanks - I think there’s just some simple configuration issue I’m missing here and once I find it, I’ll be on my way. :)

4

Try this out:

5

Hello ccarrot,



Thank you for your message.



The skins/[CUSTOMER_ACTIVE_SKIN]/customer/addons/my_changes/hooks/index directory does not exist in the standard CS-Cart installation by default. So you should create this directories path manually.



As regards the Cart is in development mode now and skin selector is unavailable message, I suggest that you should click on the Live Mode link on the right at the bottom in your CS-Cart panel. After this the issue should be resolved. Please check it.



Thank you.



—

Pavel Zyukin

CS-Cart Support team

6

Still not able to make a single CSS change in the cart. I've done EVERYTHING on this page:



http://kb.cs-cart.co…ment-font-color



…and it has absolutely no effect on the cart. To be specific, here are the steps I have taken:


  1. I created the following directory: /skins/basic/customer/addons/my_changes/hooks/index
  2. I created the following file: /skins/basic/customer/addons/my_changes/hooks/index/styles.post.tpl
  3. I pasted the follwing text into that file:
  4. I created the followinf styles file: /skins/basic/customer/addons/my_changes/styles.css
  5. And I'm simply trying to get ANYTHING to work. Currently, I'm just trying to add a border and red background around one of the grids:



    div.grid_16 {

    border:5px solid #F00;

    background:#F00;}



    What am I missing?
7

Are you using the custom “div” CSS within the “grid_16” class in your templates? If not, nothing will show up.



If it's still unexpected, as CSS is rendered bottom-up, so if an instance occurs twice, the latter will override the first declaration - apply the !important declaration to your style to override the latter. ie:


div.grid_16 {
border:5px solid #F00 !important;
background:#F00 !important;}

8

In answer to your question, yes, the div exists. It's in the source, and I can highlight it with Firebug in Firefox. But I can't even get basic attributes like the tag to change. And according to Firebug, my custom CSS file is not even being loaded, let alone being overriden (which shouldn't be the case anyway, since the point of the “My_Changes” directory was to override the default).



The larger question I'm having here is HOW DO PEOPLE ALTER THE APPEARANCE OF THESE CARTS? I've never worked in a platform that didn't allow basic CSS tweaks, and I can't seem to make them happen here. None of the instruction pages I've linked to in the thread have had the least effect. This cart was handed to me still in development mode - is there something about this that prevents user changes from being accepted?



The only thing I can think of at this point is to start modify the core “basic” skin files, but that is bad practice… I want to separate my changes from the core.

9

You can make changes to the styles.css and base.css in; skins/your_skin/customer - this shouldnt impact any upgrades as you are not messing with core php files.

10

OK, I think I've found my problem. The template cache needs to be cleared before any of these changes will appear:



[url=“CS-Cart Documentation — CS-Cart 4.15.x documentation”]CS-Cart Documentation — CS-Cart 4.15.x documentation



That seems to have done the trick. Some constructive criticism for the developers of CS Cart: PLEASE put a note to this effect on the pages where you detail adding CSS to the “My_Changes” folder. I'm submitting feedback on that page right now.

11

Hint: While working on your site put the cart in Development Mode versus Live Mode. Then you will not have to keep clearing the cache while changing your files.



It is in the bottom right corner of Admin. Note, it will say the opposite of what mode you are in. If it says Development mode in the link you are in Live Mode and vice versus.

12

That's extremely useful to know… thanks!