Reputation: 822
Hi I am trying to create a Child Theme based on an existing theme. I managed to get the child theme registered and inheriting the parent theme's dom structure, stylings and scripts.
The issue I am running into is, if I create a custom.css inside child-theme/assets/css it does register nor do I see any changes on the frontend from that file. I then modified the config yaml file to include:
assets:
use_parent_assets: true
css:
all:
- id: product-extra-style
path: assets/css/somestyle.css
media: all
priority: 100000
and still nothing is happening on the frontend. BUT it completely breaks the backend! Error 500 on every page of the backend. Once I remove everything from css: on down, then the backend comes back to life.
Any ideas on what's happening and how I can get this sorted out?
Thanks so much!
-S
UPDATE:
I have fixed the styles not showing up on the frontend by changing a few things in the yaml file... I changed the file name to custom.css and priority to 1000
assets:
use_parent_assets: true
css:
all:
- id: product-extra-style
path: assets/css/custom.css
media: all
priority: 1000
But the backend issue still remains. Here's a more thorough explanation:
Once I have added the css: and below portion of the yaml file, saved it and went back to the backend, all is ok. I can navigate to any page with no issues. However, if I visit the theme selection page and click on the "Select This Theme" button of my child theme, it then breaks the entire backend. Not sure what and why this is happening, Even if my child theme is already selected and hit "Select This Theme" button again, it still breaks. Kinda weird.
I really would appreciate any insight on this issue.
Thanks,
-S
Upvotes: 2
Views: 4002
Reputation: 31
It might be a little late but if it's any help to someone.
First of all, in Performance section in administration (Advanced settings > Performances) make sure you enabled the debug mode to see the errors.
To add a custom CSS file in Prestashop 1.7 :
Create a custom.css file in the assets/css folder of your theme.
Edit your theme.yml file located in the config folder of your theme
In your theme.yml file, don't forget to indent path, media and priority so that it's aligned with id, that's what caused your error :
assets:
use_parent_assets: true
css:
all:
- id: product-extra-style
path: assets/css/custom.css
media: all
priority: 1000
In my case, after refreshing, it worked fine from this point, but after researching some people had to:
Delete the shop1.json file located in app/cache/dev/themes/theme_name : https://github.com/PrestaShop/StarterTheme/issues/181
Turn on Smart cache for CSS in the CCC section in Performances in administration and manually clear cache in theme/theme_name/assets/cache/: https://www.prestashop.com/forums/topic/610331-prestashop-1711-how-to-simply-change-background-in-classic-theme-custom-css/ and https://www.prestashop.com/forums/topic/595125-editing-of-the-theme-classic/
Upvotes: 3