diff --git a/10/umbraco-cms/tutorials/multilanguage-setup.md b/10/umbraco-cms/tutorials/multilanguage-setup.md
index ffa5b03755d..4fcd08bfaa3 100644
--- a/10/umbraco-cms/tutorials/multilanguage-setup.md
+++ b/10/umbraco-cms/tutorials/multilanguage-setup.md
@@ -36,7 +36,7 @@ We can add multiple languages depending on our website requirements. In the prev
2. For English Variant:
* Select **English (United States)** from the drop-down list.
* Click **Save**.
-3. For German Variant:
+3. For German Variant:
* Select **German** from the drop-down list.
* Toggle **Mandatory Language** option.
@@ -51,11 +51,16 @@ To change the default language of a website:
1. Go to **Languages** in the **Settings** tree.
2. Select the language you want to set as the new default language.
-3. Toggle **Default Language**.\\
+3. Toggle **Default Language**.
+
4. Click **Save**.
+{% hint style="info" %}
+To change the default backoffice language, update the `Umbraco:CMS:Global:DefaultUILanguage` value in the `appsettings.json` file. For more information, see the [Global Settings](../reference/configuration/globalsettings.md) article.
+{% endhint %}
+
### Changing the Default Backoffice Language of a User
To change the default language of a User:
@@ -115,8 +120,7 @@ To add culture and hostnames, follow these steps:
1. Go to the **Content** tab.
2. Right-click on the **...** dots next to the **Contact Us** content node and select **Culture and Hostnames...**
-3. In the **Culture and Hostnames...** pane, let's add a domain for each hostname, like it's done here:\
- \\
+3. In the **Culture and Hostnames...** pane, let's add a domain for each hostname, like it's done here:
4. Click **Save**.
@@ -133,8 +137,7 @@ To use side-by-side mode for editing content at the same time, follow these step
3. Click **Open in Splitview**. In this splitview, we can see the content node with each language side by side.
- \
- You may notice that the **Address** and other fields are greyed out - this is because we haven't checked the **Allow vary by culture** checkbox.\\
+ You may notice that the **Address** and other fields are greyed out - this is because we haven't checked the **Allow vary by culture** checkbox.
@@ -216,10 +219,10 @@ To view the language variant on the browser, follow these steps:
For viewing purposes, I've added a stylesheet to my website. The final result should look similar to the image below:
-**Danish Version:**\\
+**Danish Version:**
-**German Version:**\\
+**German Version:**
diff --git a/12/umbraco-cms/tutorials/multilanguage-setup.md b/12/umbraco-cms/tutorials/multilanguage-setup.md
index 97828aeac0e..4bb7b99ee26 100644
--- a/12/umbraco-cms/tutorials/multilanguage-setup.md
+++ b/12/umbraco-cms/tutorials/multilanguage-setup.md
@@ -34,7 +34,7 @@ We can add multiple languages depending on our website requirements. In the prev
2. For English Variant:
* Select **English (United States)** from the drop-down list.
* Click **Save**.
-3. For German Variant:
+3. For German Variant:
* Select **German** from the drop-down list.
* Toggle **Mandatory Language** option.
@@ -49,11 +49,16 @@ To change the default language of a website:
1. Go to **Languages** in the **Settings** tree.
2. Select the language you want to set as the new default language.
-3. Toggle **Default Language**.
+3. Toggle **Default Language**.
+
4. Click **Save**.
+{% hint style="info" %}
+To change the default backoffice language, update the `Umbraco:CMS:Global:DefaultUILanguage` value in the `appsettings.json` file. For more information, see the [Global Settings](../reference/configuration/globalsettings.md) article.
+{% endhint %}
+
### Changing the Default Backoffice Language of a User
To change the default language of a User:
@@ -114,11 +119,11 @@ To add culture and hostnames, follow these steps:
1. Go to the **Content** tab.
2. Right-click on the **...** dots next to the **Contact Us** content node and select **Culture and Hostnames...**.
-3\. In the **Culture and Hostnames...**. pane, let's add a domain for each hostname, like it's done here:
+3. In the **Culture and Hostnames...**. pane, let's add a domain for each hostname, like it's done here:
-4\. Click **Save**.
+4. Click **Save**.
## Using Side-by-Side Mode for Editing Content
@@ -214,10 +219,10 @@ To view the language variant on the browser, follow these steps:
For viewing purposes, I've added a stylesheet to my website. The final result should look similar to the image below:
-Danish Version:\\
+Danish Version:
-German Version:\\
+German Version:
diff --git a/13/umbraco-cms/tutorials/multilanguage-setup.md b/13/umbraco-cms/tutorials/multilanguage-setup.md
index 97828aeac0e..52120f0fd27 100644
--- a/13/umbraco-cms/tutorials/multilanguage-setup.md
+++ b/13/umbraco-cms/tutorials/multilanguage-setup.md
@@ -15,13 +15,13 @@ To add a new language, follow these steps:
1. Go to the **Settings** section.
2. Go to **Languages** in the **Settings** tree. The **Languages** window opens in the editor.
3. Click **Add Language**. The **Add Language** window opens in the editor.
-4. Select a **Language** from the dropdown list. In this tutorial, we will pick _Danish_.
+4. Select a **Language** from the dropdown list. In this tutorial, we will pick _Danish_.
5. In **Settings**, select the following options to set the new language as the:
* Default language for your site, toggle **Default Language**.
* Mandatory language for your site, toggle **Mandatory Language**.
-6. Select a **Fallback Language** from the drop-down list.
+6. Select a **Fallback Language** from the drop-down list.
7. Click **Save**.
@@ -34,7 +34,7 @@ We can add multiple languages depending on our website requirements. In the prev
2. For English Variant:
* Select **English (United States)** from the drop-down list.
* Click **Save**.
-3. For German Variant:
+3. For German Variant:
* Select **German** from the drop-down list.
* Toggle **Mandatory Language** option.
@@ -49,18 +49,23 @@ To change the default language of a website:
1. Go to **Languages** in the **Settings** tree.
2. Select the language you want to set as the new default language.
-3. Toggle **Default Language**.
+3. Toggle **Default Language**.
+
4. Click **Save**.
+{% hint style="info" %}
+To change the default backoffice language, update the `Umbraco:CMS:Global:DefaultUILanguage` value in the `appsettings.json` file. For more information, see the [Global Settings](../reference/configuration/globalsettings.md) article.
+{% endhint %}
+
### Changing the Default Backoffice Language of a User
To change the default language of a User:
1. Go to **Users** section.
2. Select the user whose backoffice language you wish to change.
-3. Select the new language from the **Language** drop-down list.
+3. Select the new language from the **Language** drop-down list.
4. Click **Save**.
@@ -69,13 +74,13 @@ To change the default language of a User:
For this tutorial, we will create the following document types:
-* Home Page
+* Home Page
-* Blogs
+* Blogs
-* Contact Us
+* Contact Us
@@ -85,12 +90,12 @@ To enable language variants on Document Types, follow these steps:
1. Go to the **Settings** tab.
2. Select **Contact Us** from the **Document Types** folder.
-3. Go to the **Permissions** tab and toggle **Allow vary by culture**
+3. Go to the **Permissions** tab and toggle **Allow vary by culture**
4. Click **Save**.
5. Go to the **Design** tab.
-6. Click on the gear icon ⚙ of the **Page Title** and toggle **Allow vary by culture**.
+6. Click on the gear icon ⚙ of the **Page Title** and toggle **Allow vary by culture**.
7. Click **Submit**.
@@ -100,10 +105,10 @@ To enable language variants on Document Types, follow these steps:
When you return to your content node you will notice two things:
-1. At the top of the content tree, there is a dropdown to view the content tree in the language of your choice.
+1. At the top of the content tree, there is a dropdown to view the content tree in the language of your choice.
-2. To the right of the content name, there is now a dropdown where you can select a language. You can also open a split view so you can see two languages at once.
+2. To the right of the content name, there is now a dropdown where you can select a language. You can also open a split view so you can see two languages at once.
@@ -114,23 +119,23 @@ To add culture and hostnames, follow these steps:
1. Go to the **Content** tab.
2. Right-click on the **...** dots next to the **Contact Us** content node and select **Culture and Hostnames...**.
-3\. In the **Culture and Hostnames...**. pane, let's add a domain for each hostname, like it's done here:
+3. In the **Culture and Hostnames...**. pane, let's add a domain for each hostname, like it's done here:
-
+
-4\. Click **Save**.
+4. Click **Save**.
## Using Side-by-Side Mode for Editing Content
To use side-by-side mode for editing content at the same time, follow these steps:
-1. Go to the **Contact Us** node. You will find a language dropdown next to the title at the top:
+1. Go to the **Contact Us** node. You will find a language dropdown next to the title at the top:
-2. Click the dropdown and hover over the new language. You will see an **Open in Splitview** option will appear.
+2. Click the dropdown and hover over the new language. You will see an **Open in Splitview** option will appear.
-3. Click **Open in Splitview**. In this splitview, we can see the content node with each language side by side.
+3. Click **Open in Splitview**. In this splitview, we can see the content node with each language side by side.
You may notice that the **Address** and other fields are greyed out - this is because we haven't checked the **Allow vary by culture** checkbox.
@@ -144,7 +149,7 @@ To add language variants to the content.
1. Go to the **Contact Us** node.
2. Enter the **Name** for your content node and the **Page Title** in the new language.
-3. Click **Save and Publish**. The **Ready to Publish** window opens providing the option to publish in one or more languages.
+3. Click **Save and Publish**. The **Ready to Publish** window opens providing the option to publish in one or more languages.
4. You can select either one or multiple languages and click **Publish**.
@@ -178,7 +183,7 @@ To create dictionary items:
1. Go to the **Translation** section.
2. Right-click **Dictionary** in the **Translation** tree and select **Create**.
3. Enter a **Name** for the dictionary item. Let's say **Address** and click **Create**.
-4. Enter the different language versions for the dictionary item.
+4. Enter the different language versions for the dictionary item.
5. Click **Save**.
@@ -206,7 +211,7 @@ To view the language variant on the browser, follow these steps:
1. Go to the **Content** tab.
2. Select your new language from the language dropdown above your content tree.
3. Select the **Contact Us** node and go to the **Info** tab.
-4. You will notice the links with the new language domain added to it. If it's not there, you might need to refresh the page.
+4. You will notice the links with the new language domain added to it. If it's not there, you might need to refresh the page.
5. Click on the link to view the new language varied node in the browser.
@@ -214,10 +219,10 @@ To view the language variant on the browser, follow these steps:
For viewing purposes, I've added a stylesheet to my website. The final result should look similar to the image below:
-Danish Version:\\
+Danish Version:
-German Version:\\
+German Version:
diff --git a/14/umbraco-cms/tutorials/images/Language-variants-v14.png b/14/umbraco-cms/tutorials/images/Language-variants-v14.png
new file mode 100644
index 00000000000..75d92ff9423
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/Language-variants-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/Variant-content-tree-v14.png b/14/umbraco-cms/tutorials/images/Variant-content-tree-v14.png
new file mode 100644
index 00000000000..b672febad2b
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/Variant-content-tree-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/add-dictionary-item-v14.png b/14/umbraco-cms/tutorials/images/add-dictionary-item-v14.png
new file mode 100644
index 00000000000..24cdb0d6265
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/add-dictionary-item-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/adding-danish-language-v14.png b/14/umbraco-cms/tutorials/images/adding-danish-language-v14.png
new file mode 100644
index 00000000000..c1acbe5dd22
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/adding-danish-language-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/allow-vary-by-culture-v14.png b/14/umbraco-cms/tutorials/images/allow-vary-by-culture-v14.png
new file mode 100644
index 00000000000..49511e8a333
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/allow-vary-by-culture-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/allow-varying-property-editor-v14.png b/14/umbraco-cms/tutorials/images/allow-varying-property-editor-v14.png
new file mode 100644
index 00000000000..1f39c8364e9
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/allow-varying-property-editor-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/change-backoffice-language-v14.png b/14/umbraco-cms/tutorials/images/change-backoffice-language-v14.png
new file mode 100644
index 00000000000..70cecf2c803
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/change-backoffice-language-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/change-default-language-v14.png b/14/umbraco-cms/tutorials/images/change-default-language-v14.png
new file mode 100644
index 00000000000..ef1e55eafc0
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/change-default-language-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/culture-and-hostnames-v14.png b/14/umbraco-cms/tutorials/images/culture-and-hostnames-v14.png
new file mode 100644
index 00000000000..8c133222cbc
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/culture-and-hostnames-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/fallback-language-v14.png b/14/umbraco-cms/tutorials/images/fallback-language-v14.png
new file mode 100644
index 00000000000..8b3f86586d5
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/fallback-language-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/language-dropdown-v14.png b/14/umbraco-cms/tutorials/images/language-dropdown-v14.png
new file mode 100644
index 00000000000..6ed34b8bf5d
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/language-dropdown-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/publishing-variant-content-v14.png b/14/umbraco-cms/tutorials/images/publishing-variant-content-v14.png
new file mode 100644
index 00000000000..4aa5addf5b6
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/publishing-variant-content-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/variant-dropdown-v14.png b/14/umbraco-cms/tutorials/images/variant-dropdown-v14.png
new file mode 100644
index 00000000000..f3b4aee07e8
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/variant-dropdown-v14.png differ
diff --git a/14/umbraco-cms/tutorials/images/viewing-langvariant-browser-v14.png b/14/umbraco-cms/tutorials/images/viewing-langvariant-browser-v14.png
new file mode 100644
index 00000000000..64750be18f0
Binary files /dev/null and b/14/umbraco-cms/tutorials/images/viewing-langvariant-browser-v14.png differ
diff --git a/14/umbraco-cms/tutorials/multilanguage-setup.md b/14/umbraco-cms/tutorials/multilanguage-setup.md
index 97828aeac0e..4aa1a944ab5 100644
--- a/14/umbraco-cms/tutorials/multilanguage-setup.md
+++ b/14/umbraco-cms/tutorials/multilanguage-setup.md
@@ -13,69 +13,79 @@ This tutorial explains how to set-up a basic multilingual website.
To add a new language, follow these steps:
1. Go to the **Settings** section.
-2. Go to **Languages** in the **Settings** tree. The **Languages** window opens in the editor.
-3. Click **Add Language**. The **Add Language** window opens in the editor.
-4. Select a **Language** from the dropdown list. In this tutorial, we will pick _Danish_.
+2. Go to **Languages** in the **Structure** tree.
+3. Click **Create**.
+4. Select a **Language** from the dropdown list. In this tutorial, we will pick _Danish_.
- 
+ 
5. In **Settings**, select the following options to set the new language as the:
* Default language for your site, toggle **Default Language**.
* Mandatory language for your site, toggle **Mandatory Language**.
-6. Select a **Fallback Language** from the drop-down list.
+6. Select a **Fallback Language**.
- 
+ 
7. Click **Save**.
### Adding Multiple Languages
We can add multiple languages depending on our website requirements. In the previous step, we have already set Danish as our default language. We will now set-up English and German as our variants for this tutorial.
-1. Go to **Languages** in the **Settings** tree and click **Add Language**.
-2. For English Variant:
+1. Go to the **Settings** section.
+2. Go to **Languages** in the **Structure** tree.
+3. Click **Create**.
+4. For English Variant:
* Select **English (United States)** from the drop-down list.
* Click **Save**.
-3. For German Variant:
+5. For German Variant:
* Select **German** from the drop-down list.
* Toggle **Mandatory Language** option.
* Select **Danish** from the **Fallback Language** drop-down list.
+ * Click **Submit**.
* Click **Save**.
- 
+ 
### Changing the Default Language of a Website
To change the default language of a website:
-1. Go to **Languages** in the **Settings** tree.
-2. Select the language you want to set as the new default language.
-3. Toggle **Default Language**.
+1. Go to the **Settings** section.
+2. Go to **Languages** in the **Structure** tree.
+3. Select the language you want to set as the new default language.
+4. Toggle **Default Language**.
-
-4. Click **Save**.
+ 
+
+5. Click **Save**.
+
+{% hint style="info" %}
+To change the default backoffice language, update the `Umbraco:CMS:Global:DefaultUILanguage` value in the `appsettings.json` file. For more information, see the [Global Settings](../reference/configuration/globalsettings.md) article.
+{% endhint %}
### Changing the Default Backoffice Language of a User
To change the default language of a User:
-1. Go to **Users** section.
+1. Go to the **Users** section.
2. Select the user whose backoffice language you wish to change.
-3. Select the new language from the **Language** drop-down list.
+3. Select the new language from the **UI Culture** drop-down list.
+
+ 
-
4. Click **Save**.
## Document Types
For this tutorial, we will create the following document types:
-* Home Page
+* Home Page
-* Blogs
+* Blogs
-* Contact Us
+* Contact Us
@@ -85,56 +95,53 @@ To enable language variants on Document Types, follow these steps:
1. Go to the **Settings** tab.
2. Select **Contact Us** from the **Document Types** folder.
-3. Go to the **Permissions** tab and toggle **Allow vary by culture**
+3. Go to the **Settings** tab and toggle **Allow vary by culture**
- 
+ 
4. Click **Save**.
5. Go to the **Design** tab.
-6. Click on the gear icon ⚙ of the **Page Title** and toggle **Allow vary by culture**.
+6. Click on the Data Type of the **Page Title** and toggle **Vary by culture**.
- 
-7. Click **Submit**.
-8. For this tutorial, we will not make any changes to the **Address**. Click **Save**.
+ 
+7. Click **Update**.
+8. For this tutorial, we will not make any changes to the **Address**.
+9. Click **Save**.
## Viewing the Language Variants in the Content section
When you return to your content node you will notice two things:
-1. At the top of the content tree, there is a dropdown to view the content tree in the language of your choice.
+1. At the top of the content tree, there is a dropdown to view the content tree in the language of your choice.
- 
-2. To the right of the content name, there is now a dropdown where you can select a language. You can also open a split view so you can see two languages at once.
+ 
+2. To the right of the content name, there is now a dropdown where you can select a language. You can also open a split view so you can see two languages at once.
- 
+ 
## Adding Culture and Hostnames to the Root Node of the Website
To add culture and hostnames, follow these steps:
1. Go to the **Content** tab.
-2. Right-click on the **...** dots next to the **Contact Us** content node and select **Culture and Hostnames...**.
+2. Click on the **...** dots next to the **Contact Us** content node.
+3. Select **Culture and Hostnames**.
+4. Add a domain for each hostname, like it's done here:
-3\. In the **Culture and Hostnames...**. pane, let's add a domain for each hostname, like it's done here:
-
-
-
-4\. Click **Save**.
+ 
+5. Click **Save**.
## Using Side-by-Side Mode for Editing Content
To use side-by-side mode for editing content at the same time, follow these steps:
-1. Go to the **Contact Us** node. You will find a language dropdown next to the title at the top:
+1. Go to the **Contact Us** node. You will find a language dropdown next to the title at the top:
- 
-2. Click the dropdown and hover over the new language. You will see an **Open in Splitview** option will appear.
-
- 
-3. Click **Open in Splitview**. In this splitview, we can see the content node with each language side by side.
+ 
+2. Click **Split view**. In this splitview, we can see the content node with each language side by side.
You may notice that the **Address** and other fields are greyed out - this is because we haven't checked the **Allow vary by culture** checkbox.
- 
+ 
To enable these fields, follow the steps mentioned in the [Enabling Language Variants on Document Types and Properties](multilanguage-setup.md#enabling-language-variants-on-document-types-and-properties) section.
@@ -144,9 +151,9 @@ To add language variants to the content.
1. Go to the **Contact Us** node.
2. Enter the **Name** for your content node and the **Page Title** in the new language.
-3. Click **Save and Publish**. The **Ready to Publish** window opens providing the option to publish in one or more languages.
+3. Click **Save and Publish**. The **Ready to Publish** window opens providing the option to publish in one or more languages.
- 
+ 
4. You can select either one or multiple languages and click **Publish**.
## Rendering Variant Content in Templates
@@ -176,13 +183,15 @@ Depending on how your site is set up, not all content is edited through the cont
To create dictionary items:
1. Go to the **Translation** section.
-2. Right-click **Dictionary** in the **Translation** tree and select **Create**.
-3. Enter a **Name** for the dictionary item. Let's say **Address** and click **Create**.
-4. Enter the different language versions for the dictionary item.
+2. Click on the **...** dots next to **Dictionary**.
+3. Select **Create dictionary item**.
+4. Enter a **Name** for the dictionary item. Let's say **Address**.
+5. Enter the different language versions for the dictionary item.
-
-5. Click **Save**.
-6. Similarly, we will add different language versions for the **Contact Number** field.
+ 
+
+6. Click **Save**.
+7. Similarly, we will add different language versions for the **Contact Number** field.
### Rendering Dictionary Items
@@ -206,18 +215,18 @@ To view the language variant on the browser, follow these steps:
1. Go to the **Content** tab.
2. Select your new language from the language dropdown above your content tree.
3. Select the **Contact Us** node and go to the **Info** tab.
-4. You will notice the links with the new language domain added to it. If it's not there, you might need to refresh the page.
+4. You will notice the links with the new language domain added to it. If it's not there, you might need to refresh the page.
- 
+ 
5. Click on the link to view the new language varied node in the browser.
6. Alternatively, you can add the domain name to your localhost in the browser. For example: `http://localhost:xxxx/da/`
For viewing purposes, I've added a stylesheet to my website. The final result should look similar to the image below:
-Danish Version:\\
+Danish Version:
-German Version:\\
+German Version:
