CSS Editing in Blocks

Add your own CSS code to style elements and their individual parts. CSS expands your toolbox while designing your app, as you can apply design options and behavior changes that aren't available in Blocks. Add your code in the widget.css file in the Public & Backend section in Blocks. Your CSS code impacts all widgets in your app.

CSS hierarchies and overrides

When site builders add a CSS file to a Studio site, that file is at the top of the design hierarchy. It overrides the site theme, as well as any design action in the editor. That's fine, because the site builder knows what they're doing in their site. It's also the same for you in Blocks - you won't be able to design elements that are defined in the CSS file. However, as an app builder, you are also responsible to provide your users with a good experience when using and configuring your app. To do so, it's important that you understand the design hierarchy when a Blocks app is installed on a site.

• Top of the hierarchy: the CSS file of the site. If your app happens to be installed on a site that has its own CSS file, it will override your file.

• Second: your app's CSS file. The file determines the design of all elements defined there, in all app widgets.

• Third: what users configure in the editor. Users can design your app elements in the editor, unless you prevent this in the Editor Experience > Configuration tab in Blocks.

• Fourth: the site theme. Your widgets connect to site themes, unless you choose to disconnect them from the theme.

How to let users configure your app

Your CSS file overrides any change that the app user might do in their editor. For example, if you use CSS to change the background of all of your buttons, and a user tries to change a button's color on a site, nothing will happen. If you edit the CSS of an element, we recommend using one or more of the following solutions for that element:

• Don't use CSS for options that can be configured through the Design and Animations and Effects panels.
• If you do, remove the Design action button of this element, since it has no impact and will just frustrate users. You can do this in the Editor Experience > Configuration section in Blocks.
• Consider creating a custom panel that allows users to control the CSS of this element.

Elements you can style with CSS

You can use CSS to customize many elements, like buttons, images, boxes and more. However, some elements are not yet supported.

Check out our full list of CSS classes to make sure you can customize the element you want.

Create custom classes

You can create your own classes and define which elements they apply to. Enter a name for your new class under Custom Classes in the widget.css file. This lets you apply styling and formatting to a subset of elements. For example, instead of applying a class to all buttons, you can apply it only to all "Subscribe" buttons.

See also

Learn more in our articles on CSS styling for Wix sites.

• About CSS styling
• About CSS custom styling