How to Customize the Inline Style
Inline allows for extensive customization, enabling you to tailor its appearance to match your website's design. Below, you’ll find detailed instructions on how to modify its styles using CSS variables and predefined options.
You can apply the following CSS variables by adding them directly to your stylesheet or by creating a new one and linking it to the <head> section of your website.
.il-editor {
--il-bezier: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--il-foreground: #2a2931;
--il-foreground-rgb: 42, 41, 49;
--il-background: #FFF;
--il-background-rgb: 255, 255, 255;
--il-primary: #9461fb;
--il-primary-rgb: 148, 97, 251;
--il-toolbar-backgroundColor: var(--il-background);
--il-toolbar-borderColor: rgba(0, 0, 0, 0.25);
--il-toolbar-color: var(--il-foreground);
--il-divider: rgba(var(--il-foreground-rgb), 0.25);
--il-exitButton-backgroundColor: var(--il-foreground);
--il-exitButton-color: var(--il-background);
--il-button-backgroundColor: var(--il-background);
--il-button-borderColor: var(--il-background);
--il-button-color: var(--il-foreground);
--il-button-hover-backgroundColor: rgba(var(--il-foreground-rgb), 0.1);
--il-button-hover-borderColor: var(--il-background);
--il-button-hover-color: var(--il-foreground);
--il-button-active-backgroundColor: rgba(var(--il-primary-rgb), 0.5);
--il-button-active-borderColor: var(--il-primary);
--il-button-active-color: var(--il-foreground);
--il-button-active-hover-backgroundColor: var(--il-button-active-backgroundColor);
--il-button-active-hover-borderColor: var(--il-button-active-borderColor);
--il-button-active-hover-color: var(--il-button-active-color);
--il-tooltip-backgroundColor: var(--il-foreground);
--il-tooltip-color: var(--il-background);
--il-input-placeholder: rgba(var(--il-foreground-rgb), 0.5);
}These CSS variables are defined in the main class .il-editor, meaning they are applied to all default instances. However, if you want to customize styles for individual instance, you can use the customClass option as shown below:
By adding new classes, you can override specific style properties. For example, to change only the primary color for each instance, use the following code:
.style1 {
--il-primary: red;
}
.style2 {
--il-primary: green;
}With this setup, the instances will use the main variables by default but apply the customized primary color for the specific styles.
You can also inspect elements in your browser’s developer tools to identify additional classes and customize them further in your CSS stylesheet.
Style Presets
Inline comes with two built-in style presets. You can easily apply them using the customClass option. Here’s an example:
| Option | Result |
|---|---|
| default | Select this text |
| il-editor--dark | Select this text |