Add CSS Based Viewing to Include Files

[Antony]

It would be great if included pages could access and use the external CSS files of their parent…

So for example, this is what a page of my design looks like before it becomes an include file:

and this is what it looks like after it becomes an include file:

[George]

We already have an issue about this:

Custom styles don’t display in design view when editing SPA Content Pages

I am using some custom theme, CSS & JS. The page is rendering fine when routed to in browser, but when I try to edit it, it looses all CSS (other than Bootstrap) and Google Fonts (which is directly rendering from fonts.google.com - only CSS, no JS) is not rendering either. Any thoughts on this?

Maybe @patrick can add more priority to it.

[Antony]

Great, thanks for the update @George!

[Antony]

But be aware it only works if your CSS file(s) are referenced through the Project settings…

Editing Include File in Wappler Not Showing Effect of CSS

… or merge the files. I mentioned the Theme Manager because it’s likely that the design was developed before the Theme Manager was available, and if the default Bootstrap css is used, there’s probably a more efficient approach (ie creating a custom theme).

[Teodor]

Well Antony, that is the right way of doing it. Using a single CSS file for your styles, included in the project - so nothing unusual or unexpected. That is why the project settings offer you to select a style file.
That is how the Design Panel and Styles Panel also work.