Custom CSS codes may be used in combination with HTML to create job designs with highly customized styling. You can insert CSS codes in your job by navigating to the Design tab, click "Switch to Code Editor", and then select "Show Custom CSS/JS" to open the CSS code editor.
The table below highlights a non-exhaustive list of CSS/HTML code snippets for frequently requested special stylings.
Purpose | CML | CSS |
Display a group of checkboxes in two columns rather than one vertical column |
Create a div around the checkbox group:
<div class="check_row"> |
Insert the following code in the CSS editor:
.check_row { |
Display a group of checkboxes horizontally rather than vertically | N/A |
Insert the following code in the CSS editor:
.cml_row { |
Add borders to tables in Instructions | N/A |
Insert the following code in the CSS editor:
table, tr, td { |
Bootstrap to display any CML elements horizontally rather than vertically |
Wrap the elements you want horizontally in a div, using divs with spans defined for each element:
<div class="row row-fluid"> |
N/A |
Hide '(Required)' from displaying next to a required CML field | N/A |
Insert the following code in the CSS editor:
.required{ |
Change width of text box | N/A |
Insert the following code in the CSS editor:
.cml .cml_field |
Create a scrollable area |
Wrap the scrollable area in a div:
<div style="overflow:scroll;height:300px"> |
N/A |
Align text to the right (ex: for jobs in Arabic) |
Wrap job design in the following div:
<div dir="RTL" style="text-align:right;"> |
N/A |
Disable pre-loaded annotations from being edited in shapes tool |
Wrap a div around the shapes tool:
<div class="well no_touchy" width="100%"> |
Insert the following code in the CSS editor:
.no_touchy{ |
Create space underneath an element |
Wrap the section you want to add space beneath in a div: <div class="input"> |
Insert the following code in the CSS editor:
.input{ |