Setting up your global styles

  • Updated

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

You can access your global styles by navigating to https://app.mutinyhq.com/styles or by clicking "Styles"  from the bottom left navigation menu.

Editing CSS

You can set styles for each of the components (Banner, Sidepop, Modal) individually by clicking them at the top of the editor.

The global styles editor allows you to define custom CSS in the code editor on the right hand side. You can preview how your component will look on the left.

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;
}
Change the color of your sidepop survey success CTA
 
.mutiny-sidepop .mutiny-button.mutiny-secondary > div:first-child::before {
  background-color: #AA00FF;
}
Recolor the success check mark on survey sidepop
 
[class^="successIconLayertop"] { 
  fill: #5951FF !important; 
}

[class^="successIconAccents"] { 
  stroke: #5951FF !important; 
}
Remove the success check mark on survey sidepop 
[class^="successIcon"]{
  display:none;
}
How to replace the success check mark with your logo on survey sidepop
 
[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;
}

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;
}

General Styling

What do you want to do? CSS
Add rounded corners to CTA buttons

Under /* CTA styles */ add:

Border-radius: 8px;
Add a background gradient to buttons

Under /* CTA styles */ add:

background-image: linear-gradient(to right, #5C5CFF , #8960FF);

 

FAQs

My styles appear correct in the global styles editor but they don't look the same when I preview an experience.

Sometimes CSS rules that are built into your site can overwrite the styling that is set in the global styles editor. If you see a specific style that you've set up in global styles that isn't pulling through to your experience, try adding an !important tag to the style.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.