Skip to main content
Skip table of contents

Appearance settings

These settings allow you to change the appearance of Cyclr when in Accounts, using LAUNCH or Marketplaces.

Due to caching within Cyclr, allow 1 minute before the changes take effect.

Application LESS Variables

The simplest way to alter the appearance of Cyclr is to change the values of LESS variables.

For example if the body-background is set to #ccc then the background of Cyclr will change to grey.

@body-background: #ccc;

Application Custom CSS

If changing the LESS variables is insufficient to provide the customization that you require you can also include you own custom CSS block, this will be included alongside the Application LESS so you can use both as required.

For example to change the rounded buttons to squares you could use

.btn-rounded {
    border-radius: 0;

Header HTML

Header HTML allows HTML & JavaScript to be injected into the header of the page.

<h1>This is a header</h1>

Footer HTML

Footer HTML allows HTML & JavaScript to be injected into the footer of the page.

<h1>This is a footer</h1>

Launch Complete HTML

Launch Complete HTML allows for the changing of HTML & JavaScript that is displayed at the end of the install process for LAUNCH and Marketplace. For more information, see Handling Launch Callback.

Connector Callback Error HTML

Connector Callback Error HTML allows for the changing of the HTML that is displayed when an error occurs when trying to authenticate a connector.

The error and error description, returned by the 3rd party, can be used within the HTML by including the {{error}} and {{error_description}} merge fields. For example:

<p>The following error has occurred: {{error}} - {{error_description}}</p>

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.