Appearance

Updating visuals

If you see any images containing outdated UI, please bear with us.

We are updating all content as quickly as possible to mirror our new UI.

CSS Stylesheet ​

In WeWeb, you can use no-code CSS properties to style your app or add custom CSS to your project.

You can add that custom CSS:

In this video and the following article, we explain how to import a stylesheet and apply global CSS styles to a WeWeb project:

WARNING

The custom CSS you add in WeWeb does not currently render in preview mode. You need to publish your project to view the changes.

Before you can link to a CSS stylesheet in your WeWeb project, you need to host your stylesheet somewhere so you have a URL to link to.

One way to do this is to upload your CSS file in your WeWeb project:

  • In the Interface tab, open Assets → Files
  • Upload your CSS file
  • Copy the URL of the file you just uploaded

Upload CSS stylesheet

Once you have a URL that points to where your CSS stylesheet is hosted, add it to your project scripts:

  • Open Settings in the top bar → Interface Settings → Custom scripts
  • Add your stylesheet link in the Head section

<link rel="stylesheet" href="url-you-copied-in-step-1">

WARNING

When you add custom CSS to a page or project, you should not add any <head> or <body> tags. WeWeb handles those tags for you.

Publish the project ​

A few words of caution: WeWeb doesn't validate custom code for you, so be sure to check your code before publishing.

Make sure your custom code won't create any security vulnerabilities. Unsecured code could expose sensitive customer information!