Appen Success Center
Appen Success Center
Breadcrumbs

Custom CSS/HTML for Jobs with Special Styling

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.

image-20260616-101323.png

 

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 once it has been used 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;
}