Skip to content

Updating Creating Basic Website tutorial #5937

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Updating Creating Basic Website tutorial #5937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4824e5f
Updating4 articles of Creating Basic Website tutorial
eshanrnh Mar 8, 2024
9935268
changes to Master page
eshanrnh Mar 12, 2024
46e7af7
Updated creating master template, smple content page, and nav menu ar…
eshanrnh Mar 13, 2024
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
76 changes: 39 additions & 37 deletions ...braco-cms/tutorials/creating-a-basic-website/creating-master-template-part-1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,67 @@
# Creating a Master Template

We've seen how to create a **Document Type** and its corresponding **Template**. If you want to create a three-page site containing; Home, News and Contact Us pages, you would create a _**Document Type**_ with a corresponding **Template** and copy the same HTML code into each template.
We've seen how to create a **Document Type** and its corresponding **Template**. If you plan to create a website containing Home, News, and Contact Us pages, you will need to create a Document Type for each page. You will also need to create a corresponding Template for each Document Type.

If you see yourself repeating the same HTML multiple times in your templates, you might want to consider creating a new master template.
You may end up copying the same HTML code into each of these templates, which can be time-consuming and repetitive. In such scenario, you might want to consider creating a new master template.

To create a new master template:

1. Go to **Settings**.
2. Select **Templates** from the **Templating** section.
3. Select the **...** next to the **Templates** folder and click **Create**.
4. A template opens up in the content editor. Enter a **Name** for the master template. Let's call it _Master_.
3. Select the **...** next to the **Templates** folder.
4. Click **Create**.
A template opens up in the content editor.
5. Enter a **Name** for the master template. Let's call it _Master_.

<figure><img src="../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-22-master-template-v9.png" alt=""><figcaption></figcaption></figure>
5. Click **Save**.
![Master Template](images/master-template-v14.png)
6. Click **Save**.

## Using the Master Template

To use the master template:

1. Go to **Settings**.
2. Select **Templates** from the **Templating** section and open the **Homepage** template.
3. Select `Master Template: No Master`. The Master template dialog opens on the right-side of the browser.
4. Select the template called **Master**. This will update the Razor code section from `Layout = null;` to `Layout = "Master.cshtml";`
2. Select **Templates** from the **Templating** section.
3. Open the **Homepage** template.
4. Select `Master Template: No Master`.
The Master template dialog opens on the right-side of the browser.
5. Select the template called **Master**.
6. Click **Choose**.
The Razor code section is updated from `Layout = null;` to `Layout = "Master.cshtml";`

<figure><img src="../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-23-homepage-has-master-template-v9.png" alt=""><figcaption></figcaption></figure>
5. Click **Save**.
![Adding Master Template to HomePage](images/homepage-has-master-template.png)
7. Click **Save**.

## Updating Templates With the New Master Template

We now need to move the parts of our HTML template that are common across all templates into the _**Master**_. It might be slightly different for different websites and you'll need to consider if all pages contain a `<div id="main">` section so that you can update it in the master.
We now need to move the parts of our HTML template that are common across all templates into the _**Master**_. It might be slightly different for different websites. You'll need to consider if all pages contain a `<div id="main">` section so that you can update it in the master.

To update templates with the new master template, follow these steps:

1. Go to **Settings**.
2. Select **Templates** from the **Templating** section.
3. Go to **Master** and open the **Homepage** template.
4. For this tutorial, we will cut everything from the `<html>` (around line 9) to the end of the `</div>` tag (around line 44) which is the `header` and `navigation` of the site to the master template.
3. Navigate to the **Homepage** template.
4. For this tutorial, we will cut everything from the `<html>` (around line 8) to the end of the `</div>` tag (around line 43) which is the `header` and `navigation` of the site to the master template.

<figure><img src="../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-24-homepage-after-cutting-the-header-v9.png" alt=""><figcaption></figcaption></figure>
![Header and navigation tags selected in the HomePage template](images/homepage-after-cutting-the-header.png)
5. Click **Save**.
6. Go to the **Master** template and paste this HTML markup after the closing curly brace (around line 9).
6. Go to the **Master** template and paste this HTML markup after the closing curly brace (around line 7).

<figure><img src="../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-25-master-template-with-header-v9.png" alt=""><figcaption></figcaption></figure>
7. At the end of this markup, we need to tell Umbraco to insert the child template's content. To do so, add the code _**@RenderBody()**_ at the end.
![Header and navigation tags added in the Master template](images/master-template-with-header.png)
7. At the end of this markup, we need to tell Umbraco to insert the child template's content. To do so, add the code _**@RenderBody()**_ at the end.

