The content that we currently have on our website is boilerplate content

that was provided for us by the Visual Studio ASP.NET MVC project template.

The one exception is the list of links that we added to our links page.

In fact we were so focused on the mechanics of creating our project

that we didn't decide what the focus of our website should be.

We need to pick a topic.

When I'm working on a learning project, I like to make it fun and interesting for

myself.

I find that if I enjoy what I'm working on, I'm more likely to make time for it.

I love to ski, so I'm going to make my website a directory of Oregon ski resorts.

The basic structure of our website is flexible enough to be used for

a variety of purposes, so feel free to come up with your own idea.

Now that we have our website's topic, let's update our content.

We'll start by updating our layout page.

As we mentioned in an earlier video, the layout page is used to specify

the overall look and feel for every page on our website.

So everything in the layout page appears on every page of the website.

The file that we're looking for is located in the Views > Shared folder.

There it is.

It's the file named _layout.cshtml.

Go ahead and double click it to open it.

The text My ASP.NET Application appears twice in this file.

in the title tag here in the document head and

if we scroll down a bit, here again in the footer.

Let's change both instances to Oregon Ski Resorts.

So select that text and type Oregon Ski Resorts.

Select and copy that text by pressing Ctrl+C then

move our cursor to the title tag in the header.

Select the text to replace and press Ctrl+V.

Let's save by pressing Ctrl+S and then F5 to run our website.

In the browser we can see a bit of our new page title here in the tab.

If we hover our mouse pointer over the tab

Chrome will display a tool tab showing the entire page title scrolling down a bit

here in the footer we can see our updated copyright line so far so good.

Now let's turn our attention to the menu.

The text application name still needs to be updated.

Let's switch back to Visual Studio and see if we can find where the text lives.

Go ahead and keep the website running.

For now, we'll only be making changes to our views

which can be edited while the website is running.

Open the Find and Replace dialogue using the keyboard shortcut Ctrl+Shift+F.

In the find what field let's enter the search criteria application.name and make

sure the looking field is set to entire solution then click the find all button.

Success down here in the Find one results panel.

We can see that we got exactly one match in line.

Double-click the search result to open the file.

The text we were looking for is in the _Layout.cshtml file,

which is the file that we already had open.

It really is true.

Sometimes what you're looking for is already right in front of you.

Let's change the text application name to Oregon Ski resorts then save the file,

switch back to Chrome and reload the page by clicking the refresh button here in

the address bar or by using the keyboard shortcut Ctrl+R.

If the page doesn't refresh right away don't worry, the delay is just the MVC

framework processing the changes that we've made to our view.

Great, here's our new website name in the menu.

Great job getting your hands dirty and updating your website content.

I'm gonna leave updating the rest of the content on your website as an exercise for

you to complete on your own.

By repeating the process that we just covered

you'll be able to update all of the remaining pages.

If you get stuck be sure to stick with it.

The most meaningful learning that you can do won't be easy.

In fact, it should challenge you.

If you can't figure something out reach out to others on the tree house community

for help or check the teacher's notes for links to additional resources.

Also don't forget to have fun with it.

Before we wrap up this video I wanna show you something that I think is pretty cool,

our websites look and feel which includes everything from the layout and

color of the menu to the background color of our pages

comes from the Twitter bootstrap CSS framework.

As you've seen in this workshop Bootstrap makes it easy for

developers to create websites or applications that look great.

Another advantage of using a popular CSS framework like Bootstrap is that there

are a wide variety of compatible themes that you can download and use.

Switching to a new Bootstrap theme is an easy way to completely change the look and

feel of your website.

Let's see how this is done.

Bootswatch is one of the many websites that offers bootstrap themes.

All the themes that we see here are free.

Here's one that looks interesting, the darkly theme.

Let's update our website to use this theme.

Back in Visual Studio, let's show the Solution Explorer panel by clicking

the tab here on the right and then the pin in the right-hand corner to keep it open.

That's a little narrow for my taste, so let's grab this divider and

drag it to the left to make the panel bigger.

There are two CSS files that we need to update in our project.

The bootstrap.css and bootstrap.min.css files.

Both of these files can be found in the content folder,

here and here.

Switching back to my browser.

I can download the CSS for

these files by clicking the down arrow here on the download button.

Let's start by downloading the bootstrapped.css file

clicking on the link will download the CSS into a new tab.

From here I can press Ctrl+A to select all the text then Ctrl+C

to copy the text to the clipboard.

Then in Visual Studio I can double click the bootstrap.css file to open it.

Press Ctrl+A to select all of the text and

Ctrl+V to paste the text from the clipboard into the file.

Then press Ctrl+S to save the file.

Be sure to repeat this process for the bootstrapped.min.css file.

Now switch back to the browser and refresh the page.

And just like that here's our website with a new code of paint.