Introduction
The GatedContent.com administration portal includes a SASS/CSS style management area that can be used to make style customisation to your gates. All accounts include a default set of styles that will reset gate CSS attributes and apply a generic styling to them. These default styles cannot be edited directly, but can be overridden or added to using the style editor.
This feature is intended for use by developers with knowledge of CSS. If you need help using these features please contact your account manager.
Within the style editor are two tabs: "Basic Styles" and "Media Queries".
Styles added to each of these tabs will be compiled alongside the default stylesheets in the following order:
- Default base styles (not editable)
- Account specific Basic Styles
- Default responsive styles (not editable)
- Account specific Responsive Styles
You can write your styles in either CSS or SASS (Less is not supported at this time) or a mix of the two. Styles will be automatically compiled down to vanilla CSS when published. You can either nest your SASS rules to avoid long selector names, or you can target specific elements using long selectors in individual rules.
Conventions
The best way to understand which elements to target on a gate, and what specific changes to make to achieve the desired look, is to use the element inspector built into most browser to determine the necessary selectors. Note that to override a rule from the default stylesheet, you will need to use the exact same selector as the original rule, or make use of the "!important" declarator (though this second option is not recommended as it can cause problems with responsive styling and inheritance).
The following is a list of general principles utilised within GatedContent.com gate HTML markup and styles to help guide you. In general, all elements have a class name that is prefixed with 'gcdc-'.
The outer gate element wrapper will have a set of classes similar to the below:
<div class="gcdc-gate gcdc-modal-dialog gcdc-gate-culture-en"></div>
"gcdc-modal-dialog" indicates that the gate is a modal (inline gates do not have this class). "gcdc-gate-culture-en" will vary depending on the language of the gate and can be used to make language-specific customisation. Additionally, gate wrappers will also contain a class with the gate ID in them. To apply styles to specific gates only, see this knowledgebase article.
Within each main gate wrapper there will be two main elements: the form and the content element. The form generally looks like this:
<form class="gcdc-form-render gcdc-form-render-EmailOnlyGatingForm">
"gcdc-form-render-EmailOnlyGatingForm" will vary according to the form type and can be used to target specific form types. The content element will generally look like this:
<div class="gcdc-content-render"></div>
The inner content of this element will vary according to the gate type in use. Note also that the content element does not render until the gate is open - in order to see and inspect it you may need to submit the form first.
Within the form element, visible fields and content elements are generally always grouped in wrapper elements:
<div class="gcdc-form-group gcdc-form-group-emailAddress gcdc-form-group-hasvalue gcdc-form-group-valid"></div>
"gcdc-form-group-emailAddress" will vary according to the field name and can be used to target specific fields, regardless of field type. The "-hasvalue" and "-valid" classes can be used to target completed or empty fields, or fields with validation problems. Within each group, the markup will vary according to field type. You can inspect fields or various types to determine their markup and the correct classes to target in your selectors.