Customization
When developing your website with the Visual Editing Frontend Library, you are able to customize the various editable elements beyond their default styles. This can be done by applying styling using the included CSS selectors, CSS variables, or even by adding your own custom classes.
Once these classes have been applied on the frontend, then they will render when using the visual editor module in the Directus Studio.
CSS Selectors
The library ships with a number of built in CSS Selectors already applied to its various elements. Styles can be applied to these by targeting them with your own custom styles.
#directus-visual-editing {
/* container div that contains all overlay rectangles */
}
.directus-visual-editing-overlay {
/* wraps the rectangle */
}
.directus-visual-editing-rect {
/* the element that will be positioned */
}
.directus-visual-editing-rect-highlight {
/* a modifier that highlights the element */
}
.directus-visual-editing-rect-hover {
/* class that applies when the original element is hovered */
}
.directus-visual-editing-rect-inner {
/* the element with the rectangle styles */
}
.directus-visual-editing-edit-button {
/* the edit button */
}
CSS Variables
The library also ships with a number of predefined CSS variables. These can be overwritten with your own custom variables if you prefer.
:root {
--directus-visual-editing--overlay--z-index: 999999999;
--directus-visual-editing--rect--border-spacing: 9px;
--directus-visual-editing--rect--border-width: 2px;
--directus-visual-editing--rect--border-color: #6644ff;
--directus-visual-editing--rect--border-radius: 6px;
--directus-visual-editing--rect-highlight--opacity: 0.333;
--directus-visual-editing--edit-btn--width: 28px;
--directus-visual-editing--edit-btn--height: 28px;
--directus-visual-editing--edit-btn--radius: 50%;
--directus-visual-editing--edit-btn--bg-color: #6644ff;
--directus-visual-editing--edit-btn--icon-bg-image: url('data:image/svg+xml,<svg>…</svg>');
--directus-visual-editing--edit-btn--icon-bg-size: 66.6%;
}
Custom Classes
Finally, custom classes can be added to all or a subset of elements defined by the library’s apply method using the customClass property. This class will be applied to the div.directus-visual-editing-overlay element within the div#directus-visual-editing container.
apply({ directusUrl, customClass: 'my-class' })
.my-class {
--directus-visual-editing--overlay--z-index: 40;
--directus-visual-editing--rect--border-spacing: 14px;
--directus-visual-editing--rect--border-width: 4px;
--directus-visual-editing--rect--border-color: red;
--directus-visual-editing--rect--border-radius: 10px;
--directus-visual-editing--rect-visible--opacity: 0.5;
--directus-visual-editing--edit-btn--width: 20px;
--directus-visual-editing--edit-btn--height: 15px;
--directus-visual-editing--edit-btn--radius: 2px;
--directus-visual-editing--edit-btn--bg-color: lightgreen;
--directus-visual-editing--edit-btn--icon-bg-image: url('data:image/svg+xml,<svg>…</svg>');
--directus-visual-editing--edit-btn--icon-bg-size: contain;
}