Order Of Css Files

Hi all,

We are currently facing a problem with our custom CSS. We used to save all custom CSS in the theme editor. In that situation, we found that our custom CSS was appended to the generated stylesheet.

As our amount of custom CSS is growing fastly, we now want to split it up into actual files, using the my_changes addon. However, we noticed that custom CSS that is added this way, is not appended to the generated stylesheet; it is prepended to it.

One way to solve this would be to add !important to every CSS rule. However, we would much rather have the custom CSS files appended to the generated stylesheet.

Does anyone else experience this problem, or even better, does anyone have a working solution for this problem?

Thanks in advance!

Try to use styles.less instead of the styles.css file in the My changes module

Thanks for your fast reply.

According to CS-Cart docs (CSS — CS-Cart 4.2.x documentation), custom .less files are also added before the preset .less file. This would still mean we have to use !important for every css rule we want to override.

Please check:

All the less files are included in the order as they are defined in the file: design/themes/basic/templates/common/styles.tpl
All the less files are included through hooks: post (that are added by an add-on).

It means that if you use the styles.post.tpl file and less file, it will be added after the main css and less files. Please try

And further note that the 'priority' set in the addon.xml file determines the order of addon css/less files as well. The higher the number, the later the loading. So since my_changes is max_int (32 bit), it should be loaded last UNLESS there is another addon with the same priority and it is named alphabetically greater (I.e. some_addon). Then it would be loaded after my_changes. Same applies for all hooks just in case you were wondering.

Thanks for both of your clarifications. eComLabs, you were right and now it works! Thanks.

Your are welcome!