Overview
- Institutions can easily change the default values displayed in the individual CSS Form Variables and/or make changes in the Advanced CSS editor if familiar with CSS coding language.
What is CSS?
Inquiry Form CSS Guidelines
To customize the appearance of your Inquiry Form, the CSS Variables allow you to easily change the color scheme and font family used on each indivdual inquiry form, while the Advanced CSS Editor gives you complete control over the underlying CSS code that styles each form.
- When embedding an inquiry form on a web page, the CSS form styling will only affect the form itself and will not affect the web page on which the form is embedded.
- Also, CSS used on the web page where the form is embedded will not affect the embedded inquiry form styling.
Inquiry Form CSS Variables
When selecting the Styling tab, a list of CSS form variables display above the Advanced section.
These variables can either be left "as-is" with the default value (gray scale) settings, or customized to different color/font settings that represent your institution and easily enhance the individual inquiry form presentation.
The available inquiry form CSS variables are as follows:
- The form's Background Color
- The form's Input Text Color
- The form's Submit Button Color
- The form's Font Family
- The form's Question Label Text Color
- The form's Input Border Color
- The form's Submit Button Text Color
Default Styling Settings
By default, each form is pre-defined with default styling settings that are in grayscale colors, eg. black, grey, and white.
- If a default color does not display on the UI that is because the default selection is white, matching the field background color.
Styling Settings Preview
On a new inquiry form, or in Edit Mode on an Inactive inquiry form, both the Form Details tab and Form Styling tab include an inquiry form preview that updates real time as optional styling selections are made, even before the selections are saved.
Once the styling selections are saved, the form will display an Info section and a Preview of the most recently saved styling selections.
- Styling selections may only be changed while the form is Inactive, as Active forms cannot be edited.
- In addition, in the current system design, there is no way to delete a form or edit a form once it is activated.
Advanced CSS Coding
The Advanced section is intended for institutional staff that are already comfortable with CSS coding.
- Advanced CSS coding can change anything and everything on a form such as change the form's border-widths, shadows, layout, fonts, add images, make a form input flash if it is invalid etc.
- The CSS code that is included in the Advanced section is basically the entire stylesheet that is used to generate a specific inquiry form.
- If the form styling is using a CSS Variable selection, the advanced styling option will display var(x) which means that when the form is shared, it will use the var selection made above the Advanced section.
border: 1px solid var(--sse-form-input-border-color); /* Or */ color: var(--sse-form-input-label-color);
- By default, the CSS variables display in the Advanced section so that when the form is generated, selections made above the advanced section in the CSS variables are used.
-
- When we see a variable (var) used in the Advanced CSS code, this means that whatever is displayed in the CSS Variable selection above the advanced section is used.
-
- Updating the form styling can be done by changing the default CSS Variable settings (form background color, input text color etc.) from within the advanced section, which will update the values displayed in the CSS variables above the advanced section, or by updating the CSS code directly within the Advanced section.
For example, when we see the following in the Advanced section, the form will use what is set in the CSS Variable:
var(--sse-form-input-border-color)
border: 1px solid #000000
border: 1px solid #FFFFFF
When the Advanced CSS section is edited and does not use a CSS variable (var) selection, the form can be styled by entering a color code (#FFFFFF) or a solid color name in the advanced section. The following example sets the border to the color red:
border 1px solid red
- Styling selections entered into the CSS Variables are used by default in the Advanced CSS coding form styling.
- If the CSS variable (var) is removed from the Advanced section, then it does not matter what is set in the CSS Variable listed above the Advanced section, since it will not be used.
- When var is used in the Advanced CSS code, the form will use the value that is set in the CSS Variable selections made above the Advanced section.
- If the Advanced CSS code does not include/use a CSS Variable (var), then the selection made in the CSS variable box will not be used on the form.
CSS Structure
- BEM defines each input type as a separate block that includes the input field itself and the input field's type.
- For more information about BEM (Block Element Modifier) naming, click here.
BEM Examples
A First Name input field will include the following classes:.input-field and .first-name-field
When an input field is required, it will include the --required modifier.
For example, a required First Name input field will include the following three classes:
.input-field, .first-name-field and .input-field--required
If an input field is invalid it will include the --invalid modifier. For example, when a required field is left blank, it will be --invalid.
- To note an invalid entry, the input-field blocks will have the --invalid modifier when the field is invalid.
Input fields such as an address that include many data entries and selections will be wrapped within a div using the class .address-field.
- Styliing an address will affect all address fields as there is no way to change/separate what is included within a div.
For example:
<div class="address-field"> <div class="input-field address-line1-field"> <!-- ... --> <div> <div class="input-field address-line2-field"> <!-- ... --> </div> </div>
Type-aheads or Selects
- These are dropdown questions where the user is making a selection, such as selecting a certain high school or program.
- These type of data elements have generated classes and it is recommended to avoid heavy custom styling of these specific elements.
Normalization
Normalization is used to ensure that the inquiry form appears the same on all browsers.
-
The beginning of the CSS is pulled from modern-normalize with a few additions to ensure that the inquiry form appears the same on all browsers. This section ends with an
END NORMALIZEcomment. - We highly recommend leaving this part of the CSS as is in order to ensure that your inquiry form is consistent across different browser types.
- We recommend not changing anything above the
END NORMALIZEcomment. The comment itself is a marker noting the end of the normalize code.