From 4824e5f827f87733ff1edb4f8385d408a44b1816 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Fri, 8 Mar 2024 16:33:21 +0100 Subject: [PATCH 1/3] Updating4 articles of Creating Basic Website tutorial --- ...ng-your-first-template-and-content-node.md | 61 ++++++++++----- .../css-and-images.md | 8 +- ...displaying-the-document-type-properties.md | 44 ++++++----- .../document-types.md | 71 ++++++++++-------- .../images/Master-Template-new.png | Bin 0 -> 71545 bytes .../images/add-group-document-type.png | Bin 0 -> 26586 bytes .../images/add-template-to-document-type.png | Bin 0 -> 46198 bytes .../adding-an-icon-to-document-type.png | Bin 0 -> 84687 bytes .../images/allow-document-type-as-root.png | Bin 0 -> 60629 bytes .../images/choose-template.png | Bin 0 -> 5176 bytes .../images/create-a-homepage.png | Bin 0 -> 37193 bytes .../images/create-document-type.png | Bin 0 -> 35732 bytes .../images/create-new-document-type.png | Bin 0 -> 7011 bytes .../creating-our-pagetitle-property.png | Bin 0 -> 52127 bytes .../images/empty-homepage-template.png | Bin 0 -> 38874 bytes .../images/footer-text.png | Bin 0 -> 69805 bytes .../replace-bodytext-with-page-field.png | Bin 0 -> 108553 bytes .../replace-hardcoded-text-with-property.png | Bin 0 -> 48996 bytes .../images/saving-a-document-type.png | Bin 0 -> 38813 bytes .../images/select-homepage-template.png | Bin 0 -> 4495 bytes .../images/selecting-textstring-data-type.png | Bin 0 -> 35889 bytes .../images/umbraco-page-field.png | Bin 0 -> 18880 bytes .../images/where-our-data-fields-go.png | Bin 0 -> 192317 bytes 23 files changed, 114 insertions(+), 70 deletions(-) create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/Master-Template-new.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/add-group-document-type.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/add-template-to-document-type.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/adding-an-icon-to-document-type.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/allow-document-type-as-root.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/choose-template.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/create-a-homepage.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/create-document-type.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/create-new-document-type.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/creating-our-pagetitle-property.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/empty-homepage-template.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/footer-text.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/replace-bodytext-with-page-field.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/replace-hardcoded-text-with-property.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/saving-a-document-type.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/select-homepage-template.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/selecting-textstring-data-type.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/umbraco-page-field.png create mode 100644 14/umbraco-cms/tutorials/creating-a-basic-website/images/where-our-data-fields-go.png diff --git a/14/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md b/14/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md index a2f3fff28f6..ce41d14b324 100644 --- a/14/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md +++ b/14/umbraco-cms/tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md @@ -5,51 +5,76 @@ Umbraco creates a corresponding template when you select the **Document Type wit To edit the template: 1. Go to **Settings**. -2. Expand the **Templates** folder in the **Templating** section of the tree. You should see a template titled _**HomePage**_. -3. Open the template. It will contain a little bit of _**Razor code**_. +2. Click **...** next to the **Templates** folder in the **Templating** section of the**Settings** tree. +3. Click **Create**. +4. Enter a **Name** for the **Template**. Let's call it _HomePage_. +5. The template will contain a little bit of _**Razor code**_. - ![Home Page Template](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-13-empty-homepage-template-v9.png) -4. Leaving the code that's there (if you don't understand it, don't worry!) let's copy our template code in. + ![Home Page Template](images/empty-homepage-template.png) +6. Leaving the code that's there (if you don't understand it, don't worry!) let's copy our template code in. * We are using files from the [Custom Umbraco Template](https://umbra.co/Umbracotemplate). -5. Open the **Custom Umbraco Template** folder and copy the contents of **index.html**. -6. Paste the content into the _HomePage_ template below the closing curly brace "}". +7. Open the **Custom Umbraco Template** folder and copy the contents of **index.html**. +8. Paste the content into the _HomePage_ template below the closing curly brace "}". * Umbraco _**Templates**_ uses _**Razor**_ that allows you to add code in your _**Template**_ files. _**Razor**_ reacts to `@` signs. -7. Click **Save**. +9. Click **Save**. We now have a _Template_. That's two out of the three stages complete for our first page. +## Attaching the Template to the Document Type + +To attach the template: + +1. Go to the **Doument Types** folder. +2. Open the _Home Page_ Document Type. +3. Go to the **Templates** tab. + + ![Add Home Page Template to Document Type](images/add-template-to-document-type.png) +4. Click **Add** in the **Allowed Templates** field. +5. Select the HomePage template. + + ![Choose Home Page Template](images/choose-template.png) +6. Click **Choose**. +7. Click **Save**. + +The template is now associated with the Document Type. + ## Creating Your First content node -Our third and final stage to creating our first page in Umbraco, is to create a _**content node**_. The content node uses our _**Document Type**_ and _**Template**_, to serve up an HTML page to web visitors. +Our third and final stage to creating our first page in Umbraco, is to create a _**Content Node**_. The content node uses our _**Document Type**_ and _**Template**_, to serve up an HTML page to web visitors. To add a content node: 1. Go to **Content**. -2. Select **...** next to the **Content** headline in the tree. Select **HomePage**. +2. Select **...** next to **Content** in the tree. +3. Click **Create**. +4. Select **HomePage**. The Home Page opens in the content editor. - * If you cannot see the content node, check that \[Settings] > \[Document Types] > \[HomePage] > \[Permissions tab] > \[Allow at root] is checked. The Home Page opens in the content editor. + * If you cannot see the content node, check that [Settings] > [Document Types] > [HomePage] > [Structure] > [Allow at root] is enabled. + The Home Page opens in the content editor. - ![Home Page Content Node](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-15-create-a-homepage-v8.png) -3. Enter the name for the content node. We are going to call this _Homepage_. + ![Home Page Content Node](images/create-a-homepage.png) +5. Enter the name for the content node. We are going to call this _Homepage_. * The name will show up in the node list and will be used to create a URL for the page. Try to keep it short but descriptive. -4. Enter the following details: +6. Enter the following details: | Name | Description | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Page Title | Welcome to Widgets Ltd | | Body Text |

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et aliquet ante, ut eleifend libero.

