This section focuses on how to change the look of the SDK through CSS. The SDK comes with a CSS that you can either embed in your project or you can change the HTML classes to point to your own CSS. If you choose the latter, please remember to include CSS that is specific to the SDK to your CSS.

For example:

.image-preview,
 .camera-viewfinder,
 .cropper {
     display: block;
     margin: 8px auto;
     width: 100%;
     max-height: 70vh;
     object-fit: contain;
 }

If you wish to link the CSS to your own CSS, all you need to do is replace the classes in the html that you overrode above with the CSS class names from your CSS, example highlighted below.

function fileSystemTemplate() {
             return '<h2 class="section-title">{{PROVIDER_TITLE_FILESYSTEM}}</h2>' +
                 '<div class="info-container">' +
                 '<p class="info-item journey-state">' +
                 '<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>' +
                 '<span data-jcs-element="info__journey__state" class="info-item__value">...</span>' +
                 '</p>' +
                 '<p class="info-item journey-action">' +
                 '<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>' +
                 '<span data-jcs-element="info__journey__action" class="info-item__value">...</span>' +
                 '</p>' +
                 '<p class="info-item journey-action-attempt">' +
                 '<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>' +
                 '<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>' +
                 '</p>' +
                 '<p class="info-item journey-id">' +
                 '<span class="info-item__name">{{INFO_JOURNEY_ID}}</span>' +
                 '<span data-jcs-element="info__journey__id" class="info-item__value">...</span>' +
                 '</p>' +
                 '</div>' +
                 '<form class="file-input--container">' +
                 '<input data-jcs-element="file__input" class="file-input" id="jcs__file__input" type="file" />' +
                 '</form>' +
                 '<label data-jcs-element="file__drop__box" class="file-input--alternatives" for="jcs__file__input">' +
                 '<span class="file-input--click">{{FILESYSTEM_SELECT}}</span>' +
                 '<span data-jcs-element="file__drop__label" class="file-input--drag">{{FILESYSTEM_DROP_IMAGE}}</span>' +
                 '</label>';
         } 

If you are not sure what CSS element effects each HTML element I suggest you use developer tools in your browser to inspect the default SDK. Select the element you would like to customise and view which CSS elements are needed.