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

[nshkrsh]

We will see if we can also add support for more custom styling later on together with the new design panel and having a central custom css style file per project.

That sounds good.
In current state, I also lost the styles added from design panel in the content page.

[nshkrsh]

Noted.

[George]

Yes indeed - live your content pages will all look good. So it is just that in Wappler design view, when editing the content pages directly - they won’t look completely styled. But that is because you are editing a “template” that later on gets injected in the right contents.

But again we will be improving the designing process of those as well

[nshkrsh]

Un-formatted content pages make it a bit unusable to update.
Hope to see these improvements soon.

[johnny.hajjar]

Hey guys,

It would be great to have this feature in the “visual Wappler”

content pages are not usable otherwise

[George]

Well as I said we already include all the Bootstrap styles in there. So when using the default framework styling and standard App Connect components - they should look all great.

The topic is about some specific custom additional styling only.

[johnny.hajjar]

indeed, unfortunately the site i am working uses external css theme. i look forward to seeing wappler support

[nshkrsh]

having a central custom css style file per project

BTW, this is music to my ears. please do it. @George

[nshkrsh]

In current state, I also lost the styles added from design panel in the content page.

@George Just pointing this issue again, in case you missed it. Design Panel & SPA don’t work together.

I was working on SPA today and encountered this again. Had to use inline style via style panel instead.

[Teodor]

Hello @nshkrsh
We are aware of that.
We are working on an improvement for this, hopefully such an improvement will be integrated in some of the next updates.

[Antony]

Hi there Team Wappler…

I have just come across this issue too… my design is a very large app where I want to use lots of custom CSS, and I cannot see any other way to do things than by having all the content in content pages and a big my_styles.css file.

Each content page will have complex functionality and page layout/styling.

So all my app design will be on content pages where I will have no access to see the effect of my CSS as I build the gui.

@George, do you have any estimated timescale for a Wappler version that will enable custom CSS to be viewed in content pages during editing?

Does anyone have any suggestions for the least painful workaround?

Thanks in anticipation,
Antony.

PS - Well, I guess I could make what would have been the content pages actually separate containers on the page, and keep them all hidden except the one that has just been selected…

[George]

do you have any estimated timescale for a Wappler version that will enable custom CSS to be viewed in content pages during editing?

Oh good one seems it missed our planning. Will try to get it ASAP! It’s just that our Xmas break is about to start, will see directly after that.

[Antony]

@George, thanks sooooo much for your prompt and positive reply!
Some time early in the new year will be fabulous… I’ll work with the hiding method for now and convert it over when you release the new capability!

[Bankym]

Do we now have solution to this problem…

[Teodor]

This has been improved in the latest versions of Wappler.
Check:

Editing Include File in Wappler Not Showing Effect of CSS

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: [Screenshot_2] Content page opened separately: [Screenshot_3] Style file selected and included on the main as explained here: