Custom CSS/HTML for Jobs with Special Styling – Appen Success Center

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.

*Important Note: Switching back to the Graphical Editor once saving custom code in the Code Editor is disallowed - only the Code Editor can be accessed after opted to customize a job. Legacy jobs with custom code that is not readable by the Graphical Editor will not be able to access that interface either.

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"> ##[[checkboxes_here]] </div>`	Insert the following code in the CSS editor: `.check_row { columns: 50px 2; }`
Display a group of checkboxes horizontally rather than vertically	N/A	Insert the following code in the CSS editor: `.cml_row { float: left; margin-right: 10px; }`
Add borders to tables in Instructions	N/A	Insert the following code in the CSS editor: `table, tr, td { border: 1px solid black; }`
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"> <div class="span6">##element</div> <div class="span6">##element</div> </div>`	N/A
Hide '(Required)' from displaying next to a required CML field	N/A	Insert the following code in the CSS editor: `.required{ display:none; }`
Change width of text box	N/A	Insert the following code in the CSS editor: `.cml .cml_field input[type="text"]{ max-width: 150%; }`
Create a scrollable area	Wrap the scrollable area in a div: `<div style="overflow:scroll;height:300px"> </div>`	N/A
Use right-to-left text rendering in job design. NOTE: Only extends to tool text, not to data text.	Wrap elements requiring right-to-left text rendering in the following div: `<div dir="RTL">` `</div>` OR `<div dir="RTL" style="text-align:right;">` `</div>`	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%"> </div>`	Insert the following code in the CSS editor: `.no_touchy{ pointer-events; none; }`
Create space underneath an element	Wrap the section you want to add space beneath in a div: `<div class="input"> Input:{{input}} </div>`	Insert the following code in the CSS editor: `.input{ margin-bottom: 20px; }`