Skip to content

Added info about the project folder and how the article works #7080

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

Merged
merged 1 commit into from
May 9, 2025
Merged

Added info about the project folder and how the article works #7080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
30 changes: 20 additions & 10 deletions 10/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,27 @@
---
# CSS and Images

Our homepage is currently missing the CSS and image files. To include these files:

---
1. Open File Explorer and navigate to both your Umbraco project folder and the **Custom Umbraco Template** folder.

# CSS and Images
{% hint style="info" %}
The Umbraco project folder refers to the folder created during the [Umbraco installation](../../fundamentals/setup/install/).
{% endhint %}

Our homepage is currently missing the CSS and image files. To include these files:
2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder.

Check warning on line 11 in 10/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer CSS over 'css'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer CSS over 'css'", "location": {"path": "10/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md", "range": {"start": {"line": 11, "column": 15}}}, "severity": "WARNING"}
3. Paste them inside the **wwwroot** folder of your Umbraco project.
4. Go to the **HomePage** template in the **Settings** section.
5. Make sure the stylesheet reference in the HTML is `/css/main.css`.

![Stylesheet reference](images/stylesheet-reference.png)

## Stylesheet Reference

Use the Developer Tools in Chrome/Firefox/Edge and refresh `http://localhost:xxxx.`

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`. \\
* Check the **Network** tab to confirm no CSS or image files are missing.
* If you see any errors, double-check for typos and confirm the folders are placed correctly inside the **wwwroot** folder of your Umbraco project.

<figure><img src="images/Master-Template.png" alt=""><figcaption></figcaption></figure>
4. Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.`
## How Static Files Are Served

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.
Umbraco serves static files such as stylesheets and images from the **wwwroot** folder. This folder acts as the web root in ASP.NET Core applications. Any files placed here are publicly accessible and can be served directly by the application when requested by the browser.
27 changes: 21 additions & 6 deletions 13/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,26 @@

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`.
1. Open File Explorer and navigate to both your Umbraco project folder and the **Custom Umbraco Template** folder.

![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.`
{% hint style="info" %}
The Umbraco project folder refers to the folder created during the [Umbraco installation](../../fundamentals/setup/install/).
{% endhint %}

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.
2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder.

Check warning on line 11 in 13/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer CSS over 'css'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer CSS over 'css'", "location": {"path": "13/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md", "range": {"start": {"line": 11, "column": 15}}}, "severity": "WARNING"}
3. Paste them inside the **wwwroot** folder of your Umbraco project.
4. Go to the **HomePage** template in the **Settings** section.
5. Make sure the stylesheet reference in the HTML is `/css/main.css`.

![Stylesheet reference](images/stylesheet-reference.png)

## Stylesheet Reference

Use the Developer Tools in Chrome/Firefox/Edge and refresh `http://localhost:xxxx.`

* Check the **Network** tab to confirm no CSS or image files are missing.
* If you see any errors, double-check for typos and confirm the folders are placed correctly inside the **wwwroot** folder of your Umbraco project.

## How Static Files Are Served

Umbraco serves static files such as stylesheets and images from the **wwwroot** folder. This folder acts as the web root in ASP.NET Core applications. Any files placed here are publicly accessible and can be served directly by the application when requested by the browser.
25 changes: 20 additions & 5 deletions 14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,26 @@

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`.
1. Open File Explorer and navigate to both your Umbraco project folder and the **Custom Umbraco Template** folder.

{% hint style="info" %}
The Umbraco project folder refers to the folder created during the [Umbraco installation](../../fundamentals/setup/install/).
{% endhint %}

2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder.

Check warning on line 11 in 14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer CSS over 'css'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer CSS over 'css'", "location": {"path": "14/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md", "range": {"start": {"line": 11, "column": 15}}}, "severity": "WARNING"}
3. Paste them inside the **wwwroot** folder of your Umbraco project.
4. Go to the **HomePage** template in the **Settings** section.
5. Make sure the stylesheet reference in the HTML is `/css/main.css`.

![Stylesheet reference](images/stylesheet-reference.png)
4. Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.`

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.
## Stylesheet Reference

