How to style a server connect page

After converting a form to a “server connect” I lost all the styling. How do I apply a pre-built theme to both the form and its parent page?

Unfortunately, you are going to run into many issues using pre-built themes from third parties.

The ones installed with Wappler are not custom are they?
Can you point me to how I can apply a Wappler theme to my project?

Maybe share a little more info about what are you doing exactly and what the issue is? Are you referring to the Bootswatch themes available in the frameworks menu?

Since I have not learned Wappler lingo yet the best I can do is use layman’s terms as I move forward. I do not know what a “Bootswatch” is. I’ve tried to follow docs for the theme manager but it is outdated and doesn’t answer my questions. I’m trying hard to understand how to apply a simple built-in theme.
I’d like to remove all theming and start over with applying the same theme again but don’t see an obvious way to that either.
NOTE: I am not attempting to modify any part of the theme. I would like for a built-in theme to smply work as-is.
Thank you

Questions about these options. Maybe they are required to make a theme work?



2022-10-05_06h52_19

This is what the “server connect” page looks like when it runs. Also note the strange links which appear on it. [UPDATE: I fixed the links issue]

Nothing has really changed in the way you customize bootstrap through the theme manager … so the docs are correct.

Your screenshots shows that something is probably not correct with the paths for the css/js includes on your page - maybe a wrongly configured target. Check the browser dev tools for errors.

This doesn’t work as the UI is different now. See step #20; no idea how to get there.

Can you be more specific on your comment re: “css/js includes”? What do you see wrong in my screen shots? Everything in this project is default Wappler setup.

I see no errors here:

The only difference are the icons and colors in the UI. The theme manager is used the same way and functions the same way …

I see an unstyled page which is usually caused by wrong paths, missing files etc.

Can you post a screenshot of your target setup please?

Target screenshot

Is the site created in this same folder on the IIS server used for your target, or is it in a different folder? And what happens when you try to load: http://localhost/SSAForm/bootstrap/5/css/bootstrap.min.css in your browser - does the file load? Or do you see a “not found” error?

The Wappler project files are in a folder in my documents folder (Windows 10).
Within IIS manager an application is created using the path to the Wappler project folder.


The file is loading:

Doesn’t seem like that to me. If the file exists in this path it should be loaded in the browser like that:

Maybe my Chrome installationdoesn’t understand/display CSS files, I don’t know.

I think it’s your IIS server settings set up in that way, that it doesn’t show errors, but instead shows a 200 response.

I’d like to make a simple test page but I still don’t know how to apply a built-in theme.
Is there a simple way to apply a them to a new page?

There is really nothing special and different than what you see in the tutorial about the theme manager - you just select the theme and that’s all!

The issue is with your includes missing or wrongly linked. And as your server does not return the exact errors, but shows a status 200 instead, it’s not possible to see where is it looking for these files and why are they missing. You should really check your server config and make sure it displays the 404 errors properly with detailed error messages enabled.

I’ve resolved the issue with css files not being served.
BUT:
When I select a different theme the page does not pick up the changes. Why?
How do I apply a theme to the page? Can you explain how to do this?
Thanks

So was it wrong paths?

Are you sure you clear your browser cache? Or do you mean you don’t see the changes in Design View in Wappler ?

I don’t see any changes in design view or when I run the page in browser. I clear the browser cache after every run.

So - how did you resolve this exactly then?