How to add custom CSS file in stylesheets.tpl

[KenFranklin]

How to add some custom CSS files in stylesheets.tpl?

[qroft]

I found a page where a spanish guy says that you only need to add it to your assetts/css folder but my custom stylesheets are not loaded.

This is the link: http://stackoverflow.com/questions/43756398/how-do-i-call-custom-css-in-prestashop-1-7

 

[uPDATE]

I also found in the documentation that you have to set up external CSS / JS files within the theme.yml file.

This is the link: http://developers.prestashop.com/themes/assets/index.html#registering-in-themes

 

I have done it this way:

assets:
  css:
    all:
      - id: My custom CSS
        path: assets/css/mycustomstyle.css
        media: all
        priority: 100

But it does not load either. I do not know if it is something with the cache or so. I will keep you updated.

Edited May 18, 2017 by qroft (see edit history)

[qroft]

[sOLUTION]

Ok, now this is going to be complicated, but working.

First of all insert your scripts (js and css) as i mentioned above inside your theme.yml

 

Second do what Samo70 says on this forum entry with the cache and CCC in the admin backend:

https://www.prestashop.com/forums/topic/610331-prestashop-1711-how-to-simply-change-background-in-classic-theme-custom-css/

 

ATTENTION PLEASE:

I am new to Prestashop and trying out some things. But what i have read, and in case some of you have NOT read, is the way that 1.7 handles external files.

In other words: if you follow the above steps and then check the HTML code of your website, you won't find your CSS files in there as they are "compressed" into one big file.

If the above steps are done, check your code and search for "stylesheet" and you will find something like stylesheet-339383.css

Open that file and you will see that every CSS file that you have inserted into the YML file, will be in that CSS file.

[oliiix]

There's actually a file called custom.css inside the assets folder.. Why not just use this one?^^

[Rhobur]

It may be not there by default, but if not create it (the custom.css).

[gosrl]

Answering Oliiix question: I've tried to use the custom.css file, but changes to that file are not reflected in front-end.

Also, if I try to open the custom.css file in another tab (using Chrome Inspector Tool), I still see the old version of the file.

Tried to clear cache several time, both in Prestashop and in Browser. I was still not able to see the updated CSS.

Any idea?

[JBW]

On 3/15/2019 at 4:05 PM, gosrl said:

Tried to clear cache several time, both in Prestashop and in Browser. I was still not able to see the updated CSS. 

Any idea?

Sounds like a cache issue. Try to (temporarily) deactive CCC Smarty Cache for CSS in performance section

[Velno]

Solution for new versions of PrestaShop (working on my 1.7.6):

1. Simply add new styles / scripts as in the tutorial

2. If it won't work, go to: \config\themes\[your_theme] and delete file shop1.json. The file will regenerate after you refresh page.

That's it!

[Spir]

Thanks Velno! I was missing the delete the JSON file part, didn't find that information in the doc.

[yakmandji]

Hello, I continue this topic because on my side it don't work.

When I remove "shop1.json" file in /www/config/themes/my-new-theme, the file is not generated again after loading page and I have a 500 page error both
on my front and my back office. I lose all access.

Fortunately I have saved this file. My only solution was to re-upload this file to get back the website.
I am on 1.7.6.7 version.

Any help will welcome 

Thanks

Edited January 5, 2021 by yakmandji (see edit history)

[HackID1]

En 18/5/2017 a las 11:43 PM, qroft dijo:

[sOLUTION]

Ok, now this is going to be complicated, but working.

First of all insert your scripts (js and css) as i mentioned above inside your theme.yml

 

Second do what Samo70 says on this forum entry with the cache and CCC in the admin backend:

https://www.prestashop.com/forums/topic/610331-prestashop-1711-how-to-simply-change-background-in-classic-theme-custom-css/

 

ATTENTION PLEASE:

I am new to Prestashop and trying out some things. But what i have read, and in case some of you have NOT read, is the way that 1.7 handles external files.

In other words: if you follow the above steps and then check the HTML code of your website, you won't find your CSS files in there as they are "compressed" into one big file.

If the above steps are done, check your code and search for "stylesheet" and you will find something like stylesheet-339383.css

Open that file and you will see that every CSS file that you have inserted into the YML file, will be in that CSS file.

Hi, how can you insert a new CSS file that allows you to modify a 2nd store that I have generated with multistore.
In prestashop 1.7
o Some kind of conditional that can distinguish the changes of a css by means of the name of the store by means of .shop_name #button {color: red; }

or something similar.

[prestabee]

On 7/15/2019 at 7:55 PM, Velno said:

Solution for new versions of PrestaShop (working on my 1.7.6):

1. Simply add new styles / scripts as in the tutorial

2. If it won't work, go to: \config\themes\[your_theme] and delete file shop1.json. The file will regenerate after you refresh page.

That's it!

Thanks this worked for me. I simply added my js to the assets in theme.yml and deleted shop1.json and it worked