Jump to content
Kevin

How to modify CSS file in a prestashop theme

Recommended Posts

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 by Kevin
update question (see edit history)

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

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

Thanks

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 (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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More