This is an archived page. The information on this archived page is no longer current.
Plugin appearance / CSS
This plugin is deprecated and will receive no continued development.
The two main UI components are:
- Status indicator:
- A popup box to handle ambiguous and invalid addresses:
You can customize the look and feel of the UI to match your website simply by adding some style rules to your CSS document.
Tips
Since the plugin is designed to survive in some hostile web page environments, it was necessary for us to force certain rules to preserve usability. If you experience difficulty getting your style rules to override some of our defaults, try using the !important declaration. We also strongly recommend the use of browser inspector tools, furnished with every major modern desktop web browser: Chrome, Safari, Firefox, IE, and Opera.
The CSS for our default UI is prepended to your <head> tag, which means all rules after them will cascade on top.
Table of CSS classes
| CSS class | Description |
|---|---|
.smarty-ui | A class which contains any other plugin UI elements. This is a catch-all class. |
.smarty-dots | The "loader" dots animation that shows while the address is verifying; it is hidden by default, but appears over the last input of the address. |
.smarty-popup | The containing element of the popup boxes that handle ambiguous, invalid, or missing secondary addresses. These aren't true pop-up windows; they're just div elements positioned over the form. |
.smarty-popup-header | The top part of a popup which holds the (short) message text and the close ("X") button. |
.smarty-popup-ambiguous-header | Same as .smarty-popup-header, but only for popups dealing with ambiguous addresses. |
.smarty-popup-invalid-header | Same as .smarty-popup-header, but only for popups dealing with invalid addresses. |
.smarty-popup-missing-input-header | Same as .smarty-popup-header, but only for popups dealing with addresses missing input required for verification. |
.smarty-popup-missing-secondary-header | Same as .smarty-popup-header, but only for popups dealing with addresses missing secondary numbers. Note: verifySecondary must be set to true for this header to appear. |
.smarty-popup-secondary-number-form | This form allows the user to add the apartment/unit number without having to close the smarty-popup. Only for popups dealing with addresses missing secondary numbers. Note: verifySecondary must be set to true for this form to appear. |
#smarty-secondary-number-input-box | The input box where the user enters the missing apartment/unit number. Only for popups dealing with addresses missing secondary numbers. Note: verifySecondary must be set to true for this form to appear. |
#smarty-popup-secondary-number-form-submit-button | The submit button for when the user enters in the missing apartment/unit number. Only for popups dealing with addresses missing secondary numbers. Note: verifySecondary must be set to true for this form to appear. |
.smarty-hr | The hr separator that is displayed below #smarty-popup-secondary-number-form-submit-button and above .smarty-choice-alt. Only for popups dealing with addresses missing secondary numbers. Note: verifySecondary must be set to true for this form to appear. |
.smarty-popup-typed-address | Displays the address that was typed in and sent for validation. |
.smarty-choice-list | The container for the list of ambiguous address result options in a popup window. |
.smarty-choice-alt | The container for the "Try again" (certifyMessage button) and "Use as it is" (changeMessage button). |
.smarty-choice-abort | The link(s) in a popup window which abort the verification process (the user agrees to review the address). |
.smarty-choice-override | The alternate option in a popup window for invalid or missing secondary addresses where the user certifies their address is correct. |
.smarty-tag | The container for the status indicator attached to the last input field of each mapped address. It appears as an encircled, gray check mark. Go to an example. |
.smarty-tag-grayed | The styles applied to the tag when the address is NOT in a verified state. |
.smarty-tag-green | The styles applied to the tag when the address IS in a verified state. |
.smarty-tag-check | The check mark displayed in the tag. |
.smarty-tag-text | The text (such as "Verify," "Verified," or "Undo") that appears when a tag is hovered on. |
.smarty-autocomplete | The containing element for autocomplete suggestions. |
.smarty-suggestion | An autocomplete suggestion (is an <a> tag). |
.smarty-active-suggestion | Class applied to the currently-selected .smarty-suggestion element. |
.smarty-debug-input | Class applied to the mapped input elements when debug is set to true. |
.smarty-debug-button | Class applied to the mapped submit button when debug is set to true. |
Having trouble?
Take a look at these troubleshooting tips we put together with lots of love.