<figure><img src="../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-26-adding-renderbody-v9.png" alt=""><figcaption></figcaption></figure>
![Adding renderbody in the Master template](images/adding-renderbody.png)
8. Click **Save**.
9. Repeat the same process for the footer content:
* Go to **Settings > Templates > Master > Homepage template** and cut everything from the `<!-- Footer -->` tag (around line 110) to the end of the `</html>` tag (around line 124) and click **Save**.
* Go to the **Master** template and paste this HTML markup after the _**@RenderBody**_ field we've added.
* Go to the **Homepage** template and cut everything from the `<!-- Footer -->` tag (around line 108) to the end of the `</html>` tag (around line 121) and click **Save**.
* Go to the **Master** template and paste this HTML markup after the _**@RenderBody**_ field we've added.

<figure><img src="../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-27-master-template-complete-v9.png" alt=""><figcaption></figcaption></figure>
![End of the Master template](images/master-template-complete.png)
* Click **Save**.

Now we've done a lot of work. When we refresh our localhost page, nothing has changed. If you have a compilation error you have perhaps mistyped **@RenderBody()**.

If you are missing any content (header or footer), check that the templates matches the following:
If you are missing any content such as header or footer, ensure that the templates matches the following:

### Master Template

Expand All @@ -66,16 +72,14 @@ If you are missing any content (header or footer), check that the templates matc
Layout = null;
}

@* the fun starts here *@

<html>
<head>
<title>Welcome - UmbracoTV</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/wwwroot/media/css/main.css" />
<link rel="stylesheet" href="/css/main.css" />
</head>

<body>
Expand Down Expand Up @@ -104,15 +108,15 @@ If you are missing any content (header or footer), check that the templates matc
</ul>
</nav>
</div>
@RenderBody()
<!-- Footer -->

@RenderBody()

<!-- Footer -->
<div class="container-fluid footer">
<div class="container">

@Model.Value("footerText")

@Model.Value("footerText")
</div>
</div>

Expand All @@ -128,10 +132,9 @@ If you are missing any content (header or footer), check that the templates matc

