Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions 10/umbraco-cms/tutorials/multilanguage-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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**.

<figure><img src="images/change-default-language-v10.png" alt=""><figcaption></figcaption></figure>

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:
Expand Down Expand Up @@ -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:

<figure><img src="images/culture-and-hostnames.png" alt=""><figcaption></figcaption></figure>
4. Click **Save**.
Expand All @@ -133,8 +137,7 @@ To use side-by-side mode for editing content at the same time, follow these step
![Open Language in Splitview](images/open-in-splitview.png)
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.

![Splitview editing](images/splitview-editing.png)

Expand Down Expand Up @@ -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:**

<figure><img src="images/final-result-dk.png" alt=""><figcaption></figcaption></figure>

**German Version:**\\
**German Version:**

<figure><img src="images/final-result-da.png" alt=""><figcaption></figcaption></figure>
17 changes: 11 additions & 6 deletions 12/umbraco-cms/tutorials/multilanguage-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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**.

<figure><img src="../../../10/umbraco-cms/tutorials/images/change-default-language-v10.png" alt=""><figcaption></figcaption></figure>

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:
Expand Down Expand Up @@ -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:

<figure><img src="../../../10/umbraco-cms/tutorials/images/culture-and-hostnames.png" alt=""><figcaption></figcaption></figure>

4\. Click **Save**.
4. Click **Save**.

## Using Side-by-Side Mode for Editing Content

Expand Down Expand Up @@ -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:

<figure><img src="../../../10/umbraco-cms/tutorials/images/final-result-dk.png" alt=""><figcaption></figcaption></figure>

German Version:\\
German Version:

<figure><img src="../../../10/umbraco-cms/tutorials/images/final-result-da.png" alt=""><figcaption></figcaption></figure>
51 changes: 28 additions & 23 deletions 13/umbraco-cms/tutorials/multilanguage-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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_.

![Adding the Danish language](../../../10/umbraco-cms/tutorials/images/adding-danish-language-v10.png)
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.

![Adding a Fallback language](../../../10/umbraco-cms/tutorials/images/fallback-language-v10.png)
7. Click **Save**.
Expand All @@ -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.
Expand All @@ -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**.

<figure><img src="../../../10/umbraco-cms/tutorials/images/change-default-language-v10.png" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="../../../10/umbraco-cms/tutorials/images/change-backoffice-language.png" alt=""><figcaption></figcaption></figure>
4. Click **Save**.
Expand All @@ -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

![Home Page](../../../10/umbraco-cms/tutorials/images/home-page.png)
* Blogs
* Blogs

![Blogs](../../../10/umbraco-cms/tutorials/images/Blogs.png)
* Contact Us
* Contact Us

![Contact Us](../../../10/umbraco-cms/tutorials/images/Contact-us.png)

Expand All @@ -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**

![Allow property editor Language Variants](../../../10/umbraco-cms/tutorials/images/allow-varying-property-editor.png)
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**.

![Allow Vary by Culture](../../../10/umbraco-cms/tutorials/images/allow-vary-by-culture.png)
7. Click **Submit**.
Expand All @@ -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.

![Variant Content Tree](../../../10/umbraco-cms/tutorials/images/Variant-content-tree.png)
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.

![Variant Drop-down list](../../../10/umbraco-cms/tutorials/images/variant-dropdown.png)

Expand All @@ -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:

<figure><img src="../../../10/umbraco-cms/tutorials/images/culture-and-hostnames.png" alt=""><figcaption></figcaption></figure>
<figure><img src="../../../10/umbraco-cms/tutorials/images/culture-and-hostnames.png" alt=""><figcaption></figcaption></figure>

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:

![Language Variant dropdown](../../../10/umbraco-cms/tutorials/images/language-dropdown.png)
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.

![Open Language in Splitview](../../../10/umbraco-cms/tutorials/images/open-in-splitview.png)
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.

Expand All @@ -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.

![Publishing Variant content](../../../10/umbraco-cms/tutorials/images/publishing-variant-content.png)
4. You can select either one or multiple languages and click **Publish**.
Expand Down Expand Up @@ -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.

<figure><img src="../../../10/umbraco-cms/tutorials/images/add-dictionary-item.png" alt=""><figcaption></figcaption></figure>
5. Click **Save**.
Expand Down Expand Up @@ -206,18 +211,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.

![Viewing the Language Variant Link](../../../10/umbraco-cms/tutorials/images/viewing-langvariant-browser.png)
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:

<figure><img src="../../../10/umbraco-cms/tutorials/images/final-result-dk.png" alt=""><figcaption></figcaption></figure>

German Version:\\
German Version:

<figure><img src="../../../10/umbraco-cms/tutorials/images/final-result-da.png" alt=""><figcaption></figcaption></figure>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading