1
00:00:00,420 --> 00:00:05,520
Welcome back in this lesson we're going to finish off the styling of the campground show page at the

2
00:00:05,520 --> 00:00:06,550
end of the last video.

3
00:00:06,630 --> 00:00:08,540
I mentioned some of the changes that we need to make.

4
00:00:08,640 --> 00:00:10,970
That can't be addressed with pure bootstrap.

5
00:00:10,980 --> 00:00:13,050
We need to add in some custom styles.

6
00:00:13,050 --> 00:00:18,570
So we need to change the width of this image here so that it takes up 100 percent of the thumbnail.

7
00:00:18,750 --> 00:00:21,050
We wanted to add some padding in here.

8
00:00:21,120 --> 00:00:25,050
This is what it should look like where we have padding and you can see the image takes up the entire

9
00:00:25,050 --> 00:00:25,880
container.

10
00:00:26,280 --> 00:00:31,810
And to accomplish that we could go into the showed at each Yes and add a style tag up here.

11
00:00:32,280 --> 00:00:34,050
But that's not really a great idea.

12
00:00:34,050 --> 00:00:39,840
So instead we're going to add in our first custom style sheet and to make that work we're going to make

13
00:00:39,840 --> 00:00:42,960
a public directory just like we did in an earlier lesson.

14
00:00:43,110 --> 00:00:48,790
So I'm going to make directory public and then I'll make another directory inside of public.

15
00:00:48,870 --> 00:00:55,350
This one will be called style sheets so public slash style sheets and we'll have another one eventually

16
00:00:55,350 --> 00:01:00,810
for our javascript's the front and Javascript and we'll hit enter and then we're going to make a single

17
00:01:00,810 --> 00:01:09,210
file inside of stylesheets public sosh style sheets slash and we'll call this mean Dotsie SS Just like

18
00:01:09,210 --> 00:01:10,000
that.

19
00:01:10,470 --> 00:01:11,260
OK.

20
00:01:11,520 --> 00:01:13,040
Now we want to open that up.

21
00:01:13,380 --> 00:01:19,830
So we'll open that file up stylesheets main gutsiest us and let's start by adding something really obvious

22
00:01:19,830 --> 00:01:26,790
in here like setting the background color for the body to be purple and save and then we have to go

23
00:01:26,790 --> 00:01:28,140
ahead and get this connected.

24
00:01:28,140 --> 00:01:36,790
So in the app case we have to add a line in here where we do an app dot use Express that's static.

25
00:01:37,380 --> 00:01:41,790
And then what we did last time was just add in public but there's actually a slightly better way of

26
00:01:41,790 --> 00:01:44,380
doing it that I didn't want to show right away.

27
00:01:44,400 --> 00:01:50,370
But I mean to show it now all we have to do is add an underscore underscore dear name directory name

28
00:01:50,880 --> 00:01:57,050
plus slash public dir name refers to the directory that this script was running.

29
00:01:57,180 --> 00:01:58,630
So let me show you what that looks like.

30
00:01:58,800 --> 00:02:07,920
If I just do a console but log underscore underscore to your name just like that and save and restart

31
00:02:07,920 --> 00:02:10,190
the server.

32
00:02:12,000 --> 00:02:13,440
Notice what I get right here.

33
00:02:13,530 --> 00:02:19,560
This is the directory name the whole path workspace lushly of camp slash v 5.

34
00:02:19,710 --> 00:02:26,940
So by adding dir name plus slash public we're just being safer because if potentially somehow this changed

35
00:02:26,940 --> 00:02:30,390
the current directory got weird something happened that we weren't expecting.

36
00:02:30,450 --> 00:02:36,210
Which hopefully never does but if it did do your name will always be the directory that the script lives

37
00:02:36,210 --> 00:02:36,650
in.

38
00:02:36,900 --> 00:02:41,240
So we're just being safer and adding slash public and it's just the more conventional way of doing it

39
00:02:41,250 --> 00:02:41,860
in.

40
00:02:42,060 --> 00:02:43,820
We won't see a difference at all.

41
00:02:43,860 --> 00:02:44,920
So we'll save.

42
00:02:44,930 --> 00:02:50,140
We can get rid of this and what we've done is added in our simple mind.

43
00:02:50,190 --> 00:02:52,390
SS But we haven't linked to it yet.

44
00:02:52,530 --> 00:02:54,500
So we've served the public directory.

45
00:02:54,600 --> 00:02:59,460
We're now serving everything in that directory which is really just a single folder stylesheets and

46
00:02:59,460 --> 00:03:01,540
a single file may end up us.

47
00:03:01,620 --> 00:03:05,510
But now let's go link to that file and let's do it on the header file.

48
00:03:05,580 --> 00:03:14,920
So I'm going to C9 views slash Parshall's slash hetter and then up top in the head after bootstrap.

49
00:03:14,980 --> 00:03:22,200
I'm going to add another link tag and this one is going to be H ref equals slash stylesheets

50
00:03:24,660 --> 00:03:31,330
slash main C Ss and then we'll also add in row here to be style sheet.

51
00:03:31,950 --> 00:03:32,500
OK.

52
00:03:32,850 --> 00:03:38,340
So we've now linked to hopefully our style sheet that we're now serving from the public directory.

53
00:03:38,340 --> 00:03:40,680
And let's test it out if it worked.