```csharp
@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.HomePage>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
Layout = "Master.cshtml";
Layout = "master.cshtml";
}

<!DOCTYPE HTML>
Expand All @@ -152,8 +155,7 @@ If you are missing any content (header or footer), check that the templates matc
<div class="row section">
<div class="col-md-12">

@Model.Value("bodyText")

@Model.Value("bodyText")
</div>
</div>

Expand Down
108 changes: 74 additions & 34 deletions ...braco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,27 @@ Some potential solutions:
Let's create a content-only contact page where we can provide a title and some rich text.

1. Go to **Settings**.
2. Select the **...** next to the **Document Types** in the **Settings** tree.
3. Select **Document Type with Template**. The Document Type opens in the content editor.
4. Select an **Icon** from the list of icons.
5. Enter a **Name**. Let's call it _Simple Content Page_.
6. Enter a Description.
7. Let's add two fields with the following specifications:
2. Click on **...** next to **Document Types**.
3. Select **Create**. The Create Document Type dialog opens.
4. Select **New Document Type**.
5. Select an **Icon** from the list of icons.
6. Click **Submit**.
7. Enter a **Name**. Let's call it *Simple Content Page*.
8. Let's add two fields with the following specifications:

| Group | Field Name | Alias | Data Type |
| ------- | ---------- | --------- | ---------------- |
| Content | Page Title | pageTitle | Textstring |
| Content | Body Text | bodyText | Rich Text Editor |

![Simple Content Page Template with Data Fields](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-35-contact-us-template-with-data-fields-v8.png)
8. Click **Save**.
9. Go to **Templates** to view your _Simple Content Page_ template that was created automatically with the Document Type.
10. Select the **Simple Content Page** template and then select **Master** as the **Master template**.
11. Add the following HTML to the **Simple Content Page** template and click **Save**.
![Simple Content Page Template with Data Fields](images/contact-us-template-with-data-fields.png)
9. Click **Save**.
10. Go to the **Templates** folder.
11. Click **...** next to the **Templates** folder.
12. Click **Create**.
13. Enter a **Name** for the **Template**. Let's call it *SimpleContentPage*.
14. Select `Master Template: No Master` and choose the **Master** template.
15. Add the following HTML after the closing `}`.

```html
<!-- Jumbotron, w title -->
Expand All @@ -51,7 +55,8 @@ Let's create a content-only contact page where we can provide a title and some r
</div>
</section>
```
12. Click **Save**.

16. Click **Save**.

### Updating the Document Type Permissions

Expand All @@ -60,21 +65,44 @@ We now need to update the Document Type permissions to specifically add child no
To update the Document Type permissions:

1. Go to **Settings**.
2. Open the **Homepage** Document Type and go to the **Permissions** tab.
3. Select **Add child** in the **Allowed child node types**. The **Choose child node** dialog opens.
4. Select **Simple Content Page** and click **Save**.
2. Open the **Homepage** Document Type.
3. Go to the **Structure** tab.
4. Click **Choose** in the **Allowed child node types**.
The **Choose child node** dialog opens.
5. Select **Simple Content Page**.

<figure><img src="../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-32-homepage-allowed-child-v8.png" alt=""><figcaption></figcaption></figure>
![Allow child nodes in HomePage](images/homepage-allowed-child.png)

6. Click **Choose**.
7. Click **Save**.

## Attaching the Template to the Document Type

To attach the template:

1. Go to the **Doument Types** folder.
2. Open the *Simple Content Page* Document Type.
3. Go to the **Templates** tab.
4. Click **Add** in the **Allowed Templates** field.
5. Select the *SimpleContentPage* template.

![Choose Simple Content Page Template](images/choose-simple-content-page.png)
6. Click **Choose**.
7. Click **Save**.

The template is now associated with the Document Type.

### Creating the content node

To create a content node:

1. Go to **Content**.
2. Select **...** next to the **Homepage** and select **Simple Content Page**.
3. Enter a name for the Document Type. Let's call it _Contact Us_.
4. Fill in details for the **Page Title** and **Body Text**.
5. Click **Save and Publish**.
2. Select **...** next to the **Homepage** node.
3. Click **Create**.
4. Select **Simple Content Page**.
5. Enter a name for the Document Type. Let's call it _Contact Us_.
6. Fill in details for the **Page Title** and **Body Text**.
7. Click **Save and Publish**.

### Adding the Document Type Properties

Expand All @@ -83,15 +111,22 @@ To add the Document Type properties:
1. Go to **Settings**.
2. Select **Templates** from the **Templating** section.
3. Go to **Master** and open the **Simple Content Page** template.
4. Scroll to the `<!-- Jumbotron, w title -->` (around line 8) section and highlight the text `“Umbraco Support”` (around line 11).
4. Scroll to the `<!-- Jumbotron, w title -->` (around line 7) section and highlight the text `“Umbraco Support”` (around line 10).
5. Click **Insert** and select **Value**.
6. Select the **pageTitle** field from the drop-down list and click **Submit**.
7. Repeat the same process for the `<div class="container">` tag:
* Highlight the content from the `<p>` tag (around line 19) to the end of the `</p>` tag (around line 22).
* Select **Document Type** from the **Choose field** drop-down list.
* Select **Simple Content Page**.
* Click **Choose**.
* Select **pageTitle** field from the **Simple Content Page** drop-down list.
* Click **Submit**.
6. Repeat the same process for the `<div class="container">` tag:
* Highlight the content from the `<p>` tag (around line 18) to the end of the `</p>` tag (around line 21).
* Click **Insert** and select **Value**.
* Select **bodyText** field from the drop-down list.
* Select **Document Type** from the **Choose field** drop-down list.
* Select **Simple Content Page**.
* Click **Choose**.
* Select **bodyText** field from the **Simple Content Page** drop-down list.
* Click **Submit**.
8. Click **Save**.
7. Click **Save**.

### Viewing the Contact Us Page

Expand All @@ -100,9 +135,9 @@ To view the **Contact Us** Page:
1. Go to **Content**.
2. Select the **Contact Us** page.
3. Go to the **Info** tab.
4. Click the link to view the page.
4. Click the link to view the page.

<figure><img src="../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-37-viewing-contact-us.png" alt=""><figcaption></figcaption></figure>
![Viewing Contact Us Page](images/viewing-contact-us.png)

## Using Document Type Properties from the Homepage

Expand All @@ -111,11 +146,16 @@ You may notice that the footer is now empty - we don't have the content from our
To use the Document Type properties from the homepage, do the following:

1. Go to **Settings**.
2. Select **Templates** from the **Templating** section, and open the **Master** template.
3. Highlight `@Model.Value("footerText")` in the footer (around line 52) and click **Insert**.
4. Select **Value** and choose the **footerText** again from the **Choose field** dropdown.
5. Select **Yes, make it recursive** checkbox. This notifies Umbraco to look up the content tree if the field doesn't exist at the node level for the page we're requesting.
6. Click **Submit**.
7. Click **Save**.
2. Click on **Templates** from the **Templating** section.
3. Open the **Master** template.
4. Highlight `@Model.Value("footerText")` in the footer (around line 50).
5. Click **Insert** and select **Value**.
6. Select **Document Type** from the **Choose field** drop-down list.
7. Select **Home Page**.
8. Click **Choose**.
9. Select **footerText** field from the **HomePage** drop-down list.
10. Select **Yes, make it recursive** checkbox. This notifies Umbraco to look up the content tree if the field doesn't exist at the node level for the page we're requesting.
11. Click **Submit**.
12. Click **Save**.

Reload the _Contact Us_ page to view the content with the footer.
Loading