If you’d like to use Custom CSS with your Qgiv by Bloomerang forms, we recommend you use only static and fairly reliable vendor classes. This article details the recommended vendor classes you may want to use.
Please note: The Qgiv system is not designed to support Custom CSS. If you decide to use custom code on your forms, you assume responsibility if something doesn’t work as expected.
Any use of Custom CSS should be added with caution. Since Qgiv by Bloomerang is continually releasing enhancements and new features, a complicated CSS selector (combinators) may not always be respected. When targeting an element, you should use as few combinators as possible. It is more likely a simple selector using only the recommended vendor classes will need fewer changes as the platform continues to evolve.
Contents:
- Form Classes
- Header Classes
- Controls Container Classes
- Tabs Classes
- Gift Step Amounts Classes
- Recurring Upgrade Prompts Classes
- Field Classes
- Custom Field Group Classes
- GiftAssist Classes
- Button Classes
- Text-to-Donate Classes
- Modal Classes
- Tooltip Classes
- Gift Matching Classes
- Payment Step Classes
- Events Banner Classes
- Custom Widget Classes
- Divider Classes
- Digital Wallets Classes
- Receipt Page Classes
If you would like to use customizable vendor classes, here are the ones we recommend:
Form Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-form-container | Wrapper container of form. Centers form in the center of the page with margin on left and right. | |
| qg-vendor-page__content | Interior form container. Wraps form content in its entirety. | |
| qg-vendor-form | Form content. Starts below login and ends before footer. | |
| qg-vendor-form-footer | Footer container. Height/color/padding etc. | |
| qg-vendor-powered-by-qgiv-logo | Wraps Qgiv by Bloomerang logo on footer. | |
| qg-vendor-recaptcha | Wraps reCAPTCHA. |
Header Classes
| Vendor Class | Description | What It Looks Like |
|
qg-vendor-header For a specific page header use:
|
Targets all form header containers. “Choose Your Gift" header and Form Step Progress Bar. |
|
| qg-vendor-header__title | Header title/text. Also applies to header widget. | |
| qg-vendor-header__login | Sign-in text under heading on Donor details step. Present when donor accounts are enabled. | |
| qg-vendor-progress-bar | Progress bar contained in header. Only visible on multistep Forms. | |
| qg-vendor-login | Container of text login button component in the top right of the form. |
Controls Container Classes
| Vendor Class | Description | What It Looks Like |
|
qg-vendor-controls-container For specific Page Controls Container, use:
|
All Containers of individual controls. HeaderControl, GiftStepControl, FooterControl, etc. Wrapper container of form. Centers form in the center of the page with margin on left and right. |
|
| qg-vendor-gift-step-control | Control container housing donation frequency tabs/nav and all donation amount input buttons. |
Tabs Classes
These classes target any tabs that appear on the form.
| Vendor Class | Description | What It Looks Like |
| qg-vendor-tabs | Parent container of all tabs and tab content. Gift Step Control Navigation (One-Time, Ongoing navigation tabs). | |
| qg-vendor-tab | Styles one-time and monthly tab. | |
| qg-vendor-tab-one-time | Styles one-time tab only. | |
| qg-vendor-tab-ongoing | Styles ongoing tab only. | |
| qg-vendor-tab__button | Buttons contained in tabs. | |
| qg-vendor-tabs__indicator-ui | Indicates active tab with border bottom. | |
| qg-vendor-tabs__content | Houses the credit card / bank info fields at the payment details step. |
Gift Step Amounts Button Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-gift-amounts | Collection of donation input buttons. | |
| qg-vendor-standard-amount-container | Sets the spacing around each individual Standard Amount button. | |
| qg-vendor-standard-amount-button-label | One step inside qg-vendor-standard-amount-container. Can be used for spacing. | |
| qg-vendor-standard-amount-radio | Hidden radio button used for selecting a Standard donation amount. | N/A |
| qg-vendor-standard-amount-content | Text color and weight adjustment for Standard Amount buttons. | |
| qg-vendor-other-amount-container | Sets the spacing around the Other amount button. | |
| qg-vendor-other-amount-button-label | One step inside the qg-vendor-other-amount-container. Can be used for spacing. | |
| qg-vendor-other-amount-button-input | Used to set background, text and border color for the Other amount button. | |
| qg-vendor-other-amount-radio | Hidden radio button used for selecting an Other donation amount. | N/A |
| qg-vendor-other-amount-currency-input | Placeholder, text color, and weight adjustment for currency input within the Other button. | |
| qg-vendor-amount-card-container | Wraps all of the content within the amount button container that is present when the amount has a name, description, or image. | |
| qg-vendor-amount-card-title | Name given to an amount. Text color or size/weight can be adjusted here. | |
| qg-vendor-amount-card-content | Wraps the donation amount. It is used with or without the extra card content (name, description, image). | |
| qg-vendor-amount-card-description | Description saved in the donation settings for each specific amount. Text color or size/weight can be adjusted here. | |
| qg-vendor-standard-amount-button-input | Both standard and alternate styled buttons will be affected. | |
| qg-vendor-button__input—standard | Donation amount buttons housed in gift step control. Standard buttons must be chosen in CMS. Default style. | |
| qg-vendor-button__input—alternate | Donation amount buttons housed in gift step control. Alternate buttons must be chosen in CMS. |
Recurring Upgrade Prompt Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-upgrade-nudge | Container for “Make it Monthly” suggestion button and content. | |
| qg-vendor-recurring-upgrade | Container for submission prompt that replaces payment content. | |
| qg-vendor-recurring-upgrade-text | Additional text that appears below the recurring upgrade prompt heading. | |
| qg-vendor-recurring-upgrade-buttons | Wraps the buttons on recurring upgrade UI. | |
| qg-vendor-recurring-upgrade-heading | Text for the heading of the recurring upgrade prompt. | |
| qg-vendor-recurring-upgrade-icon | Icon above the heading for the recurring upgrade prompt. | |
| qg-vendor-impact-date-container | Wraps impact statement and the recurring dates callout. |
Field Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-widget-field-group | Widget field group container. System fields in the Control Panel that are grouped together. | |
| qg-vendor-widget-field | Container for individual fields only. Example: Email. Includes spacing around the field content. | |
| qg-vendor-field-container | Container for fields, including help text and error. | |
| qg-vendor-field-container__inner | Inner content of field container, including input box but excluding accompanying description text. Field border can be styled here. | |
| qg-vendor-field-container__field | Field element housing input and its label. | |
| qg-vendor-field-input | Targets the answer input contained in the field container. Example: An email address but not the “Email” field label. | |
| qg-vendor-field-container__error-text | Targets the error message display container. | |
| qg-vendor-input-box | Container of checkbox field and label. | |
| qg-vendor-input-box__inner | Flexbox container housing input-box (checkbox). | |
| qg-vendor-input-box__icon | Checkbox area of input. Checkmark icon. | |
| qg-vendor-input-box__icon | Radio input area. | |
| qg-vendor-input-box-list | Container of group items. | |
| qg-vendor-input-box-list__label | Label for group items. | |
| qg-vendor-standard-restrictions-container | Wraps the standard restrictions container. | |
| qg-vendor-dedications | Wraps dedication fields. |
Custom Field Group Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor_field-group | Field group collection container. Example: Checkbox and accompanying phone number/email. | |
| qg-vendor_field-group__field | Individual custom field item of custom field group. |
GiftAssist Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-gift-assist | Targets the container of the GiftAssist field. |
Button Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-button | Targets submit buttons. Example: “Give” button after donation amount selection. | |
| qg-vendor-text-button | Targets text buttons: Sign in, Request an Invoice to Pay for Later, “Change” Total Gift Section. | |
| qg-vendor-form-submit | Wraps Continue/Give buttons, Back, and credit card icons. | |
| qg-vendor-form-submit-container | Wraps form submit button column. Does not target the Back button or credit card icons. | |
| qg-vendor-accepted-payment-methods | Wraps set of credit card icons. | |
| qg-vendor-back-button-container | Wraps Back button column. |
Text-to-Donate Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-text_to_donate | Container for Text-to-Donate amount. | |
|
qg_vendor_text_to_donate__amount |
Text-to-Donate content (amount). |
Modal Classes
Applies to the outer container when a modal is used.
| Vendor Class | Description | What It Looks Like |
| qg-vendor-modal | Parent modal container. | |
| qg-vendor_modal__bg | Background of modal. | |
| qg-vendor-more-info-modal | Container of more info descriptive modal. (Mobile only) Example: On click of help icon in GiftAssist. | |
| qg-vendor-modal__content | Modal content. | |
| qg-vendor-modal__buttons | Modal buttons. |
Tooltip Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-tooltip-ref | Houses the tooltip icon. Example: Question mark icon for anonymity settings. | |
| qg-vendor-tooltip | Tooltip content and container. |
Gift Matching Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-gift-matching | Matching gift control container. | |
| qg-vendor-gift-matching__header | Header text container for matching gifts. Includes icon, header text, and description. |
Payment Step Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-invoice-text | Invoice payment option container. | |
| qg-vendor-total-gift | Total gift amount container. | |
| qg-vendor-saved-payment-methods-container | Entire container heading and list. | |
| qg-vendor-stored-payment-methods | List of stored payments. | |
| qg-vendor-stored-payment-method | Individual list item. | |
| qg-vendor-toggle-payment-methods-button | Link when signed in to a Donor Account that will bring users to the New Payment view to enter a different payment. | |
| qg-vendor-recaptcha | Container wrapping the reCAPTCHA checkbox (when enabled). | |
| qg-vendor-billing-address-container | Container wrapping the Billing Address area, including the Same as Mailing Address checkbox. | |
| qg-vendor-donor-accounts-container | Wraps the UI for entering a password to create a Donor Account. | |
| qg-vendor-mailing-address | Mailing address preview display at payment details step. |
Please note: To help protect your donors' payment information and remain PCI (Payment Card Industry) compliant, custom code cannot be used to change the credit card input area of your donation forms.
Events Banner Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-events-banner | Container of the banner inviting users to upcoming events. |
Custom Widget Classes
These classes target widgets that can be added via Form Builder.
| Vendor Class | Description | What It Looks Like |
| qg-vendor-widget-text | Targets custom text widget. | |
| qg-vendor-widget-thermometer | Targets the thermometer widget container div. | |
| qg-vendor-page__callout | Parent container for social widget. | |
| qg-vendor-widget-heading | Targets section headers, such as billing details, “What’s your name?,” “Let’s Get Your Details,” etc. |
Divider Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-divider | Parent container of the <hr> that separates the form content. Can add additional spacing and hr styling. |
Digital Wallets Classes
These classes will apply to both the Payment Page AND Gift Page (Express Donate). Outside of donation forms, they can also be found on peer-to-peer registration and event registration forms.
| Vendor Class | Description | What It Looks Like |
| qg-vendor-digital-wallet-container | Contains all digital wallet buttons. Use “display:none” to hide. | |
| qg-vendor-paypal-venmo-buttons | Contains the PayPal and Venmo buttons. Use “display:none” to hide. | |
| qg-vendor-apple-pay-button | Contains the Apple Pay button. Use “display:none” to hide. | |
| qg-vendor-digital-wallet-divider | Contains the ‘or’ divider line that separates digital wallets buttons and alternative payment methods. Use “display:none” to hide. |
Receipt Page Classes
| Vendor Class | Description | What It Looks Like |
| qg-vendor-receipt-header | Wraps entire header, including icon, to the dashed line. | |
| qg-vendor-receipt-header-icon | Checkmark icon in the header. | |
| qg-vendor-receipt-header-heading | “Thank you” text in header. | |
| qg-vendor-receipt-header-subheading | “Your gift of $” text in header. | |
| qg-vendor-receipt-header-invoice-message | Callout informing donors that they will be invoiced later. | |
| qg-vendor-receipt-header-bill-dates | Starting date callout in header for a recurring gift. | |
| qg-vendor-receipt-summary | Entire Your Receipt section. | |
| qg-vendor-receipt-summary-details | Itemized gift area. |