Customizing Content Through CSS

Style Userpilot with Custom CSS

Main Container #userpilotContent

The element that wraps the experience.

Bar Progress .userpilot-progressive-bar-progress

A CSS progress bar that's updated as users complete each step.

Ball Progress .userpilot-progressive-ball-progress

A CSS progress ball that's updated as users complete each step.

Content #userpilotContent .userpilot-slide

The main container for all tools content.

Buttons #userpilotContent .userpilot-slide .userpilot-btn

Styling the tools buttons.

Backdrop #userpilotContent .userpilot-backdrop

The element that covers the screen behind a tool.

Example CSS

/* Adjust Userpilot progress-------------- */

/* Adjust Userpilot bar progress  */

.userpilot-progressive-bar-progress {
    background: #2196F3;
    height: 5px;
}

.userpilot-progressive-bar-progress span {
    background: white;
    height: 5px;
}

/* Adjust Userpilot ball progress  */

.userpilot-progressive-ball-progress span {
    border: none;
    background: whitesmoke;
}

.userpilot-progressive-ball-progress span.userpilot-ball-selected {
    background: #2196F3;
}

/* Adjust links-------------- */

.userpilot-slide a {
    color: #2196F3;
    text-decoration: underline;
    content: "";
}

/* Adjust UI pattern dismiss-------------- */

/* Adjust X button */

.userpilot-slide .up-x-to-close path {
    /* [ X button CSS ] */
}

/* Adjust skip tips */

.userpilot-skiptips-btn span {
    opacity: 1;
}

/* Adjust bar progress buttons-------------- */

.userpilot-progressive-action[uppt="bar"] {
    /* [ Set the style for the progress bar buttons ] */
}

.userpilot-progressive-action[uppt="bar"][uppa="back"] {
  /* [ Set the style for the progress bar back button ] */
}

/* Adjusting tooltips & hotspots design-------------- */

/* Adjusting tooltips & driven actions design */

.userpilot-node-tooltip .userpilot-slide {
  /* [ Set the style for tooltips & driven actions ] */
}

/* Adjusting hotspots design */

.userpilot-node-hotspot .userpilot-slide {
  /* [ Set the style for hotspots ] */
}

/* Adjusting modals and slideouts design--------------  */

/* Adjusting modals design */

.userpilot-node-modal .userpilot-slide {
    top: 22%; // set the modal to center of screen.
}

/** Adjusting slideouts design */

.userpilot-node-slideout .userpilot-slide {
  /* [ Set the style for slideouts ] */
}