- Defining a custom look & feel through a CSS stylesheet
- Using different values for different users of the editor
- Best practices and risk management
- Sample Custom CSS Theme
Defining a custom look & feel through a CSS stylesheet
Using different values for different users of the editor
customCss: 'https://yourdomain.com/' + users[config.user].id + '.css'
Best practices and risk management
Custom CSS is an advanced feature, which gives the host application great flexibility to customize the UI/UX of the editor.
Please use this feature with caution.
When used properly, it is a powerful tool that can be leveraged to accomplish anything from applying custom styles with fine granularity, to changing icons, or even hiding UI elements.
When used improperly, however, it may have a negative impact on the user experience and the rendering capability of the editor’s stage. For example, styles applied to the stage via CSS will not be reflected in the preview or exported HTML.
For the best possible results, please follow these best practices:
- Avoid using generic global styles. (e.g. *, p, input, etc.) that could propagate to the editing stage.
- Use CSS selectors to select specific elements and groups (e.g. body.bee–cs h3).
- Ensure the custom CSS URL is hosted over HTTPS.
- Do not link to CSS files hosted on GitHub, or by any 3rd party.
- Never style elements on the stage, since those styles will not appear in the final HTML, and therefore lead to a confusing user experience.
Sample Custom CSS Theme