Hi, I have a HTML Blog template and I want to give Pinegrow the opportunity to use the components and CMS system.
I have followed the tutorial on components, editable areas, etc. So far so good.
But in the template I have, the background image of the main banner is changed as a CSS property, and the editable areas system doesn’t recognise the classes.
How can I make editable only that property, or how can I change that background image from components?
I attach images:
Hi @miltonardila,
I hope I can help out. So, when you define an element as editable, you are defining what parts of that element the user can change. The CSS rule that you are pointing out isn’t really part of the element. It just points to it. If you look at the element, it will have a class of overlay, but none of the other classes shown in the rule. Adding classes to the editable action allows the end user to toggle the class(es) on and off. So for example, to remove the overlay class.
The best way to accomplish what you want to do is to check the box for the editable action that is currently hidden by your classes dropdown. This will add an inline assignment for the background image for any component instances. This inline image will override the stylesheet and allow the end user to set a new background image.
Make sense?
Bob
Hi @RobM thank you very much for your help.
Ok, I understand what you are saying. I have changed the option and now I have the option to upload the image directly. I attach screenshots, do you think that replacing the image in this way, can create a conflict and then in production there are problems?
Hi @miltonardila
I assume the third screenshot is the component on the child page?
This method shouldn’t present any problems. I’m not sure of the rest of your page structure and why setting that background image required 3 class names for the rule. But setting the image inline should work fine.
Cheers,
Bob
