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
8 changes: 4 additions & 4 deletions 13/umbraco-cms/fundamentals/design/partial-views.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ A Partial View (`.cshtml` file) is a regular view that can be used multiple time

You can create and edit partial views in the **Partial Views** folder from the **Settings** section of the Backoffice.

![Creating a new partial view](../../../../10/umbraco-cms/fundamentals/design/images/creating-partial-view.png)
![Creating a new partial view](images/creating-partial-view.png)

In the **Create** menu, there are three options available:

Expand All @@ -22,15 +22,15 @@ In the **Create** menu, there are three options available:

To create a partial view, go to the **Settings** section in the Umbraco backoffice and right-click the **Partial Views** folder. Choose **Create**. Select **New empty partial view** and enter a partial view name and click the **Save** button. You will now see the partial view markup in the backoffice editor.

![Created partial view](../../../../10/umbraco-cms/fundamentals/design/images/created-partial-view.png)
![Created partial view](images/created-partial-view.png)

By default, the partial view is saved in the `Views/Partials` folder in the solution.

## Creating a Partial View from Snippet

To create a partial view from the snippet, go to the **Settings** section in the Umbraco backoffice and right-click the **Partial Views** folder. Choose **Create**. Select **New empty partial view from snippet**. Select the snippet you want to create a partial view for and enter a partial view name. The code snippet you selected is displayed in the backoffice editor. Click the **Save** button.

![Created partial view from snippet](../../../../10/umbraco-cms/fundamentals/design/images/created-partial-view-from-snippet.png)
![Created partial view from snippet](images/created-partial-view-from-snippet.png)

By default, the partial view is saved in the `Views/Partials` folder in the solution. Umbraco provides the following partial view snippets:

Expand All @@ -54,7 +54,7 @@ By default, the partial view is saved in the `Views/Partials` folder in the solu

To create a folder, go to the **Settings** section in the Umbraco backoffice and right-click the **Partial Views** folder. Choose **Create**. Select **Folder**. Enter a folder name and click the **Create** button.

![Created folder](../../../../10/umbraco-cms/fundamentals/design/images/Partial-Views-folder.png)
![Created folder](images/Partial-Views-folder.png)

## Rendering a Partial View

Expand Down
6 changes: 3 additions & 3 deletions 13/umbraco-cms/fundamentals/design/rendering-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ To use the `fallback` type, add the `@using Umbraco.Cms.Core.Models.PublishedCon
* Each language can optionally be provided with a fall-back language, that will be used when content is not populated for the language requested and the appropriate overload parameters are provided.
* It is possible to chain these language fall-backs, so requesting content for Portuguese, could fall-back to Spanish and then on to English.

![Configuring fall-back languages](../../../../10/umbraco-cms/fundamentals/design/images/language-fallback.png)
![Configuring fall-back languages](images/language-fallback.png)

## Query content

Expand All @@ -104,9 +104,9 @@ You can do this by querying content relative to your current page in template vi
</ul>
```

You can use the Query Builder in the template editor to build more advanced queries. ![Query button](../../../../10/umbraco-cms/fundamentals/design/images/button-v8.png)
You can use the Query Builder in the template editor to build more advanced queries. ![Query button](images/button-v8.png)

![Query helper](../../../../10/umbraco-cms/fundamentals/design/images/query-v9.png)
![Query helper](images/query-v9.png)

### More information

Expand Down
14 changes: 7 additions & 7 deletions 13/umbraco-cms/fundamentals/design/stylesheets-javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ description: >-

You can create and edit stylesheets in the Stylesheets folder in the Settings section of the Backoffice.

![Creating a new stylesheet](../../../../10/umbraco-cms/fundamentals/design/images/1-creating-stylesheet.png)
![Creating a new stylesheet](images/1-creating-stylesheet.png)

In the Create menu, these options are available:

