Widget CSS General Stylesheet

This General style guide contains all general classes and id's you need to style any widget. You will find template specific classes and id's for the different types of Widgets below (Callouts, Fullscreen, Sidebar). We have also collected a list of popular CSS tricks that our customers often use. 

First, here's a visual explanation of how Triggerbee's Widgets are built:

General style guide (and Popups)

/* Widget body */
#mtr-conversion.mtr-conversion-show { } 
#mtr-conversion .bpv-frame { } /* For widgets with a top border */

/* Widget background */
#mtr-conversion .bpv-background { }

/* Background styling of images */
#mtr-conversion.bpv-banner-wrapper { } 

/* Content area */
.bpv-editor { } 
#mtr-conversion .bpv-left { } /* Use this if your widget has the content area to the LEFT */
#mtr-conversion .cb-right { } /* Use this if your widget has the content area to the RIGHT */

/* Form */
#mtr-conversion form { } 

/* Text field */
#mtr-conversion input[type="text"] { } 

/* Submit button for Popups */
#mtr-conversion button { } 

/* Close button */
#mtr-conversion.bpv-mtr-close { } 

/* Arrow */ 
.arrow-holder { }

/* Left side image */
#mtr-conversion .cb-left img { }

/* Right side image */
#mtr-conversion .bpv-right div img { }

/* -------- Media Querys used for Popups -------- */
@media screen and (max-width: 630px)

@media screen and (max-width: 580px)

@media screen and (max-width: 300px)


Callouts

Same as above, but has another class for the button.

/* Callout - Submit button */
#mtr-conversion .callout-button { }

/* -------- Media Querys used for Callouts -------- */
@media screen and (max-width: 630px)

@media screen and (max-width: 580px)

@media screen and (max-width: 300px)

Full Screen

/* Fullscreen - inner content */
#mtr-conversion .mtr-inner-content { }

/* Fullscreen - Outer button row */
#mtr-conversion .mtr-btn-row { }

/* Fullscreen - Form submit button */
 #mtr-conversion form button { }

/* -------- Media Querys used for Fullscreen -------- */
@media screen and (max-width:1000px)

@media screen and (max-width:650px)

@media screen and (max-width: 500px)

@media screen and (max-height: 770px)

Sidebar

/* Sidebar - Widget body */
.bpv-banner-wrapper { }

/* Sidebar - Content + form area */
.bpv-banner-center { }
.bvp-left { } 

/* Sidebar - Form inputs */
#wz-content input[type="text"] { } /* Use this for the horizontal sidebar */
.bpv-banner-wrapper form { } /* Use this for the vertical sidebar */

/* Sidebar - Submit button */
#bpv-submit { }

/* -------- Media Querys used for Sidebar -------- */
@media screen and (max-width:767px) 

@media screen and (max-width:560px)
Did this answer your question? Thanks for the feedback! Please reach out to support@triggerbee.com if there's anything you'd like to add. There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us