diff --git a/16/umbraco-cms/SUMMARY.md b/16/umbraco-cms/SUMMARY.md index 418a256d179..38388dab915 100644 --- a/16/umbraco-cms/SUMMARY.md +++ b/16/umbraco-cms/SUMMARY.md @@ -83,6 +83,7 @@ * [Dropdown](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/dropdown/README.md) * [Rich Text Editor](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md) * [Configuration](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/configuration.md) + * [Custom CSS properties](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md) * [Extensions](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/extensions.md) * [Style Menu](fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu.md) * [Login](fundamentals/backoffice/login.md) diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md index 249f3579a8d..894b2567311 100644 --- a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md +++ b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/README.md @@ -28,6 +28,10 @@ Use Blocks to define specific parts that can be added as part of the markup of t Extend the functionality of the Rich Text Editor with extensions. +## [Custom CSS properties](css-properties.md) + +Customize the appearance of the Rich Text Editor with custom CSS properties. + ## Data Type Definition Example ![Rich Text Editor - Data Type](images/rte-tiptap-datatypedefinition.png) diff --git a/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md new file mode 100644 index 00000000000..ab02849b429 --- /dev/null +++ b/16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.md @@ -0,0 +1,35 @@ +# Custom CSS properties + +Customize the appearance of the Rich Text Editor with custom CSS properties. + +You can customize the appearance of the Rich Text Editor using CSS properties by defining them in your CSS files. + +For example, to set the minimum height of all Rich Text Editors throughout the backoffice. You could use the following CSS rule: + +```css +:root { + --umb-rte-min-height: 300px; +} +``` + +For general information on working with stylesheets and JavaScript in Umbraco, check [Stylesheets and JavaScript](../../../../design/stylesheets-javascript.md). + +If you wanted to target a specific Rich Text Editor, you can set the [stylesheet directly in the configuration](configuration.md#stylesheets). + + +## Custom CSS properties reference + +The following CSS properties are available for customization: + +| CSS Property | Description | Default Value | +| ---------------------- | ------------------------------------------ | ------------- | +| `--umb-rte-width` | The width of the rich-text-editor | `unset` | +| `--umb-rte-min-width` | The minimum width of the rich-text-editor | `unset` | +| `--umb-rte-max-width` | The maximum width of the rich-text-editor | `100%` | +| `--umb-rte-height` | The height of the rich-text-editor | `100%` | +| `--umb-rte-min-height` | The minimum height of the rich-text-editor | `100%` | +| `--umb-rte-max-height` | The maximum height of the rich-text-editor | `100%` | + + +The CSS custom properties may change in future versions of Umbraco. You can always find the latest values in the [Rich Text Editor component base class](https://github.com/umbraco/Umbraco-CMS/blob/main/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts) in the Umbraco CMS GitHub repository. +