The look and feel of your gates can be customized in the Styles area located in the left side menu. There are two tabs: one for base styles and one for media queries used in responsive design. You can write styles using CSS and SASS.
Important: Changes in the manage styles area should only be made by users proficient in CSS/SASS.
Targeting Individual Gates
In some cases, you may want to make styling changes that only apply to specific gates. To target an individual gate and customize its styling, add a section to the bottom of the style editor as shown in the examples below.
CSS Examples
/* Target a specific gate */
.gcdc-gate.gate-[GATE_ID] {
/* CSS here */
}
/* Target a specific gate - EXAMPLE */
.gcdc-gate.gate-1234-123456-123456-1234 {
background: red;
}
/* Target a specific field on a specific gate */
.gcdc-gate.gate-[GATE_ID] .gcdc-form-render>div.gcdc-form-group
.gcdc-form-group-[FIELD_KEY] {
/* CSS here */
}
/* Target a specific field on a specific gate - EXAMPLE */
.gcdc-gate.gate-1234-123456-123456-1234 .gcdc-form-render>div.gcdc-form-group.
gcdc-form-group-firstName {
font-weight: bold;
}