How to customize PS9.0.x?

[darkin]

Hello everyone

So in previous PS versions there's custom.css file sitting in every theme and adding new css rules to this file you can change your site's look and basically feel. But in PS 9.x.x. there's no such file and adding it to theme's dir doe's nothing. Noticed that PS 9 generates themeXXX.css file, uses it and saves in cache dir. IS custom.css file hiding somewhere or in case it's totally different from previous versions, what is the best way to customize website look (like backgrounds, shadows, lines and etc.)?
Thanks in advance

[Andrei H]

Hello,

In PrestaShop9 you can still create an assets/css/custom.css file in the themes/<theme-name> directory, and, as you can see here, the FrontController will add it to the front store pages.

The caching does seem to be handled a little bit different, especially for the Hummingbird theme. You will actually need to go to Advanced Parameters -> Performance and clear the cache, in order to see the changes.

For speeding up development, you can disable the Smart cache for CSS (in the same Performance page) and on refresh you should see the changes.

[darkin]

Thanks for reply, Andrei. Using classic theme and have tried to put custom.css file, but had no effect. Need to clean all caches and try again.

[El Patron]

In PS 9 the theme assets are driven by theme.yml.
To have your own custom.css and custom.js included, you need:

1, Files in the theme assets folders

/themes/<your-theme>/
  assets/
    css/
      custom.css
    js/
      custom.js

2. Declare them in theme.yml

Open /themes/<your-theme>/theme.yml and make sure you have an assets section like this (add it if it’s missing):

assets:
  # If you're building a child theme and want to reuse parent assets:
  # use_parent_assets: true

  css:
    all:
      - id: theme-custom
        path: assets/css/custom.css
        media: all
        priority: 1000

  js:
    all:
      - id: theme-custom-js
        path: assets/js/custom.js
        priority: 1000
        position: bottom   # before </body>, optional

A few notes:

• path is relative to the theme root (themes/<your-theme>/), so assets/css/custom.css points to /themes/<your-theme>/assets/css/custom.css. PrestaShop+1
• css: all: and js: all: mean “load on every front-office page”. You can also target specific page types (product:, category:, etc.) if you want more granular loading. PrestaShop+1
• priority controls the order – higher numbers are loaded later, useful if you want to override theme styles.

[darkin]

El Patron - it's working and without declaring in theme.yml (maybe it's giving some advantage in something...) Enough what Andrei suggested and I tried it before asking, just was used to older ps versions when opening 'Inspect(Q)' in your browser, you see that some settings for element are used from 'theme.css' and some from 'custom.css'... And as just to try I put empty 'custom.css' file, loaded the shop and used 'Inspect' hoping to see that settings are coming from 'theme.css' and 'custom.css', I saw a css file loading from cache directory...

With PS9 it uses css file from .../themes/classic/assets/cache/theme-86112d.css ... Think this file is a blend of 'theme.css' and 'custom.css'... It just comes a bit more complicated to edit the styling not knowing all the element names as this 'theme-xxx.css' ajusted for saving sapce removing all spaces and all settings sit in one line 119.. Think time came to learn making child theme 🤔

[El Patron]

USE OF CCC: Be careful here. Make sure that on each page type (index, category, product, etc.) the theme###.css and theme###.js filenames are the same across all pages. (Check using “view source”.)

If the filenames differ, then you should disable CCC for one or both. Otherwise you end up duplicating files that are already in the browser cache, which defeats the purpose of CCC.

At one time I built a module to solve the .css side, but I could never fully resolve it for .js (not for lack of trying). I'm not suggesting you buy anything, but the documentation explains the CCC issue well and how to check whether it’s working as intended.

yes, experiment with child theme but note: classic/hummingbird have just enough features to build a product catalog, define shipping, payments, discounts etc.  But lacks extended feature you get with a high quality 3rd party theme from addons if you want a modern front end.

have fun and back up back up back up.

Edited 2 hours ago by El Patron (see edit history)