If you’re interested in styling your Outseta embeds further than what is possible with our no-code design customization tool, we’ve put together a guide that instructs on the most common ways we see our customers using CSS in their embeds to add polish and align them with the design of their brands and their sites.

In terms of where you store you CSS, you have some options.

  1. In Outseta: Go to Auth > Embeds and then click on Customize design. At the bottom of the list of design customization options you’ll see Custom CSS. Pop it in there, click Save, and we’ll load the CSS for you when we serve the embeds to your site.

  2. In a hosted CSS file: If you have somewhere you’d like to host your CSS (like Github) just reference that CSS file on any page where the embeds are being served.

  3. In your site builder’s custom code area: Builders like Webflow, Framer, Sqaurespace, etc. have a place to paste custom code. Just remember, if it’s a place designated for head code, you’ll need to wrap your CSS in style tags, like this.

    <style>

[Your code here]

</style>

A quick note about CSS specificity

From MDN

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.

Make your CSS !important

Because you're most likely adding CSS that will be competing with CSS already being applied by Outseta's code, it's a safe bet to add the !important flag after each your CSS property values. This will ensure that you override the CSS specificity rules and that your custom CSS will always apply no matter what.

It looks like this:

selector {
  property: value !important;
}

Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/important

Targeting specific embeds

Many CSS classes are used across all of our embeds, so if you want to add CSS that only affects a specific embed (i.e. the sign up embed), but not others, you can use the following classes before your element-specific classes.

/* Target the sign up and login embeds */
.o--App--authWidget /* Add more classes here */ {

}

/* Specifically target the sign up and login embed pop-ups */
.o--App--authWidget.o--Widget--popup /* Add more classes here */ {

}

/* Target the profile embed */
.o--App--profileWidget /* Add more classes here */ {

}

/* Specifically target the profile embed pop-up */
.o--App--profileWidget.o--Widget--popup /* Add more classes here */ {

}

/* Target the email list sign up embed */
.o--App--emailListWidget /* Add more classes here */ {

}

/* Specifically target the email list sign up embed */
.o--App--emailListWidget.o--Widget--popup /* Add more classes here */ {

}

/* Target the lead capture form embed */
.o--App--leadCaptureWidget /* Add more classes here */ {

}

/* Specifically target the lead capture form embed */
.o--App--leadCaptureWidget.o--Widget--popup /* Add more classes here */ {

}

Targeting global elements

Lot’s of classes are reused again and again throughout our embeds, so these are some of those classes you can use to target global elements. For example, if you wanted to change the padding across every embed type, then you could use the combo class .o--Widget--widget .o--Widget--widgetBody to define the padding and only need to declare it once on your site.

/* Target the GLOBAL EMBED WRAPPER for things like padding */
.o--Widget--widget .o--Widget--widgetBody {
  padding: 48px;
  background-color: #ffffff;
  border-radius: 8px;
  border: 2px #000000 solid;
}

/* Target the GLOBAL EMBED WRAPPER for things like background color and border radius */
.o--Widget--widget.o--Widget--displayMode-light {
  background-color: #ffffff;
  border-radius: 8px;
  border: 2px #000000 solid;
}

/* Target the GLOBAL EMBED WRAPPER when using the dark mode setting from our no-code design customization options */
.o--Widget--widget.o--Widget--displayMode-dark {
  background-color: #ffffff;
  border-radius: 8px;
  border: 2px #000000 solid;
}

/* Target ALL TEXT ELEMENTS for things like setting the font family to match your site */
.o--Widget--widget, .o--Widget--widget *:not(.material-icons), .o--Widget--widget *:-webkit-autofill::first-line, .o--Widget--widget h1, .o--Widget--widget h2, .o--Widget--widget h3, .o--Widget--widget h4, .o--Widget--widget h5, .o--Widget--widget h6 {
  font-family: General Sans, sans-serif;
}

/* Target ALL HEADING ELEMENTS (we only use h1) for things like font size and font color */
.o--Widget--widget .o--Widget--widgetBody h1 {
  font-size: 32px;
  line-height: 1.25;
  color: #000000;
  font-family: General Sans, sans-serif; /* Set the font family just for headings */
  display: none; /* Hide the heading altogether */
}

/* Target ALL INPUT LABELS for things like font size and font weight */
.o--Widget--widget .o--Widget--widgetBody label.o--Label--label {
  font-size: 12px;
  font-weight: 400;
  color: #000000;
}

/* Target ALL INPUTS for things like border and background color */
.o--Widget--widget .o--Widget--widgetBody .o--Input--input {
  border: 1px #000000 solid !important;
  background-color: #000000 !important;
  border-radius: 8px !important;
  color: #000000 !important;
}

/* Target ALL BUTTONS for things like font size and border radius */
.o--Widget--widget .o--Widget--widgetBody .o--Button--btn {
  font-size: 16px;
  border-radius: 8px !important;
  background-color: #000000;
  color: #ffffff;
  border: 2px #000000 solid
}

Targeting sign up embed-specific elements

Here are a few elements specific to the sign up embed and how to style them.

/* Target the BILLING CYCLE TOGGLE WRAPPER for things like background color and border radius */
.o--Widget--widget .o--Widget--widgetBody .o--HorizontalToggle--horizontalToggle ul {
  background-color: #000000;
  border-radius: 100px;
  overflow: hidden; /* Combine this with border-radius to make the border-radius work */
}

/* Target the BILLING CYCLE TOGGLE BUTTON for things like background color and border radius */
.o--Widget--widget .o--Widget--widgetBody .o--HorizontalToggle--horizontalToggle li a {
  background-color: #000000;
  border-radius: 8px;
}

Targeting profile embed-specific elements

Here are a few elements specific to the profile embed and how to style them.

/* If you're using Framer you'll need to set the width and height of the profile embed to 100% */
#profile-embed {
  width: 100%;
	height: 100%;
{

/* Target the SIDE NAVIGATION for things like padding and min width */
.o--Widget--widget .o--Widget--widgetBody .o--NavDesktop--navDesktop {
  padding: 24px;
  min-width: 200px;
  background-color: #000000; /* If you want to change the background color you'll need to also add the "overflow: hidden" declaration below */
}

.o--Widget--widget.o--App--profileWidget {
  overflow: hidden;
}

/* Target the MAIN CONTENT AREA for things like padding and background color */
.o--App--profileWidget .o--Widget--widgetBody .o--App--widgetBody .o--App--widgetContent {
  padding: 24px;
  background-color: #000000;
}