54
00:03:40,740 --> 00:03:45,350
It will be on every single page because every page that has the header partial included.

55
00:03:45,630 --> 00:03:46,380
Let's test that out.

56
00:03:46,380 --> 00:03:48,450
We're just going to our landing page.

57
00:03:48,450 --> 00:03:48,980
There we go.

58
00:03:48,990 --> 00:03:55,230
It's all purple and if we go to view our campground There's also a purple background totally up to you

59
00:03:55,230 --> 00:03:56,510
if you want to keep it as purple.

60
00:03:56,610 --> 00:03:57,620
I'm going to change it back.

61
00:03:57,750 --> 00:04:03,210
But I am going to add in the style that we won and those styles are going to affect thumbnails.

62
00:04:03,210 --> 00:04:07,050
So these are the thumbnails as well as this thumbnail.

63
00:04:07,080 --> 00:04:13,170
We're going to make the image take up 100 percent of the width so on both the show page and the index

64
00:04:13,170 --> 00:04:18,000
page we want that to happen so we can go back and change and upsy assess.

65
00:04:18,180 --> 00:04:21,750
So we'll start by selecting all images inside of thumbnails.

66
00:04:21,900 --> 00:04:25,300
So we need thumbnail because it's a bootstrap class.

67
00:04:25,550 --> 00:04:31,290
And then image tag with the space between them that's all image tags inside of thumbnails.

68
00:04:31,290 --> 00:04:36,180
And then we just want to set the width to be 100 percent just like that.

69
00:04:36,300 --> 00:04:42,420
And if we save and refresh and let's go to a show page you can see our image now takes up 100 percent

70
00:04:42,420 --> 00:04:43,510
of this thumbnail.

71
00:04:43,860 --> 00:04:48,210
Then we need to solve this padding issue which is really easy to fix as well where we want to get rid

72
00:04:48,210 --> 00:04:51,820
of that spacing to do that we need to select the thumbnail itself.

73
00:04:51,870 --> 00:04:56,350
The thumbnail div and get rid of the padding and just set it to be zero.

74
00:04:56,490 --> 00:05:01,580
So Dot thumbnail padding 0.

75
00:05:01,890 --> 00:05:02,930
Let's save.

76
00:05:03,120 --> 00:05:05,260
Keep your eye on this padding there.

77
00:05:05,280 --> 00:05:06,130
Now it's gone.

78
00:05:06,510 --> 00:05:11,230
And if we go back to our index page you can see these are also now flush.

79
00:05:11,280 --> 00:05:12,980
We don't have any padding there either.

80
00:05:13,320 --> 00:05:17,100
I personally prefer it without the padding here with no space in between.

81
00:05:17,250 --> 00:05:22,290
But it is a matter of personal preference and if you do want that space back in there what you can do

82
00:05:22,320 --> 00:05:27,910
is not apply these styles this style in particular to every single thumbnail.

83
00:05:27,990 --> 00:05:34,290
Instead you could give on our show page you could give this thumbnail right here an ID or a special

84
00:05:34,290 --> 00:05:39,280
class and then you would only apply this paddings zero to that class or two that ID.

85
00:05:39,480 --> 00:05:44,970
But I'm going to do it to all of them and then the other issue we need to solve is the padding here

86
00:05:44,980 --> 00:05:45,380
.

87
00:05:45,780 --> 00:05:53,970
So inside of this caption ful if we inspect it that's the div that we created can see right here it's

88
00:05:53,970 --> 00:05:55,560
a div class caption full.

89
00:05:55,770 --> 00:06:00,870
We want to add some padding there and the number we decided on in the last video was 9 pixels.

90
00:06:00,930 --> 00:06:02,830
So let me close the con..

91
00:06:03,030 --> 00:06:08,850
Go back here and I'm just going to select rather than all caption foal's I'm only going to select the

92
00:06:08,850 --> 00:06:11,100
caption folds inside of a thumbnail.

93
00:06:11,220 --> 00:06:21,690
So Dot thumbnail space caption full and we'll give them padding of nine pixels just like this save let's

94
00:06:21,690 --> 00:06:23,130
refresh the page.

95
00:06:23,130 --> 00:06:23,750
There we go.

96
00:06:23,760 --> 00:06:26,130
We get that spacing that we're looking for.

97
00:06:26,130 --> 00:06:26,390
All right.

98
00:06:26,400 --> 00:06:27,610
So that's all I wanted to do.

99
00:06:27,780 --> 00:06:29,910
Let's quickly recap what we accomplished.

100
00:06:29,910 --> 00:06:36,470
We made a new file main Nazi SS and we put that inside of the public directory inside of stylesheets

101
00:06:36,840 --> 00:06:41,490
and eventually they will have more style sheets one for the landing page in particular and we'll also

102
00:06:41,490 --> 00:06:43,560
have javascript's that go in here as well.

103
00:06:43,680 --> 00:06:49,740
And then to actually use the public directory we have to interact Yes tell express to serve the public

104
00:06:49,740 --> 00:06:50,410
directory.

105
00:06:50,520 --> 00:06:55,230
And I showed you this underscore underscore your name and the very last thing is that we included it

106
00:06:55,230 --> 00:06:56,660
on the header file.

107
00:06:56,680 --> 00:07:01,300
It's just right here and we link to it with Slash stylesheets slash maned see SS