Custom styling with CSS
You can use your own Cascading Style Sheets (CSS) code to augment Dropboard's styling to get that perfect match to your branding.
These are advanced concepts that may require a software developer. 😬
IMPORTANT NOTE:
This class guide is offered as a courtesy. We will avoid removing classes or reworking how they are used, but our HTML structure may not be permanent.
Setting custom CSS
In your Dropboard or Portal designer, under the "Job Openings," "Application Form," and "Application confirmation" sections, you can expand the "Advanced" section and set Custom CSS here:
Things to know
- All customizable elements will have a class with the prefix:
dropboard-. - Each UI has a top-level class to help differentiate your selectors between the various pieces of the Dropboard UI. It's recommended to always prefix your styles with the UI class for that piece. As an example:
.dropboard-job-openings .dropboard-job-title {
font-style: italic;
}
- Font imports within your custom CSS may not work for Dropboard embeds due to how Dropboard is sandboxed within your site. Solve this by importing the fonts at the page-level and then referencing those fonts within your custom CSS.
UI listings
Job openings
This is the listing of job openings that candidates can apply to.
| Element | CSS class |
|---|---|
| Top-level class | dropboard-job-openings |
| No jobs open | dropboard-no-results |
| No results from a user search or filtering | dropboard-no-filtered-results |
| Search and filter bar container | dropboard-search-bar-cont |
| → Inner container | dropboard-search-bar |
| List of locations to filter | dropboard-location-filter |
| Job search autocomplete container | dropboard-search-autocomplete-cont |
| → Inner container | dropboard-search-autocomplete |
| → Dropdown of autocomplete results | dropboard-search-autocomplete-dropdown |
| Jobs are loading | dropboard-job-loader |
| Jobs list | dropboard-job-list |
| Job | dropboard-job |
| Promoted job label | dropboard-promoted-job-label |
| Header area of job | dropboard-job-header |
| Title | dropboard-job-title |
| Apply button when job is collapsed | dropboard-job-apply |
| Apply button when job is expanded | dropboard-job-apply-expanded |
| Main area of job | dropboard-job-body |
| Various short information about jobs | dropboard-job-attributes |
| → Logo of company/client | dropboard-client-logo |
| → Name of company/client | dropboard-client-name |
| → When the job is posted and/or closes | dropboard-open-close-date |
| → The compensation offered | dropboard-compensation |
| → The location summary for this job | dropboard-location |
| The full job description | dropboard-job-description |
| Responsibilities bullet points section | dropboard-responsibilities |
| Qualificiations bullet points section | dropboard-qualifications |
| User-defined information like perks, benefits, etc. | dropboard-custom-section |
| The element that expands the job description | dropboard-expand |
| The element that collapses the job description | dropboard-collapse |
| The container when there are multiple pages of jobs | dropboard-pager |
| → Previous page element | dropboard-previous |
| → What page the user is on | dropboard-page |
| → Next page element | dropboard-next |
Apply panel
This is the panel that pops up when a candidate wishes to apply to a job.
| Top-level class | dropboard-apply-panel |
| The title bar of the panel | dropboard-apply-panel-header |
| The title itself | dropboard-title |
| The containing body of the panel | dropboard-panel-body |
| → An inner wrapper | dropboard-panel-body-inner |
| Element shown as the panel is in a loading state | dropboard-panel-loading |
Apply panel form
This is the initial form that pops up in a panel when a candidate wishes to apply to a job.
| Element | CSS class |
|---|---|
| Top-level class | dropboard-apply-form |
| The container for collecting first and last name | dropboard-name |
| The container for collecting email address | dropboard-email |
| The field that collects the resume/CV | dropboard-resume |
| The field that collects the cover letter/intro | dropboard-cover-letter |
| A custom field on your form | dropboard-custom-field |
| → A specific field reference by the ID you assigned | dropboard-custom-field-[FIELD ID] |
| The container of the submit button | dropboard-submit-cont |
| The submit button | dropboard-submit |
| The area displaying customizable disclaimer text | dropboard-disclaimer |
| A container for disclaimer links you can set | dropboard-disclaimer-links-cont |
| Container for a loading element during custom field file-uploading | dropboard-uploading-cont |
Apply panel confirmation
This is the screen the candidate sees after a successful submission.
| Element | CSS class |
|---|---|
| Top-level class | dropboard-apply-confirmation |
| A container for the thank you title | dropboard-title-cont |
| → The title | dropboard-title |
| The thank you message | dropboard-message |