TUTORIAL – Change section, page, or project background color

[Joyce]

In WeWeb, you can add CSS styles at section, page, or project level.

Change a Section’s Background Color

• Select the section on which you want to apply the change
• Go to the Styling > Background menu
• Change the background color

Change a Page’s Background Color

• Go to Page Settings > Custom Code
• Add the style you want in the head

Custom code at page level does not currently render in preview mode. You need to publish your project to view the changes

Change a Project’s Background Color

• Go to Project Settings > Custom Code
• Add the style you want in the head

Custom code at project level does not currently render in preview mode. You need to publish your project to view the changes

[Matthieu]

Thanks @Joyce
That was exactly what I needed.

Is there a chance I can use a referenced color in the custom code using some sort of SCSS / LESS value ?

[Joyce]

Hey @Matthieu, do you mean using a color from the project’s design system?

I’m not sure. I’ll need to check with the dev team and get back to you on that one.

[aurelie]

Internally we use css variable with id, so its doable, but a bit tricky to obtain these id at the moment.

Two hacks to get these ids:

• Open any formula, and bind this to your colors. Switch to js, and the id will be display. Then you can use var(–YOUR_ID) on your css style.
  
  
• Open the devtool on your editor, and search for the html element (the one from the iframe if you are in the editor). You will see a bunch of css variable defined here, including your colors.
  
  

Hope this help !

[Matthieu]

Thanks @joyce & @aurelie
That was exactly what I need.

And @Flo took a look at my project this morning and the ugliness of it convinced him to do something about setting the color of the html tag in the editor and have it rendered.

(BTW do you know how I can mark a topic as solved?)

Have a nice day.

Matth-

[Joyce]

@Matthieu

the ugliness of it convinced him to do something about setting the color of the html tag in the editor and have it rendered

looool nicely done

[Matthieu]

I know right

[Matthieu]

Actually @Damien gave me a nice snippet of code !!

In the app triggers:

Create a new WF on app load before collection fetch:

With a custom JS such as:

wwLib.getFrontDocument().documentElement.style.background = context.colors['bf29175d-7580-412b-aac3-ea6e3add6e76']

Or hard code your fav color. I’d rather use my referenced color here.

AND TADAAAA: you’ve got a nice background even for the HTML while editing in the studio.