Use the Developer Tools in Chrome/Firefox/Edge and refresh `http://localhost:xxxx.`

* Check the **Network** tab to confirm no CSS or image files are missing.
* If you see any errors, double-check for typos and confirm the folders are placed correctly inside the **wwwroot** folder of your Umbraco project.

## How Static Files Are Served

Umbraco serves static files such as stylesheets and images from the **wwwroot** folder. This folder acts as the web root in ASP.NET Core applications. Any files placed here are publicly accessible and can be served directly by the application when requested by the browser.
25 changes: 20 additions & 5 deletions 15/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,26 @@

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`.
1. Open File Explorer and navigate to both your Umbraco project folder and the **Custom Umbraco Template** folder.

{% hint style="info" %}
The Umbraco project folder refers to the folder created during the [Umbraco installation](../../fundamentals/setup/install/).
{% endhint %}

2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder.

Check warning on line 11 in 15/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer CSS over 'css'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer CSS over 'css'", "location": {"path": "15/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md", "range": {"start": {"line": 11, "column": 15}}}, "severity": "WARNING"}
3. Paste them inside the **wwwroot** folder of your Umbraco project.
4. Go to the **HomePage** template in the **Settings** section.
5. Make sure the stylesheet reference in the HTML is `/css/main.css`.

![Stylesheet reference](images/stylesheet-reference.png)
4. Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.`

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.
## Stylesheet Reference

Use the Developer Tools in Chrome/Firefox/Edge and refresh `http://localhost:xxxx.`

* Check the **Network** tab to confirm no CSS or image files are missing.
* If you see any errors, double-check for typos and confirm the folders are placed correctly inside the **wwwroot** folder of your Umbraco project.

## How Static Files Are Served

Umbraco serves static files such as stylesheets and images from the **wwwroot** folder. This folder acts as the web root in ASP.NET Core applications. Any files placed here are publicly accessible and can be served directly by the application when requested by the browser.
25 changes: 20 additions & 5 deletions 16/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,26 @@

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`.
1. Open File Explorer and navigate to both your Umbraco project folder and the **Custom Umbraco Template** folder.

{% hint style="info" %}
The Umbraco project folder refers to the folder created during the [Umbraco installation](../../fundamentals/setup/install/).
{% endhint %}

2. Copy the **css** and **images** folders from the _Custom Umbraco template_ folder.

Check warning on line 11 in 16/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Names] We prefer CSS over 'css'

Raw Output:
{"message": "[UmbracoDocs.Names] We prefer CSS over 'css'", "location": {"path": "16/umbraco-cms/tutorials/creating-a-basic-website/css-and-images.md", "range": {"start": {"line": 11, "column": 15}}}, "severity": "WARNING"}
3. Paste them inside the **wwwroot** folder of your Umbraco project.
4. Go to the **HomePage** template in the **Settings** section.
5. Make sure the stylesheet reference in the HTML is `/css/main.css`.

![Stylesheet reference](images/stylesheet-reference.png)
4. Using Chrome/Firefox/Edge Developer Tools, start or refresh your `http://localhost:xxxx.`

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.
## Stylesheet Reference

Use the Developer Tools in Chrome/Firefox/Edge and refresh `http://localhost:xxxx.`

* Check the **Network** tab to confirm no CSS or image files are missing.
* If you see any errors, double-check for typos and confirm the folders are placed correctly inside the **wwwroot** folder of your Umbraco project.

## How Static Files Are Served

Umbraco serves static files such as stylesheets and images from the **wwwroot** folder. This folder acts as the web root in ASP.NET Core applications. Any files placed here are publicly accessible and can be served directly by the application when requested by the browser.
Loading