Customization

Similar to the Cloudify Management Console white labeling options, the Cloudify Composer provides basic layout customization options. The main supported features are:

Setting a custom logo
Setting the main application color
Styling the HTML elements
Changing text labels

When introducing the changes described on this page, please note:

To see the applied changes you need to restart the Cloudify Composer service on the Cloudify Manager machine by executing:
```
sudo service cloudify-composer.service restart
```
In a Cloudify Manager Cluster environment, these changes should be applied to every Cloudify Manager in the cluster.

Theme setup

Cloudify Composer provides a way to introduce basic theme changes (eg. logo URL, main color, header text color) through user configuration file residing on the Cloudify Manager.

To setup a theme, create userConfig.json file in the /opt/cloudify-composer/backend/dev directory.

All available configuration parameters are described in /opt/cloudify-composer/backend/conf/README.md file.

Default values of the configuration parameters can be found in /opt/cloudify-composer/backend/conf/userConfig.json file.

An example file content may look like:

    {
        "theme": {
            "logoUrl": "/composer/backend/userData/static/logo.png",
            "mainColor": "grey"
        }
    }

In the example above, logo.png should be placed in /opt/cloudify-composer/backend/dev/static directory.

Style changes

You can change the styling of HTML elements by supplying custom CSS file.

To do that create /opt/cloudify-composer/backend/dev/style.css file.

An example file content may look like:

    .ui.primary.button {
        background-color: grey !important;
    }

You can add static files (eg. fonts, images) to /opt/cloudify-composer/backend/dev/static directory. For example, if you add image.png file and would like to make it a background image, you can modify your style.css this way:

    .ui.primary.button {
        background-image: url("/composer/backend/userData/static/image.png");
    }

Labels overrides

You can override a number of texts and labels used in Cloudify Composer by supplying a file containing replacements for default texts or labels.

To do that create /opt/cloudify-composer/backend/dev/overrides.json file.

An example file content may look like:

    {
        "composer" : {
            "title": "Cloudify Composer",
            "header": {
                "documentationLink": "http://docs.mycompany.com/composer"
            }
        }
    }