Welcome back in this lesson we're going to finish off the styling of the campground show page at the
end of the last video.
I mentioned some of the changes that we need to make.
That can't be addressed with pure bootstrap.
We need to add in some custom styles.
So we need to change the width of this image here so that it takes up 100 percent of the thumbnail.
We wanted to add some padding in here.
This is what it should look like where we have padding and you can see the image takes up the entire
container.
And to accomplish that we could go into the showed at each Yes and add a style tag up here.
But that's not really a great idea.
So instead we're going to add in our first custom style sheet and to make that work we're going to make
a public directory just like we did in an earlier lesson.
So I'm going to make directory public and then I'll make another directory inside of public.
This one will be called style sheets so public slash style sheets and we'll have another one eventually
for our javascript's the front and Javascript and we'll hit enter and then we're going to make a single
file inside of stylesheets public sosh style sheets slash and we'll call this mean Dotsie SS Just like
that.
OK.
Now we want to open that up.
So we'll open that file up stylesheets main gutsiest us and let's start by adding something really obvious
in here like setting the background color for the body to be purple and save and then we have to go
ahead and get this connected.
So in the app case we have to add a line in here where we do an app dot use Express that's static.
And then what we did last time was just add in public but there's actually a slightly better way of
doing it that I didn't want to show right away.
But I mean to show it now all we have to do is add an underscore underscore dear name directory name
plus slash public dir name refers to the directory that this script was running.
So let me show you what that looks like.
If I just do a console but log underscore underscore to your name just like that and save and restart
the server.
Notice what I get right here.
This is the directory name the whole path workspace lushly of camp slash v 5.
So by adding dir name plus slash public we're just being safer because if potentially somehow this changed
the current directory got weird something happened that we weren't expecting.
Which hopefully never does but if it did do your name will always be the directory that the script lives
in.
So we're just being safer and adding slash public and it's just the more conventional way of doing it
in.
We won't see a difference at all.
So we'll save.
We can get rid of this and what we've done is added in our simple mind.
SS But we haven't linked to it yet.
So we've served the public directory.
We're now serving everything in that directory which is really just a single folder stylesheets and
a single file may end up us.
But now let's go link to that file and let's do it on the header file.
So I'm going to C9 views slash Parshall's slash hetter and then up top in the head after bootstrap.
I'm going to add another link tag and this one is going to be H ref equals slash stylesheets
slash main C Ss and then we'll also add in row here to be style sheet.
OK.
So we've now linked to hopefully our style sheet that we're now serving from the public directory.
And let's test it out if it worked.
It will be on every single page because every page that has the header partial included.
Let's test that out.
We're just going to our landing page.
There we go.
It's all purple and if we go to view our campground There's also a purple background totally up to you
if you want to keep it as purple.
I'm going to change it back.
But I am going to add in the style that we won and those styles are going to affect thumbnails.
So these are the thumbnails as well as this thumbnail.
We're going to make the image take up 100 percent of the width so on both the show page and the index
page we want that to happen so we can go back and change and upsy assess.
So we'll start by selecting all images inside of thumbnails.
So we need thumbnail because it's a bootstrap class.
And then image tag with the space between them that's all image tags inside of thumbnails.
And then we just want to set the width to be 100 percent just like that.
And if we save and refresh and let's go to a show page you can see our image now takes up 100 percent
of this thumbnail.
Then we need to solve this padding issue which is really easy to fix as well where we want to get rid
of that spacing to do that we need to select the thumbnail itself.
The thumbnail div and get rid of the padding and just set it to be zero.
So Dot thumbnail padding 0.
Let's save.
Keep your eye on this padding there.
Now it's gone.
And if we go back to our index page you can see these are also now flush.
We don't have any padding there either.
I personally prefer it without the padding here with no space in between.
But it is a matter of personal preference and if you do want that space back in there what you can do
is not apply these styles this style in particular to every single thumbnail.
Instead you could give on our show page you could give this thumbnail right here an ID or a special
class and then you would only apply this paddings zero to that class or two that ID.
But I'm going to do it to all of them and then the other issue we need to solve is the padding here
.
So inside of this caption ful if we inspect it that's the div that we created can see right here it's
a div class caption full.
We want to add some padding there and the number we decided on in the last video was 9 pixels.
So let me close the con..
Go back here and I'm just going to select rather than all caption foal's I'm only going to select the
caption folds inside of a thumbnail.
So Dot thumbnail space caption full and we'll give them padding of nine pixels just like this save let's
refresh the page.
There we go.
We get that spacing that we're looking for.
All right.
So that's all I wanted to do.
Let's quickly recap what we accomplished.
We made a new file main Nazi SS and we put that inside of the public directory inside of stylesheets
and eventually they will have more style sheets one for the landing page in particular and we'll also
have javascript's that go in here as well.
And then to actually use the public directory we have to interact Yes tell express to serve the public
directory.
And I showed you this underscore underscore your name and the very last thing is that we included it
on the header file.
It's just right here and we link to it with Slash stylesheets slash maned see SS