Home / Documentation / Version 2 / Styling / CSS Reference
CSS Reference
You are reading the documentation for Age Gate 2.x. Switch to the documentation for 3.x.
| Class | Description |
|---|---|
| .age-restriction | Added to the body element. |
| .age-gate-wrapper | A wrapper div containing all age gate content |
| .age-gate-wrapper.transition.up | Transitions the Age Gate up when it is passed successfully (JS mode only) |
| .age-gate-wrapper.transition.down | Transitions the Age Gate down when it is passed successfully (JS mode only) |
| .age-gate-wrapper.transition.left | Transitions the Age Gate left when it is passed successfully (JS mode only) |
| .age-gate-wrapper.transition.right | Transitions the Age Gate right when it is passed successfully (JS mode only) |
| .age-gate-wrapper.transition.fade | Transitions the Age Gate by fading out when it is passed successfully (JS mode only) |
| .age-gate-background (Alpha 2) | Additional element added when using background image |
| .age-gate | Main div containing Age Gate form element |
| .age-gate-form | Class added to the form element |
| .age-gate-heading | The H1 element containing the site title |
| .age-gate-heading.age-gate-logo | The H1 element if you have added a logo |
| .age-gate-subheading | Secondary heading - “Please enter your date of birth” by default |
| .age-gate-message | The message set before the age inputs |
| .age-gate-challenge | Challenge text for Yes/No version |
| .age-gate-form-elements | A UL containing the form fields |
| .age-gate-form-section | LI elements containing the label and input or select fields |
| .age-gate-label | The label for each field |
| .age-gate-input | Added to the select or input fields |
| .age-gate-remember-wrapper | Element wrapping the remember me option |
| .age-gate-remember | Remember me label |
| .age-gate-submit | The default submit button |
| .age-gate-submit-yes | The “Yes” button when using Yes/No option. |
| .age-gate-submit-no | The “No” button when using Yes/No option. |
| .age-gate-additional-information | Wrapper element for the "Additional Content" text |
| .age-gate-error | Wrapper element for the error messages (JS mode) |
| .age-gate-error-message | Paragraph showing input error |
| .age-gate-loader | Wrapper for loading icon (JS mode) |
| .age-gate-loading-icon | SVG loading icon (JS mode) |
| .age-gate-working | Class added to body element when Age Gate is making AJAX requests (JS mode) |
| .age-gate-sc-wrapper | Wrapper for Age Gate generated via shortcode |
| .age-gate-inline-failed | If rechallenge is false, a message with this class will be shown on failure |
| .age-gate-inline-failed-icon | If rechallenge is false, the icon shown in the failed message |