Knowledge Base

The look and feel of your gates can be customised in the manage styles area located in the left side menu. There are two tabs; one for base styles and one where your media queries will go for responsive design. You can write styles in CSS and SASS. Any changes in the manage styles are should only be made by a user who is proficient in CSS/SASS. 

In some cases you may want to make styling changes that only apply to specific gates. To target an individual gate and customise its styling, add a section to the bottom of the style editor as shown in the example below.

/* 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;
}