Locoia
Search…
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!
Last modified 4mo ago