Editing Include File in Wappler Not Showing Effect of CSS

I read that quite a few releases ago, a new feature was added that enabled the effect of CSS to be visible when editing an include file, to address the feature request listed below.

I’ve not worked on the part of my design which uses include files for a few weeks, so today is the first chance I have had to test this out, but I am not seeing the effect of my CSS as I edit the include file.

Is there something I need to do in order to make the CSS effects magically appear? :thinking:

Best wishes,

Antony.

This should have already been improved a few versions back …
All the styles added to the selected project style file, included on the main page will show when you preview the include page:

CSS:
Screenshot_1

Main Page with the content page:

Content page opened separately:

Style file selected and included on the main as explained here:

1 Like

Thanks for the pointer Teodor!

So my design has some very complex CSS using variables and media enquiries and is split into 3 separate files (currently having 1800 lines in total):

<!-- My Style Sheets  -->
	<link rel="stylesheet" href="css/structure.css">
	<link rel="stylesheet" href="css/content.css">
	<link rel="stylesheet" href="css/colours.css">

So my design doesn’t have a single “styles.css” file.

It all works fine in my index.php file, and I can see all the styles.

Does it mean that because I am not following the “normal” way of using just a styles.css file then these 3 CSS files won’t be visible in the include file?

Yes, the style file selected in the project settings will be used:

Same way as this file will be used for the changes made in the design/styles panels.

You can have 100 separate css files if you wish, but include them in a single style file and then call just it.

Example:

This will render all the styles properly when editing include pages.

3 Likes

Perfect, thank you Teodor! :slight_smile:

For maximum performance (which I think you’re aiming for), you might benefit from using the Theme Manager - if you’re using the default Bootstrap css - and reduce the amount of extra css code required. Ideally you might avoid the need to use css import, from a performance point of view. (But these changes might only make a very small difference. Perhaps just as importantly, they might make it easier to manage the styling.)

1 Like

True, @import should be avoided but in Anthony’s case, if he wants to see his design changes in the include pages he needs to include one design file so that’s the only solution here.

1 Like

… 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).

1 Like

Thanks for the debate folks!

Yes, this was all created pre Themes, and is embedded into soooo many thousands of lines of code that I don’t feel inclined to change or merge… I may have done things differently now I know what I know, but hey, my design is a result of my learning process and the paths I chose to take.

So yes, I will follow @teodor’s approach for now.