eWebinar widgets inherit their default colors, fonts, and border-radius from the webinar's theme, and most day-to-day tweaking happens in the widget wizard's settings panel. When that isn't enough — for example, matching a very specific brand font or hiding a particular UI element — you can override the widget with custom CSS on your page.
Never edit the markup inside the widget snippet itself. Every class name that starts with ewebinar__ is structural — removing or renaming elements will break the widget when we push updates.
Where to put the CSS
Anywhere on the page that loads the widget. The simplest pattern is a <style> block in the page's <head>, or a custom-CSS block in your site builder. Use !important on overrides where the widget's own styles win the cascade.
Common overrides
Change the font and size of all register buttons on the page
<style>
.ewebinar__RegisterButton {
font-family: 'pragmatica', sans-serif !important;
font-size: 30px !important;
}
</style>Change one specific widget's register-button size
Every widget instance has a unique ID in the snippet (the id="w…" on the root <div>). Scope your rule to that ID.
<style>
#w1627034837426 .ewebinar__RegisterButton {
font-size: 30px;
}
</style>Remove the minimize (X) button from the Pop-up widget
<style>
.ewebinar__FloatIn__Cross {
display: none;
}
</style>Change the field-label color in the Embedded form
<style>
.ewebinar__RegForm__Field__Label {
color: #fff;
}
</style>Finding class names
Every part of every widget uses a class prefixed with ewebinar__. Use your browser's DevTools to inspect the widget on your site and find the class for the element you want to style.