From f4c6da4c7aff75125c1ae98495abd318d31b1489 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 27 Aug 2025 11:20:09 +0100 Subject: [PATCH 1/7] RTE: Custom CSS properties --- .../rich-text-editor/README.md | 4 +++ .../rich-text-editor/css-properties.md | 35 +++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 16/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/css-properties.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..14aa43308e9 --- /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 appearance of the Rich Text Editor using CSS properties by defining them in your CSS files. + +For example, to set 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](https://docs.umbraco.com/umbraco-cms/fundamentals/design/stylesheets-javascript). + +If you wanted to target a specific Rich Text Editor, you can set the [stylesheet directly in the configuration](../configuration#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 [RTE component base class](https://github.com/umbraco/Umbraco-CMS/blob/release-16.2.0/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts) in the Umbraco CMS GitHub repository. + From 804efb173b537264115b71bd257fcf57ce9f6a54 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 27 Aug 2025 11:31:33 +0100 Subject: [PATCH 2/7] Vale correction: Expanded "RTE" acronym --- .../rich-text-editor/css-properties.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 14aa43308e9..10f78c20d25 100644 --- 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 @@ -31,5 +31,5 @@ The following CSS properties are available for customization: | `--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 [RTE component base class](https://github.com/umbraco/Umbraco-CMS/blob/release-16.2.0/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts) in the Umbraco CMS GitHub repository. +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/release-16.2.0/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts) in the Umbraco CMS GitHub repository. From 41cf79d965f9367f4784c44cebef11ad0a7560ac Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 27 Aug 2025 12:00:55 +0100 Subject: [PATCH 3/7] Updated SUMMARY.md with link to RTE Custom CSS Properties page. --- 16/umbraco-cms/SUMMARY.md | 1 + 1 file changed, 1 insertion(+) 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) From 3b6806b44ce19289a3a7731f925d83b6cc814316 Mon Sep 17 00:00:00 2001 From: sofietoft Date: Wed, 27 Aug 2025 13:33:28 +0200 Subject: [PATCH 4/7] Updated links --- .../rich-text-editor/css-properties.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 10f78c20d25..8289b6b9189 100644 --- 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 @@ -12,9 +12,9 @@ For example, to set minimum height of all Rich Text Editors throughout the backo } ``` -For general information on working with stylesheets and JavaScript in Umbraco, check [Stylesheets and JavaScript](https://docs.umbraco.com/umbraco-cms/fundamentals/design/stylesheets-javascript). +For general information on working with stylesheets and JavaScript in Umbraco, check [Stylesheets and JavaScript](../../../../design/stylesheets-javascript). -If you wanted to target a specific Rich Text Editor, you can set the [stylesheet directly in the configuration](../configuration#stylesheets). +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 From 677d734b6ea099f8b57b8d92eef64d9a49426d2b Mon Sep 17 00:00:00 2001 From: sofietoft Date: Wed, 27 Aug 2025 13:37:17 +0200 Subject: [PATCH 5/7] Update css-properties.md --- .../rich-text-editor/css-properties.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 8289b6b9189..3f86d730733 100644 --- 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 @@ -12,7 +12,7 @@ For example, to set minimum height of all Rich Text Editors throughout the backo } ``` -For general information on working with stylesheets and JavaScript in Umbraco, check [Stylesheets and JavaScript](../../../../design/stylesheets-javascript). +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). From 339942e8d4710ad0a84f8bcfc1b9b94a9bb5d89e Mon Sep 17 00:00:00 2001 From: sofietoft Date: Wed, 27 Aug 2025 13:52:39 +0200 Subject: [PATCH 6/7] Small change to trigger checks --- .../rich-text-editor/css-properties.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 3f86d730733..9c4a85a7cbd 100644 --- 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 @@ -2,9 +2,9 @@ Customize the appearance of the Rich Text Editor with custom CSS properties. -You can customize appearance of the Rich Text Editor using CSS properties by defining them in your CSS files. +You can customize the appearance of the Rich Text Editor using CSS properties by defining them in your CSS files. -For example, to set minimum height of all Rich Text Editors throughout the backoffice. You could use the following CSS rule: +For example, to set the minimum height of all Rich Text Editors throughout the backoffice. You could use the following CSS rule: ```css :root { From 38da1a3cf5af67a636743a4c841cfb39bcc5039b Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 27 Aug 2025 15:27:57 +0100 Subject: [PATCH 7/7] Updated RTE base class link --- .../rich-text-editor/css-properties.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 9c4a85a7cbd..ab02849b429 100644 --- 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 @@ -31,5 +31,5 @@ The following CSS properties are available for customization: | `--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/release-16.2.0/src/Umbraco.Web.UI.Client/src/packages/rte/components/rte-base.element.ts) in the Umbraco CMS GitHub repository. +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.