How to modify CSS file in a prestashop theme

[Kevin]

Hi, I am a newbie for Prestashop eCommerce CMS. Personally, I have some experience regarding WordPress woocommerce. 

I have made a PrestaShop website based on an online theme. 

When I inspect the theme, I found it is very interesting. The CSS file is dynamic under theme folder/assets/cache/dynamic name.css. 

Can anyone explain to me how this happened?

I believe the real CSS file is at theme folder/assets/field-css/field_css.css. 

Just wondering How can I modify the theme CSS files?

 

Edited November 22, 2017 by Kevin
update question (see edit history)

[NemoPS]

That's usually cached if you turn on the ccc option in the back office.
If you are using 1,7, you can't edit the core css (heh) as it's compressed in any case. All you can do is add yours in custom.css, in the theme folder/assets/css

[Matteo]

Hi,

is the custom.css overwritten on theme update or it's not involved in the process?

Thanks

[NemoPS]

Good question, it shouldn't be but honestly I have not updated any edited 1.7 so far

[tobiaseriksson]

 (these instructions are for Prestashop 1.7)

I was struggling with updating the CSS for a theme I had, and I was never to really find any good details on how 

So these are my notes

I wanted to ADD some CSS to do tables with DIV

1. In your installation you have a directory structure where you have ..../themes/<name-of-theme>/assets/
   Inside of that directory you have 
   ./cache
   ./css
   ./img
   ./js
2. inside of ./cache you have a compile of all your CSSs etc that will be loaded by your browser
   and you can see from where your Browser loads the files by using "Inspect" and look at "Sources" in for example Chrome
   These files should not be edited, but if you do know that the cache can be refreshed and all your changes will go away
   also note that you need to reload your page in Chrome by also refreshing the cache which is done by pressing CMD-SHIFT-R
3. so you need to edit the files under ./css
4. once you have done that you need to go into Prestashop and go to
   from the left menu "Advanced Settings" and then "Performance"
   In the top there is now a "Clear Cache"-button to press
5. Now it will take a while for it to refresh the cache 
6. Now reload your page and perhaps you need to refresh the page by doing CMD-SHIFT-R to clear the cache first

IF you want to add some custom CSS then in the ./css directory edit the custom.css file

BUT you also need to edit the file under .../themes/<name-of-theme>/config/theme.yml

By adding the custom.css file to the YAML file like so

assets / css / all / 

- id: custom
path: assets/css/custom.css

Best of luck

-Tobias