Add Custom Css To Header

Hi,

I'm new on cs cart.

I'm using CS Cart 4.3.6.

I want to add custom CSS to my header & custom JS file to my footer.

I have activated my changes addon. Also I have created styles.post.tpl in /design/themes/my_theme/templates/addons/my_changes/hooks/index/.

The code in that file is given below.

{style src="addons/my_changes/custom.less"}

I have also added custom.less and styles.css in /design/themes/my_theme/css/addons/my_changes/.

The LESS file is compiled and now the rules on this files are available in front end.

But the styles.css is added as a new http request in my head and I need that nature. But the variable {$config.skin_path} is not working. So the path is broken.

So can any one please help me.

I want to add custom css on header and custom js on footer. I have searched too many tutorials and nothing works with my CS cart Version (4.3).

Thanks in advance.

Follow this path …


/Design/themes/[THEME NAME]/templates/index.tpl


Open this … here you will get hooks for header & footer … use these in your my changes addon.



I hope it will help … for more help Pm me

Please use:

Thanks eComLabs,

It works..

Where I can get such details. ? Totaly I'm new at here and I want to know more.

Hi all,

I need more help!

Same like adding custom css, I want to add custom JS file in my footer.

I have created scripts.post.tpl in my_project/design/themes/my_theme/templates/addons/my_changes/hooks/index/ and the content is shown below.

{script src="/js/addons/my_changes/myscript.carousel.min.js"}

Also I have inserted my JS file (myscript.carousel.min.js) at my_project/js/addons/my_changes/.

Now the page have an additional http request to /js/addons/my_changes/myscript.carousel.min.js. But It is a broken link because I have missed my project folder URL at the beginning of the link.

{script src="get_my_project_url/js/addons/my_changes/myscript.carousel.min.js"}

So how I get the project URL in CS Cart? Where I can find such details?

Thanks in advance!

Where I can get such details. ? Totaly I'm new at here and I want to know more.

It is our experience :)

Hi all,

I need more help!

Same like adding custom css, I want to add custom JS file in my footer.

I have created scripts.post.tpl in my_project/design/themes/my_theme/templates/addons/my_changes/hooks/index/ and the content is shown below.

{script src="/js/addons/my_changes/myscript.carousel.min.js"}

Also I have inserted my JS file (myscript.carousel.min.js) at my_project/js/addons/my_changes/.

Now the page have an additional http request to /js/addons/my_changes/myscript.carousel.min.js. But It is a broken link because I have missed my project folder URL at the beginning of the link.

{script src="get_my_project_url/js/addons/my_changes/myscript.carousel.min.js"}

So how I get the project URL in CS Cart? Where I can find such details?

Thanks in advance!

There is no need to specify project directory. The system will call scripts starting from root directory of your CS-Cart installation.

Please find instruction here:

http://forum.cs-cart.com/topic/37758-how-to-add-custom-javascript-with-my-changes-addon/

Please use:

is simpler. Put it in the index/head_scripts.post.tpl hook so it doesn't get sucked into the combined css file.

Thank you @straygecko.