Jump to content

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

Add Custom Css To Header Rate Topic   - - - - -

 
  • sarathlal
  • Advanced Member
  • Trial users
  • Join Date: 04-May 16
  • 57 posts

Posted 04 May 2016 - 12:23 PM #1

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"}

<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

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.

<link href="/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

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.

 

 



 
  • Vivek Gupta
  • Senior Member
  • Members
  • Join Date: 09-Jul 15
  • 247 posts

Posted 05 May 2016 - 05:39 AM #2

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

Vivek Gupta 
 


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 19766 posts

Posted 05 May 2016 - 08:19 AM #3

Please use:

<link href="{'[relative]/[theme]'|fn_get_theme_path:'C'}/css/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • sarathlal
  • Advanced Member
  • Trial users
  • Join Date: 04-May 16
  • 57 posts

Posted 05 May 2016 - 09:50 AM #4

Thanks eComLabs,

 

It works..

<link href="{'[relative]/[theme]'|fn_get_theme_path:'C'}/css/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

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



 
  • sarathlal
  • Advanced Member
  • Trial users
  • Join Date: 04-May 16
  • 57 posts

Posted 06 May 2016 - 07:03 AM #5

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!



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 19766 posts

Posted 06 May 2016 - 01:53 PM #6

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...-changes-addon/


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • straygecko
  • Advanced Member
  • Members
  • Join Date: 01-May 13
  • 93 posts

Posted 06 May 2016 - 03:10 PM #7

 

Please use:

<link href="{'[relative]/[theme]'|fn_get_theme_path:'C'}/css/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />

 

<style src="addons/my_changes/styles.css"> is simpler.  Put it in the index/head_scripts.post.tpl hook so it doesn't get sucked into the combined css file.



 
  • sarathlal
  • Advanced Member
  • Trial users
  • Join Date: 04-May 16
  • 57 posts

Posted 07 May 2016 - 07:17 AM #8

Thank you @straygecko.