All Collections
Getting Started with Mutiny
Common CSS Styling for Components
Common CSS Styling for Components

Using global styles, you have the ability to make sure all your banners, sidepops, and modals are always on brand

Updated this week

Global styles allow you to add custom CSS styling that will automatically apply to any new component experience you build in Mutiny. Check out this doc to learn how to set this up.

Preset Styling

Inside your global styles, there are a number of styling options already available to you. For example, to change the button color for your banners, look for the preset styling in your global styles that looks like this:

/* CTA background color styles */
.mutiny-banner .mutiny-button > div:first-child::before {
/* background-color: #AA00FF; */
}

The /* and */ represent the start and end to a line of CSS that is commented out. In this case, you can add in the background-color by removing the comments on that line:

/* CTA background color styles */
.mutiny-banner .mutiny-button > div:first-child::before {
background-color: #AA00FF;
}

In addition to the CSS already in your global styles, you may want to make further changes to the styling of your components. We'll explore some of those options below. To make these changes, copy the portion of code in the CSS column and paste it to the bottom of your style sheet.

Banners

What do you want to do?

CSS

Change the background color of the banner.

/*Change background color*/
.mutiny-banner {
background-color: #cff6ff;
}

Change the hover state background color on the primary CTA buttons.

/*Change the hover background on primary CTAs*/
.mutiny-banner .mutiny-button:not(.mutiny-secondary):hover > div:first-child::before {
background-color: white;
}

div.mutiny-banner .mutiny-button:not(.mutiny-secondary):hover {
opacity: 1;
color: black;
}

.mutiny-banner .mutiny-button:hover > div:first-child::after {
background-color: unset;
}

Change the hover state text color on the primary CTA buttons.

/*Change the hover text color on primary CTAs*/
.mutiny-banner .mutiny-button:not(.mutiny-secondary):hover{
color: black;
}

Change the hover border on primary CTA buttons.

/*Change the hover border on primary CTAs*/
.mutiny-banner .mutiny-button:not(.mutiny-secondary):hover{
border: 1px solid #1A1E22;
}

Reduce the height of the banner on mobile.

/*Reduce the height of the banner on mobile*/
@media only screen and (max-width: 720px) {
.mutiny-banner {
padding: 15px 0px !important;
}
.mutiny-banner * {
line-height: 20px !important;
}
.mutiny-banner div[class*=buttonContainer] {
margin-top: 10px !important;
}
.mutiny-banner div[class*=title] {
margin-bottom: -20px !important;
}
.mutiny-banner .mutiny-button {
margin-top: 40px !important;
}
}

Sidepops

What do you want to do?

CSS

Change the background color.

/*Change background color*/
.mutiny-sidepop div[class^="popupBackground"] {
background-color: #cff6ff;
}

Change the hover state background color on the primary CTA buttons.

/*Change the hover background on primary CTAs*/
.mutiny-sidepop .mutiny-button:not(.mutiny-secondary):hover > div:first-child::before {
background-color: white;
}

div.mutiny-sidepop .mutiny-button:not(.mutiny-secondary):hover {
opacity: 1;
color: black;
}

.mutiny-sidepop .mutiny-button:hover > div:first-child::after {
background-color: unset;
}

Change the hover state text color on the primary CTA buttons.

/*Change the hover text color on primary CTAs*/
.mutiny-sidepop .mutiny-button:not(.mutiny-secondary):hover{
color: black;
}

Change the hover border on primary CTA buttons.

/*Change the hover border on primary CTAs*/
.mutiny-sidepop .mutiny-button:not(.mutiny-secondary):hover{
border: 1px solid #1A1E22;
}

Switch the sidepop from right anchored, to left anchored

 /*shift to right*/
.mutiny-sidepop[class*="bottomLeftAnchor"] {
right: 0px !important; left: unset !important;
}
.mutiny-sidepop-button {
right: 25px !important; left: unset !important;
}
.mutiny-sidepop-button:before {
display: none;
}
.mutiny-sidepop-button:after {
display: none;
}
.mutiny-sidepop > div[class*="popup"] {
left: unset !important; right: 75px !important;
}

Modals

What do you want to do?

CSS

Change the background color.

/*Change background color*/
.mutiny-modal div[class^="background"] {
background-color: #cff6ff;
}

Change the hover state background color on the primary CTA buttons.

/*Change the hover background on primary CTAs*/
.mutiny-modal .mutiny-button:not(.mutiny-secondary):hover > div:first-child::before {
background-color: white;
}

div.mutiny-modal .mutiny-button:not(.mutiny-secondary):hover {
opacity: 1;
color: black;
}

.mutiny-modal .mutiny-button:hover > div:first-child::after {
background-color: unset;
}

Change the hover state text color on the primary CTA buttons.

/*Change the hover text color on primary CTAs*/
.mutiny-modal .mutiny-button:not(.mutiny-secondary):hover{
color: black;
}

Change the hover border on primary CTA buttons.

/*Change the hover border on primary CTAs*/
.mutiny-modal .mutiny-button:not(.mutiny-secondary):hover{
border: 1px solid #1A1E22;
}

Remove the close button

 /*Hide Transparent Button*/
.mutiny-modal .mutiny-button.mutiny-transparent {
display: none !important;
}

How to style your CTA buttons

Add rounded corners to CTA buttons:

Under /* CTA styles */ add:

Border-radius: 8px; ← adjust px for more or less rounded corners

Add a background gradient to buttons:

Under /* CTA styles */ add:

background-image: linear-gradient(to right, #5C5CFF , #8960FF); ← replace with the hex codes you want

Change the color of your sidepop survey success CTA:

The sidepop survey success CTA is considered a "secondary button". To change the color of this CTA, add the following CSS to your sidepop styles:

.mutiny-sidepop .mutiny-button.mutiny-secondary > div:first-child::before {
background-color: #AA00FF;
}

How to recolor the success check mark on survey sidepop

Add the following CSS to your sidepop styles:

[class^="successIconLayertop"] { 
fill: #5951FF !important;
}

[class^="successIconAccents"] {
stroke: #5951FF !important;
}

How to remove the success check mark on survey sidepop

Add the following CSS to your sidepop styles:

[class^="successIcon"]{
display:none;
}

You might need to adjust your top margins after removing the success icon. To do this, add the following under /* Title styles */

Margin-top:50px;

How to replace the success check mark with your logo on survey sidepop

Add the following CSS to your sidepop styles:

[class^="successIconAccents"]{
display: none;
}

[class^="successIcon"] {
background-image: url("YOUR_LOGO_URL_HERE");
background-position: center center;
background-repeat: no-repeat;
background-size: 40%;
fill: none !important;
}

Be sure to replace the "YOUR_LOGO_URL_HERE" portion with your company's logo url.



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 support@mutinyhq.com.

Did this answer your question?