3.2 Customizing CSS

Using custom styles in iframe

Most important CSS classes for customization

• el-main - This is the main element, wrapping everything inside of it, you can here for example change the max-width parameter

• el-collapse-item - This is the wrapper around groups

• connector-image - The highlighted connectors have this class

• el-button--primary - This is the primary button

• el-form-item__label - This is the label inside the Connector Auth form

• auth-connector-img - This is the Connector Auth image above the Connector Auth form

• docs__container - This is the container that contains the external and internal docs

You are of course not limited to these classes. You can prepare your customization in the best way by opening the embed without any customization first and then changing specific classes in your web browser's inspector.

Implementing the CSS for your Embed

Please provide your custom CSS to our support team and we will implement it for you. The File should be a .css file and e.g. look similar to this file

CSS

.el-main {
    display: block;
    flex: 1;
    flex-basis: auto;
    overflow: auto;
    padding: 20px;
    max-width: 800px;
    margin: auto;
}

.el-collapse-item {
    border: 2px solid #e5e9f2;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #E5E9F2;
}

.el-collapse-item:hover {
    transform: scale(1.01);
    transition: 0.2s;
}

.connector-image {
    width: 68px;
    height: 40px;
    margin-right: 10px;
}