While the GiveGab Enterprise widgets default styling is intended to blend in with the parent page, there are many times when the widget may need to maintain a specific look and feel (or ‘branding’) regardless of the styling of the parent page. Enabling the snippet’s Custom Stylesheet parameter and a small amount of CSS declarations, anyone can create a self-contained, branded widget that can be distributed to any number of other websites.

As outlined in the diagram included in the form widget structural HTML elements section below, there are specific HTML containers rendered in the widget that GiveGab Enterprise recommends styling. First, it's important to understand how to access those containers through the widget namespace.

Each widget has a unique name-space that allows it to co-exist on the same parent page with other widgets. This name-space is a CSS class applied to the div.kimbiaDiv element, and can be configured in two methods:

This name-space is the most specific that can be applied. We recommend using this configuration if you expect to be placing multiple forms on the same web page, or if you plan to distribute your forms to other websites. It should be written as follows:

For example, if the campaign prefix is ‘supporttkf’ and the form suffix is ‘donate’, the name-space for that widget would be written as:

This name-space is less specific than the method described. We recommend using this configuration if you expect to be placing a single form per web page, and do not plan to distribute your forms to other websites. It should be written as follows:

For example, if the form suffix is ‘donate’, the name-space for that widget would be written as:

The snippet code of the form inserts the appropriate HTML elements required to render your form on any page of your website. It's important to understand how this structural HTML is configured in order to help you decide where to place the widget on a particular page.

Below is a diagram that shows the form widget structural HTML elements for our single page formatted forms:

The diagram above shows the nesting relationship of the containers used in rendering a form widget in HTML when using Single Page format. These containers are necessary:

*Donation forms use the div.k_sectionDonation classname.

*Registration forms use the div.k_sectionRegType classname.

Note: Spacing between individual elements is exaggerated for the purposes of display.