YesGraph’s invite widget has some default styling, which you can override in CSS. Here you’ll find a list of the available CSS classes.

Tips

  • Use specific selectors. If selecting .yes-modal-header doesn’t give the effect you want, try this instead: .yes-modal .yes-modal-header
  • Handle attributes and pseudo-selectors. If you change the background-color for .yes-default-btn, be sure to check the effect on .yes-default-btn:hover, and .yes-default-btn[disabled].

Available CSS Classes

.yes-widget-container Full widget, excluding the modal dialog where contacts are displayed.
.yes-modal Modal dialog where contacts are displayed.
.yes-search-field Search field, in the modal dialog where contacts are displayed.
.yes-default-btn All buttons, excluding the social media sharing buttons, the “copy” button for the invite link, and the “close” button for the modal dialog.
.yes-invite-link-copy-btn The “copy” button for the invite link.
.yes-contact-import-btn The contact importing button.
.yes-modal-submit-btn The “send” button inside the modal dialog where contacts are displayed.
.yes-flash-success Messages displayed temporarily to inform the user of a successful event.
.yes-flash-error Messages displayed temporarily to inform the user of a failed event.