Expand All @@ -24,15 +24,15 @@ It is currently not possible to use any CSS preprocessor (such as Syntactically

After creating a new stylesheet, you would work with it as you would with templates or JavaScript files - using the built-in backoffice text editor. When you're working with stylesheets, you also have access to the Rich Text Editor, which allows you to create CSS styles and get a real-time preview.

![Stylesheet Rich Text Editor (RTE)](../../../../10/umbraco-cms/fundamentals/design/images/2-rte-editor.png)
![Stylesheet Rich Text Editor (RTE)](images/2-rte-editor.png)

The rules you create in the Rich Text Editor section will carry over to the Code tab.

![Stylesheet RTE tab](../../../../10/umbraco-cms/fundamentals/design/images/3-rte-editor-p2.png) ![Stylesheet Code tab](../../../../10/umbraco-cms/fundamentals/design/images/3-rte-editor-p3.png)
![Stylesheet RTE tab](images/3-rte-editor-p2.png) ![Stylesheet Code tab](images/3-rte-editor-p3.png)

To reference your newly included stylesheet in a template file, navigate to Templates, pick the template you like (css files are usually referenced in the layout or home templates) and link to it with the `link` tag.

![Linking CSS in template](../../../../10/umbraco-cms/fundamentals/design/images/4-link-css-v9.png)
![Linking CSS in template](images/4-link-css-v9.png)

By default, the stylesheets will be saved in the `wwwroot/css` folder in the solution. To reference them you can use either of the methods used in the above screenshot.

Expand All @@ -58,21 +58,21 @@ If your RTE is styled differently on the frontend of the site, the backoffice st

To create and edit JavaScript files in the Backoffice, head on over to the Scripts folder in the Settings section of the Backoffice.

![Creating a new JavaScript](../../../../10/umbraco-cms/fundamentals/design/images/8-create-js.png)
![Creating a new JavaScript](images/8-create-js.png)

From here you can add a new JavaScript file, or a new folder.

Add a new JavaScript file and write your code:

![Sample JS script](../../../../10/umbraco-cms/fundamentals/design/images/9-myscript.png)
![Sample JS script](images/9-myscript.png)

Then, navigate to the template where you would like to include your JS file.

```html
<script src="/scripts/myScript.js"></script>
```

![Reference the script in template](../../../../10/umbraco-cms/fundamentals/design/images/10-reference-script-v9.png)
![Reference the script in template](images/10-reference-script-v9.png)

By default all JavaScript files will be stored in the `wwwroot/scripts` folder in the solution.

Expand Down
10 changes: 5 additions & 5 deletions 13/umbraco-cms/fundamentals/design/templates/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ By default, all document types should have a template attached - but in case you

Open the **Settings** section inside the Umbraco backoffice and right-click the **Templates** folder. Choose **Create**. Enter a template name and click the **Save** button. You will now see the default template markup in the backoffice template editor.

![Created template](../../../../../10/umbraco-cms/fundamentals/design/templates/images/create-template-v8.png)
![Created template](images/create-template-v8.png)

## Allowing a Template on a Document Type

To use a template on a document, you must first allow it on the content's type. Open the Document Type you want to use the template, go to the Templates tab and select the template under the **Allowed Templates** section.

![Allowing template](../../../../../10/umbraco-cms/fundamentals/design/templates/images/allow-template-v8.png)
![Allowing template](images/allow-template-v8.png)

## Inheriting a Master Template

Expand All @@ -40,7 +40,7 @@ A template can inherit content from a master template by using the ASP.NET views

We then create a new template called **textpage** and in the template editor, click on the **Master Template** button and set its master template to the template called **MasterView**:

![Inherit template](../../../../../10/umbraco-cms/fundamentals/design/templates/images/inherit-template-v8.png)
![Inherit template](images/inherit-template-v8.png)

This changes the `Layout`value in the template markup, so **textpage** looks like this:

Expand Down Expand Up @@ -103,7 +103,7 @@ By default, when rendering a named section, the section is not mandatory. To mak
@RenderSection("Head", true)
```

![Create partial](../../../../../10/umbraco-cms/fundamentals/design/templates/images/render-named-sections-v10.png)
![Create partial](images/render-named-sections-v10.png)

On your child page template call `@section Head {}` and then type your markup that will be pushed into the Master Template:

Expand All @@ -123,7 +123,7 @@ Another way to reuse HTML is to use partial views - which are small reusable vie

Like templates, create a partial view, by right-clicking **Partial Views** and selecting **Create**. You can then either create an empty partial view or create a partial view from a snippet.

![Create partial](../../../../../10/umbraco-cms/fundamentals/design/templates/images/create-partial-v8.png)
![Create partial](images/create-partial-v8.png)

The created partial view can now be injected into any template by using the `@Html.Partial()` method like so:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ To define a Named Section, follow these steps:
1. Go to **Settings**.
2. Navigate to a template and click **Sections**.

<figure><img src="../../../../../10/umbraco-cms/fundamentals/design/templates/images/Sections-option.png" alt=""><figcaption></figcaption></figure>
<figure><img src="images/Sections-option.png" alt=""><figcaption></figcaption></figure>
3. Select **Define a named section** and enter the **Section Name**.

<figure><img src="../../../../../10/umbraco-cms/fundamentals/design/templates/images/Define-named-section.png" alt=""><figcaption></figcaption></figure>
<figure><img src="images/Define-named-section.png" alt=""><figcaption></figcaption></figure>
4. Click **Submit**.

## Render a Name Section
Expand All @@ -52,9 +52,9 @@ To render a Named Section, follow these steps:
1. Go to **Settings**.
2. Navigate to a template and click **Sections**.

<figure><img src="../../../../../10/umbraco-cms/fundamentals/design/templates/images/Sections-option.png" alt=""><figcaption></figcaption></figure>
<figure><img src="images/Sections-option.png" alt=""><figcaption></figcaption></figure>
3. Select **Render a named section** and enter the **Section Name**.

<figure><img src="../../../../../10/umbraco-cms/fundamentals/design/templates/images/Render-named-sections.png" alt=""><figcaption></figcaption></figure>
<figure><img src="images/Render-named-sections.png" alt=""><figcaption></figcaption></figure>
4. \[Optional] Select **Section is mandatory**. This means that the child templates need to have the named section defined for them to work.
5. Click **Submit**.
8 changes: 4 additions & 4 deletions 13/umbraco-cms/fundamentals/setup/install/iis.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ The guide will assume you already have IIS configured and know your way around i

First, you need to ensure you have "Development time IIS support installed". To check this, go to the Visual Studio installer, click modify and check on the right side under "ASP.NET and web development":

![Checking the IIS module exists](../../../../../10/umbraco-cms/fundamentals/setup/install/images/iis-module.png)
![Checking the IIS module exists](images/iis-module.png)

Once that is installed you should set up a new IIS site - and make sure to add the hostname to your hosts file as well. Here is my setup for an example:

![IIS site example](../../../../../10/umbraco-cms/fundamentals/setup/install/images/iis-site.png)
![IIS site example](images/iis-site.png)

{% hint style="info" %}
For the path you want to point it at the root of your site - where the `.csproj` file is.
Expand Down Expand Up @@ -106,8 +106,8 @@ You can add a new profile called IIS, and point it at your local domain. Here it

At this point IIS will be added to the launch profiles, and you can run the site from Visual Studio by choosing IIS in the dropdown:

![Launch profiles](../../../../../10/umbraco-cms/fundamentals/setup/install/images/launchprofiles.png)
![Launch profiles](images/launchprofiles.png)

And finally the site is running from your local IIS:

![Local IIS site](../../../../../10/umbraco-cms/fundamentals/setup/install/images/voila.png)
![Local IIS site](images/voila.png)
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
# Install using Visual Studio Code

Follow these steps to set up an Umbraco project with VS Code. The benefit of using VS Code is that it is super quick to get up and running.
Follow these steps to set up an Umbraco project with Visual Studio Code. The benefit of using Visual Studio Code is that it is super quick to get up and running.

## Installing and setting up VS Code
## Installing and setting up Visual Studio Code

1. Go to [https://code.visualstudio.com/](https://code.visualstudio.com/) and download VS Code for free.
2. Once installed, launch VS Code.
3. Click the extensions menu at the bottom on the left side. Then search for **C#** and install it.
1. Go to [https://code.visualstudio.com/](https://code.visualstudio.com/) and download Visual Studio Code for free.
2. Once installed, launch Visual Studio Code.
3. Click the extensions menu at the bottom on the left side. Then search for **C#** and install it.

![VS Code install extension](../../../.gitbook/assets/Marketplace.jpg)
![Visual Studio Code install extension](../../../.gitbook/assets/Marketplace.jpg)

## Creating your Umbraco project

Follow the [Templates Guide](install-umbraco-with-templates.md) to create your project folder.

## Configure VS Code to run the Umbraco project
## Configure Visual Studio Code to run the Umbraco project

Open your project folder in VS Code, your project will look something like this:
Open your project folder in Visual Studio Code, your project will look something like this:

![Fresh Umbraco installation](../../../.gitbook/assets/VS_Code_Explorer.png)

Now we need to tell VS Code how to run your project.
Now we need to tell Visual Studio Code how to run your project.

Open the command palette, you can use the shortcut `Ctrl+Shift+P`, and type in `Tasks: Configure` and select the `Tasks: Configure Task` option:

![Configure task option](../../../../../10/umbraco-cms/fundamentals/setup/install/images/VsCode/ConfigureTask.png)
![Configure task option](images/VsCode/ConfigureTask.png)

Select "Create task.json from template"

![Create task from template](../../../../../10/umbraco-cms/fundamentals/setup/install/images/VsCode/TaskJsonFromTemplate.png)
![Create task from template](images/VsCode/TaskJsonFromTemplate.png)

Now select ".NET Core" as your template.

![Create .NET Core Template](../../../../../10/umbraco-cms/fundamentals/setup/install/images/VsCode/NetcoreTemplate.png)
![Create .NET Core Template](images/VsCode/NetcoreTemplate.png)

After this VS Code will have created a folder called `.vscode` that contains a file called `tasks.json`, it's this file that tells VS Code how to build your project.
Visual Studio Code creates a folder called `.vscode` that contains a file called `tasks.json`. The `tasks.json` file tells Visual Studio Code how to build your project.

Now that we've told VS Code how to build your project, we need to tell it how to launch it. VS Code can do this for you. First, select the little play button in the left side menu, and then select the "create a launch.json file" link.
Now that we've told Visual Studio Code how to build your project, we need to tell it how to launch it. Visual Studio Code can do this for you. First, select the little play button in the left side menu, and then select the "create a launch.json file" link.

![Creating launch.json file](../../../.gitbook/assets/Create_LaunchJson_file.jpg)

Expand All @@ -56,26 +56,26 @@ Now you'll see a green play button appear with a dropdown where ".NET Core Launc

<figure><img src="../../../.gitbook/assets/Dropdown_option.jpg" alt=""><figcaption><p>Green Play button options</p></figcaption></figure>

If you navigate to the Files section, a new `launch.json` file is created in the `.vscode` folder. When you press F5, the `launch.json` file tells VS Code to build your project, run it, and then open a browser .
If you navigate to the Files section, a new `launch.json` file is created in the `.vscode` folder. When you press F5, the `launch.json` file tells Visual Studio Code to build your project, run it, and then open a browser .

<figure><img src="../../../.gitbook/assets/launchJson.jpg" alt=""><figcaption></figcaption></figure>

With that, you're ready to run the project! Press F5, or click the little green play button in the **Run and Debug** section to run your brand new Umbraco site locally.

## Umbraco Web Installer

This section continues from where we left off but covers the installation and configuration of Umbraco inside your web browser when you run Umbraco for the first time.
This section covers the installation and configuration of Umbraco inside your web browser when you run Umbraco for the first time.

You will see the install screen where you will need to fill in some data before Umbraco can be installed.

![Web Installer - Lets Get Started](../../../.gitbook/assets/Install_Umbraco.jpg)

When the installer is done, you will be logged into the backoffice.

<figure><img src="../../../../../10/umbraco-cms/fundamentals/setup/install/images/VsCode/dashboard-v8.PNG" alt=""><figcaption></figcaption></figure>
<figure><img src="images/VsCode/dashboard-v8.PNG" alt=""><figcaption></figcaption></figure>

Congratulations, you have installed an Umbraco site!

{% hint style="info" %}
You can log into your Umbraco site by entering the following into your browser: http://yoursite.com/umbraco/.
You can log into your Umbraco site by entering the following into your browser: `http://yoursite.com/umbraco/`.
{% endhint %}
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ After completing the steps above you can now initialize the installation by boot

Once it has completed, you should see the following when visiting the frontend of the site.

<figure><img src="../../../../../10/umbraco-cms/fundamentals/setup/install/images/unattended/final-screen.png" alt=""><figcaption></figcaption></figure>
<figure><img src="images/unattended/final-screen.png" alt=""><figcaption></figcaption></figure>

## Configuration options

Expand Down
2 changes: 1 addition & 1 deletion 13/umbraco-cms/fundamentals/setup/install/visual-studio.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ For more information check the first 2 steps of [Install Umbraco with .NET CLI](

Go to **File > New > Project** and search for `Umbraco` in the _Search for templates_ field.

![The Create a new project dialog in Visual Studio.](../../../../../10/umbraco-cms/fundamentals/setup/install/images/VS/create-project.png)
![The Create a new project dialog in Visual Studio.](images/VS/create-project.png)

Once you select **Umbraco Project (Umbraco HQ)** navigate to the next step by clicking _Next_.

Expand Down
Loading
Loading