diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/1-customize-the-starter-kit.md b/14/umbraco-cms/tutorials/starter-kit/lessons/1-customize-the-starter-kit.md index 74b31009deb..ffd5ef9ef6f 100644 --- a/14/umbraco-cms/tutorials/starter-kit/lessons/1-customize-the-starter-kit.md +++ b/14/umbraco-cms/tutorials/starter-kit/lessons/1-customize-the-starter-kit.md @@ -18,25 +18,25 @@ Learn how to: ## Steps 1. Go to the _Home_ page in the Content section. -2. Navigate to the _Design_ group by scrolling down or selecting it from the dropdown menu. +2. Navigate to the _Design_ group by scrolling down. - ![Home page Design Group](../../../../../10/umbraco-cms/tutorials/starter-kit/lessons/images/design-group.png) + ![Home page Design Group](images/design-group_v14.png) 3. Choose a different font and color theme. * Try different combinations and see what fits your site. - * Save a draft of your changes by using `ctrl`+`s` or clicking the **Save** button. **Save** will not publish the changes to the website. + * Click **Save** to save a draft of your changes. **Save** will not publish the changes to the website. * Click **Save and preview** to see how the page looks on different screen sizes. 4. Try changing the background image of the Home page. - * Hover over the _Hero Background_ thumbnail and click the red cross icon to remove the current image. + * Hover over the _Hero Background_ thumbnail and click the trash icon to remove the current image. * You can now click the '+' to open a dialog where you can choose an image from the Media library or upload a new image. - * Select the image you want and click Submit in the lower right corner. + * Select the image you want and click **Submit**. 5. Find the _Sitename_ property and change the name of the site. * This is shown in the site navigation menu. * If you want a logo instead of the Site Name you can upload and/or choose an image from the Media Library. -6. When you are happy with the changes publish them to the website by clicking the **Save and Publish** button. +6. Click **Save and Publish** to publish the changes to the website. -To see the changes you've made go to the **Info** tab and click on the link. +To see the changes you've made go to the **Info** tab and click on the Link. -![Link to page](../../../../../10/umbraco-cms/tutorials/starter-kit/lessons/images/link-to-page.png) +![Link to page](images/link-to-page_v14.png) ## Summary diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/README.md b/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/README.md index 6011c3fdb85..0492eb36beb 100644 --- a/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/README.md +++ b/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/README.md @@ -17,21 +17,23 @@ Learn how to: ## Steps - Part One 1. In the **Settings** section, expand **Document Types**. -2. Click on _Blogpost_. This is the Document Type that defines the fields for this type of page. +2. Click on _Blogpost_. This is the Document Type that defines the fields for this type of page. - ![Blogpost Document Type](../../../../../../10/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/images/Blogpost-Document-Type-v10.png) + ![Blogpost Document Type](images/Blogpost-Document-Type-v14.png) 3. The Document Type contains 2 groups: _Content_ and _Navigation & SEO_. * At the bottom of the _Content_ group select **Add property**. * This opens the **Property Editor** dialog window. 4. Give the property a name: _Publication Date_. -5. Give the property a description: _The date of the blog post. This is the date used to display the most recent posts first._. +5. Give the property a description: _The date of the blog post. This is the date used to display the most recent posts first._ * Always try to add a meaningful description to help your editors. -6. Select **Add editor** to specify what type of data is being stored. - * We need a standard date, so click on the **Date Picker** icon. -7. In the validation section, enable the field to make it mandatory. -8. Submit to close the dialog and save the property. - - ![Property settings](../../../../../../10/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/images/property-settings-v10.png) -9. Select the **Reorder** option near the top-right of the window, then drag the new property to be after _Page Title_. +6. Select **Select Property Editor** to specify what type of data is being stored. + * Select the **Date Picker** icon since we need a standard date. +7. Enable the field in the validation section to make it mandatory. +8. Click **Add** to close the dialog and save the property. + + ![Property settings](images/property-settings-v14.png) +9. Select the **Reorder** option near the top-right of the window. + * Drag the new property after _Page Title_. * A logical order to your properties will make things easier for your editors. -10. Click **I am done reordering** near the top-right of the window and select **Save** the Document Type - a confirmation message should appear confirming that the Document Type was saved. +10. Click **I am done reordering** near the top-right of the window. +11. Select **Save** the Document Type. A confirmation message appears confirming that the Document Type is saved. diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/images/Blogpost-Document-Type-v14.png b/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/images/Blogpost-Document-Type-v14.png new file mode 100644 index 00000000000..8166628d970 Binary files /dev/null and b/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/images/Blogpost-Document-Type-v14.png differ diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/images/property-settings-v14.png b/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/images/property-settings-v14.png new file mode 100644 index 00000000000..cc5d2737650 Binary files /dev/null and b/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/images/property-settings-v14.png differ diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-2.md b/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-2.md index 821612eaa84..efa4627ecfb 100644 --- a/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-2.md +++ b/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-2.md @@ -11,16 +11,17 @@ Now in Part Two, we're going to display that instead of the default creation dat * Remember to publish your changes! * As this field is flagged as Mandatory you now can't save a post without it. -3. Go to the **Settings** section -4. Expand **Templates**, and *Master*, then click on *Blogpost*. +3. Go to the **Settings** section. +4. Expand the **Templates** folder. +5. Navigate to the *Blogpost* template. * This is the template that is rendering the full page view of a blog post -5. Find the element with the `blogpost-date` class and change it to use a nicely formatted Publication Date, i.e.: +6. Find the element with the `blogpost-date` class and change it to use a nicely formatted Publication Date, i.e.: ```html @Model.PublicationDate.ToLongDateString() ``` -6. *Save* the Template - a confirmation message should appear confirming that the Template was saved. -7. View the blog post page in the browser (find the page in the Content tree, then select the link on the Info tab). +7. Click **Save** to save the template. A confirmation message appears confirming the Template is saved. +8. View the blog post page in the browser. Navigate to the page in the **Content** tree and select the link on the **Info** tab. diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-3.md b/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-3.md index 9e7c2b106db..b3a78fd879e 100644 --- a/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-3.md +++ b/14/umbraco-cms/tutorials/starter-kit/lessons/2-add-a-blog-post-publication-date/part-3.md @@ -6,9 +6,9 @@ Finally, in Part Three we shall change the blog listing. ## Steps - Part Three -1. In the **Settings** section, expand **Partial View Files**. +1. In the **Settings** section, expand the **Partial Views** > **Components** > **LatestBlogPosts** folder. - * Select *LatestBlogPosts.cshtml*. + * Select *Default.cshtml*. 2. Scroll down to find the `blogpost-date` element and change it to use a nicely formatted Publication Date, i.e.: diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-1.md b/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-1.md index 6ba993e5c14..47019c7dd89 100644 --- a/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-1.md +++ b/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-1.md @@ -17,12 +17,14 @@ In this lesson, we'll only add Open Graph Content of the type "website", so we d ## Create a document type composition -1. Go to the **Settings** section -2. Right-click on **Document Types** -3. Create a new **Document Type without a template** -4. Name the Document Type *Open Graph* -5. Create a group called *Open Graph* -6. Add a property to the group tab called *Open Graph Title* -7. Select **Choose editor**, search for *textstring* and add this to the tab. -8. Add another property named *Open Graph Image* and use the **Media Picker** editor. -9. **Save** the Document Type. +1. Go to the **Settings** section. +2. Click on **Document Types**. +3. Select **Create** > **Document Type**. +4. Name the Document Type *Open Graph*. +5. Click **Add Group** and name it *Open Graph*. +6. **Add a property** to the group called *Open Graph Title*. +7. Select **Select property editor** and search for *textstring*. +8. Click **Add**. +9. Add another property named *Open Graph Image* and use the **Media Picker** as the editor. +10. Click **Add**. +11. Click **Save**. diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-2.md b/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-2.md index 52c22521dc3..81051ce6bb8 100644 --- a/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-2.md +++ b/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-2.md @@ -4,10 +4,13 @@ We will now add the group and properties to the Home page and Blog post of the s This is done by using compositions to add the functionality in multiple places. -1. In the **Settings** section, expand the Document Type tree. -2. Open the `Home` Document Type and select **Compositions...** in the top-right. -3. Choose the `Open Graph` Document Type we created and *Submit*. -4. **Save** the Document Type. +1. Go to the **Settings** section. +2. Expand the **Document Types** folder. +3. Open the `Home` Document Type. +4. Select **Compositions...** in the top-right. +5. Choose the `Open Graph` Document Type we created. +6. Click **Submit**. +7. Click **Save**. This will add the group and properties from the **Open Graph** Document Type to the **Home** Document Type. Follow the same steps for the `Blogpost` Document Type. diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-3.md b/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-3.md index 40ea7234b88..e6a59975f29 100644 --- a/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-3.md +++ b/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-3.md @@ -6,16 +6,19 @@ In the `Starter Kit` the head is placed in the Master Template, which is respons Because you've added the Open Graph feature as a composition you can check if the composition is present on the current page and then render meta tags. -1. Go to the **Settings** section and expand the Template tree. -2. Select the *Master* template -3. Find the `` HTML tags at the top of the Template -4. Write the following before the closing `` tag: - -```csharp - @if(Model is IOpenGraph){ - @Html.Partial("../Views/Partials/OpenGraph.cshtml") - } -``` +1. Go to the **Settings** section. +2. Expand the **Templates** folder. +3. Select the *Master* template. +4. Find the `` HTML tags at the top of the Template. +5. Write the following before the closing `` tag: + + ```csharp + @if(Model is IOpenGraph){ + @Html.Partial("../Views/Partials/OpenGraph.cshtml") + } + ``` + +6. Click **Save**. This will render a partial view *if* the composition is present on the current page. Currently that is the case for Home and Blog posts on the site. diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-4.md b/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-4.md index 89ee6536ce6..6391bcfc5ba 100644 --- a/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-4.md +++ b/14/umbraco-cms/tutorials/starter-kit/lessons/3-add-open-graph/step-4.md @@ -2,9 +2,9 @@ The final piece to the puzzle is adding the partial view that will be rendered when the composition is present. To do this: -1. Go to the **Settings** section +1. Go to the **Settings** section. -2. Right-click on *Partial Views* and choose *Create...* > *New empty partial view* +2. Click on **Partial Views** and select **Create...** > **New empty partial view** The partial view comes with a standard view model `@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage`. We are using compositions and only render this view on pages where the composition exists, which means we need to be a little more specific. diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/images/design-group_v14.png b/14/umbraco-cms/tutorials/starter-kit/lessons/images/design-group_v14.png new file mode 100644 index 00000000000..c3ec678f32c Binary files /dev/null and b/14/umbraco-cms/tutorials/starter-kit/lessons/images/design-group_v14.png differ diff --git a/14/umbraco-cms/tutorials/starter-kit/lessons/images/link-to-page_v14.png b/14/umbraco-cms/tutorials/starter-kit/lessons/images/link-to-page_v14.png new file mode 100644 index 00000000000..908b589eac1 Binary files /dev/null and b/14/umbraco-cms/tutorials/starter-kit/lessons/images/link-to-page_v14.png differ