Jump to content
rtyrtrty

How to add custom CSS file in stylesheets.tpl

Recommended Posts

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 by qroft (see edit history)

Share this post


Link to post
Share on other sites

[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.

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Thanks 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

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