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;
![](../__attachments/139526194/settings-appearance-less.png?inst-v=268bc2ea-3fb4-4797-8f00-a1f07c830ce7)
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;
}
![](../__attachments/139526194/settings-appearance-css.png?inst-v=268bc2ea-3fb4-4797-8f00-a1f07c830ce7)
Header HTML
Header HTML allows HTML & JavaScript to be injected into the header of the page.
<h1>This is a header</h1>
![](../__attachments/139526194/settings-appearance-header-html.png?inst-v=268bc2ea-3fb4-4797-8f00-a1f07c830ce7)
Footer HTML
Footer HTML allows HTML & JavaScript to be injected into the footer of the page.
<h1>This is a footer</h1>
![](../__attachments/139526194/settings-appearance-footer-html.png?inst-v=268bc2ea-3fb4-4797-8f00-a1f07c830ce7)
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>