Hi all!
I would like to display a background gradient across my app. Eventually I may or may not want different gradients on different pages or depending on a light/dark mode setting but for now let’s keep things simple and just get a single gradient working everywhere.
I understand this can be done in the custom code setting, either at the page of project level, however this does not display in the editor - only when published. Re-publishing the entire project to validate whether or not it actually looks right when changes are made to the design is, of course, not really workable, nor is working “half-blind” in an editor that doesn’t display the app the way it’s actually going to look to the user.
This old thread TUTORIAL – Change section, page, or project background color - #4 by aurelie seems to indicate there exists a solution to display such background colors in the editor, but I don’t really understand the solution or know if something more straightforward has since been implemented.
Does anyone have an answer to this? Thanks!
I think the changes are visible in the editor only if you have a paid plan
I don’t suggest using the gradients in CSS, I’ve been working quite intensely on a gradient heavy frontend, and it’s that gradients are really not compatible within the web in general. Each browser makes them differently and introduces so called “banding”. I think you’re better off with a very optimized png with a gradient.
gradients do work with web, it’s just that usually you never want to use only 2 colors, and this is a matter of color space. There is plenty of tools to generate better gradients.
The global custom code only loads in the published app. As an alternative you need to use a style tag in a html element or a js action on page load, but for a page background you will likely have a flash of unstyled content.
@rayanenocode I am on a paid plan, so no.
@Broberto Thank you for your input, although it’s not really helpful in answering the core question of how to get a background to display in the WeWeb editor. Whether it’s a color, a gradient, or an image, the same issue remains.
@dorilama Thank you, would you happen to have some resources to recommend on the topic of better gradients for the web?
I understand global custom code only loads in the published project, that’s really the core issue here. I wonder if the WeWeb team has any plans to change that since it’s a pretty significant limitation.
I understand the js action on page load solution, which is suboptimal for both performance and UX imo. Can you expand on the “style tag in a html element” approach you mention?
Thanks!
google “css gradient generator” and pick one 
there is a great explaination here: Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient.
the usual way to add css to a page is with a style tag, the html element allows you to write html that will be injected in the page
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
Thank you haha I did Google it but there’s of course a ton of material out there, so I recommendations from trusted people are always appreciated!
the usual way to add css to a page is with a style tag, the html element allows you to write html that will be injected in the page
Are you talking about the WeWeb html element?
EDIT: Oh my god, this is great! I can just plop down a WeWeb html element anywhere on the page and put in my custom style tag and it works right in the editor, yay! Not a super clean solution but definitely workable.
Now ideally I would just need a way to set this as “editor only” and use the real, project/page-level custom code for prod.