Hello everyone,
Nice to meet you all. I have a quick question about the design, in bubble you can change the color of one page specifically, for example, In my sign up page I have a gradient background and in my dashboard I have a simple white color. I suppose that I can do the same on wappler, I just didn't find any content on that and I still haven't discovered how I can do that! Can someone help me do this?
Sorry for simple question!
Best regards,
Rodrigo
Hello Rodrigo,
You can also do this in Wappler. You just need to assign a class to your page body and style it using the design panel.
First, open the design panel, select App in the App Structure and create a class for it:
Then setup the gradient for the background:
And your page now has a gradient:
Is the css from the design panel added to your style.css?
I see a lot of unnecessary css in this file, for example the rules having :active and the classes that are not used on the page - you can remove it and make sure to only leave one class to the body that also exists in the css file.
Ah sorry i just saw you're using nodejs and my explanation was for plain html pages.
For nodejs it's a bit different as the content pages don't have their own body tag, only the layout page does.
If you want to apply such a style to a specific nodejs page then you need to a wrapper container that you can then style.
So you can wrap your content page content as on my screenshot:
by adding a div element around your content with the class you created already page-gradient:
<div class="page-gradient">
...
</div>
but also make sure to set its min-height to 100vh so that this element is always as high at least as the page:
Thanks Teodor, I've managed to do it using the main layout. When I use the main layout in the app already works! Thanks for your time, wish you the best!
