All Collections
Getting Started with Mutiny
Set your default component styling using global styles
Set your default component styling using global styles

Global styles allows you to set brand color and style for your components for consistency across all your experiences.

Updated over a week ago

Global styles allow you to create a consistent visual brand

Load your brand styling automatically in new experiences by setting up global styles. You can find global styles by clicking on your name in the bottom left corner, and selecting styles.

Overview of the page

There are three different components within styles: Banner, Sidepop and Modals. If you want to learn more about Mutiny components, check out this article.

Editing component CSS styles

In each section, use the editor sidebar to update the component’s CSS. Here are some commonly requested CSS styles for Mutiny banners and side pops.

In the sidebar, comments (in green) show the component area you are applying your change to. Below the section line, write inside the curly braces { } to make your modifications. To make editing easier, Mutiny shows autocomplete suggestions as you type. In the preview on the left, you can see your changes as you edit.

Styling options

Some popular choices of component styling are:

  • Setting brand colors: color: white;

  • Creating button roundness: border-radius:8px

  • Change banner height: height: 50px

  • Change font styles: font-family: “Lucida Console”, monospace;

Want to learn more about the possibilities of editing with CSS? You can review this article for more in-depth CSS information.

Note: Newly created experiences will be linked to the global stylesheets. Saving a change to the stylesheet will make that change live for all experiences with brand styles applied to them.



Don't be a stranger

If you have any questions, we’re here to help! Please feel free to contact us at any time, either through intercom chat or via mutinylovesyou@mutinyhq.com.

Did this answer your question?