1.2 Customizing CSS

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
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
1
.el-main {
2
    display: block;
3
    flex: 1;
4
    flex-basis: auto;
5
    overflow: auto;
6
    padding: 20px;
7
    max-width: 800px;
8
    margin: auto;
9
}
10
​
11
.el-collapse-item {
12
    border: 2px solid #e5e9f2;
13
    margin-bottom: 10px;
14
    border-radius: 5px;
15
    background-color: #E5E9F2;
16
}
17
​
18
.el-collapse-item:hover {
19
    transform: scale(1.01);
20
    transition: 0.2s;
21
}
22
​
23
.connector-image {
24
    width: 68px;
25
    height: 40px;
26
    margin-right: 10px;
27
}
Copied!

1.1 Embed Integration via SSO

1.3 Proprietary connector setup

Last modified 9mo ago

Copy link

Contents

Most important CSS classes for customization

Implementing the CSS for your embed