TUTORIAL – Add Global Styles in CSS

[Joyce]

In WeWeb, you can add global styles in CSS. Here’s how:

Upload your CSS stylesheet to WeWeb

Go to your project Settings > File > Upload new file and uploading your CSS stylesheet

Link your CSS stylesheet in the head of your WeWeb project

First, copy the file’s URL by clicking on the top left green icon of your CSS file once it’s been uploaded to open it in a new tab

Then, go back to your project Settings > Custom code and link to your CSS stylesheet in the head

<link rel="stylesheet" href="url-you-copied-above">

Publish the website

Changes you make in the custom code will NOT show in the editor. You will only be able to see the changes on the published website.

[yunus]

Can you share your global CSS parameters, so we can edit them effectively?
Otherwise it is a cat and mouse game to identify all elements you point and reset their values. (ie blockquote gets a 24px margin from your global CSS by default)

[Mael]

Hi @yunus, all our code is public, you can see what you want here: weweb-assets · GitHub

[yunus]

Not the list I was looking for, finding in inspect element and resetting them probably will be faster but thanks…

I am an old school front-end dev and the JS based CSS and object oriented nature of the styling is killing me, least efficient way to control the overall system styling.

[aurelie]

Hi @yunus ,
there is no global style, as each component and each component are fully customizable, every style is dynamically generated.
We have a notion of design system for color and typography, but its up to you to use them.
There is also the custom css property, but this may interact incorrectly with all the properties already managed by the component (this is more to add advanced behavior not covered by the existing settings).

[yunus]

Seems like putting classes to everything and then managing them directly via custom Css or external CSS will be logical way to manage as there is not efficient class management or style management yet (like Webflow).

Thanks

[aurelie]

This is one of the big feature on our roadmap, to have something similar to Webflow class, to have component inherit some common style.

[tekcorps]

With a proper solution on the road map, I’m not sure how long it will be a problem. But here is a janky solution.

I created a “design” folder and added some variables such as border-radius, entered it in as text, and then I could bind the components to it.