Sed est ligula, maximus in dolor sed, lacinia egestas ligula. Donec eu nisi lectus.

Morbi pharetra pulvinar arcu non gravida.

| | Footer Text | Copyright Widgets Ltd 2019 | -5. Click **Save and Publish**. The content tree will reload with the homepage node. +7. Click **Save and Publish**. The content tree will reload with the Homepage node. + +## Accessing the Frontend -Refresh your webpage in your browser [http://localhost:xxxx](http:/localhost:xxxx/). To access your webpage: +To view your content on the frontend: -1. Select **Info** in the **Homepage** content node. +1. Go to the **Info** tab in the **Homepage** content node. 2. Click on the window pop-up symbol under the **Links** section. -The default Umbraco page will now be gone and we'll now see a bare, unstyled page. We are getting there. +The default Umbraco page is gone and we can see a basic unstyled page. We are getting there. {% hint style="info" %} -If you see a blank page, check if the template is entered and remember to save it. +If you see a blank page, check if the template is created and associated to the Document Type. {% endhint %} ![An Unstyled Homepage](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-16-unstyled-homepage-v8.png) diff --git a/14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md b/14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md index 1743192f2a9..13f866c1916 100644 --- a/14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md +++ b/14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md @@ -3,10 +3,10 @@ Our homepage is currently missing the CSS and image files. To include these files: 1. Navigate to the **MyCustomUmbracoProject** folder and the **Custom Umbraco Template** folder in File Explorer. -2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder and place it in the **wwwroot** folder inside the _MyCustomUmbracoProject_ folder. -3. Navigate to the **HomePage** template in the **Settings** section and ensure the stylesheet reference link is `/css/main.css`. +2. Copy the **CSS** and **images** folders from the _Custom Umbraco template_ folder and place it in the **wwwroot** folder inside the _MyCustomUmbracoProject_ folder. +3. Navigate to the **HomePage** template in the **Settings** section and ensure the stylesheet reference link is `/css/main.css`. - ![Stylesheet reference](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/Master-Template.png) -4. Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.` + ![Stylesheet reference](images/Master-Template-new.png) +4. Reload or refresh your frontend. The network tab should not report any missing CSS or images files. If the network tab reports any error, check for typos and if the folders are in the right places. diff --git a/14/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md b/14/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md index e8e59e3b688..fd24d3ca128 100644 --- a/14/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md +++ b/14/umbraco-cms/tutorials/creating-a-basic-website/displaying-the-document-type-properties.md @@ -4,7 +4,7 @@ You might have noticed that the content we've added to the homepage is not being Let’s look at our template and identify where the content should be displayed. -![Where our Data Properties Content Should be Output](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-17-where-our-data-fields-go-v8.png) +![Where our Data Properties Content Should be Output](images/where-our-data-fields-go.png) The top arrow in this image is the _Page Title_ and the bottom arrow is the _Body Text_. The Footer is all the way at the bottom of the page. @@ -13,30 +13,40 @@ The top arrow in this image is the _Page Title_ and the bottom arrow is the _Bod To set the Document Type properties: 1. Go to **Settings**. -2. Select **Templates** in the **Templating** section, and open the **Homepage** template. -3. Scroll down to the `` section (around line 46) and highlight the text `“Welcome - UmbracoTV”` (around line 49). - - ![Replace page Title value](<../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-18-replace-hardcoded-text-with-umbraco-page-field-v9 (1) (1) (1) (1).png>) -4. Click **Insert** and select **Value**. -5. Select **pageTitle** field from the drop-down list. - - ![Page Title field](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-19-umbraco-page-field-v9.png) -6. Click **Submit**. -7. Repeat the same process for the content between the `
` tags (around line 61 to 78): +2. Select **Templates** in the **Templating** section. +3. Open the **Homepage** template. +4. Scroll down to the `` section (around line 45) and highlight the text `“Welcome - UmbracoTV”` (around line 48). + + ![Replace page Title value](` tags (around line 60 to 77): * Highlight the content as shown in the figure. - ![Replace Body Text value](../../../../10/umbraco-cms/tutorials/creating-a-basic-website/images/figure-20-replace-bodytext-with-page-field-v9.png) + ![Replace Body Text value](images/replace-bodytext-with-page-field.png) * Click **Insert** and select **Value**. - * Select **bodyText** field from the drop-down list. + * Select **Document Type** from the **Choose field** drop-down list. + * Select **HomePage**. + * Click **Choose**. + * Select **bodyText** field from the **HomePage** drop-down list. * Click **Submit**. -8. Repeat the same process for the content in the `