1
00:00:00,170 --> 00:00:02,020
So this should be a really short video.

2
00:00:02,029 --> 00:00:09,920
All I'm going to do is add a custom bootstrap CSS file and add some styles into the index CSS and a

3
00:00:09,920 --> 00:00:10,610
logo.

4
00:00:10,610 --> 00:00:18,050
So if you go to the final GitHub repo or you download the final project and you go into let's just go

5
00:00:18,050 --> 00:00:19,190
to the root here.

6
00:00:19,220 --> 00:00:21,160
So this is the finished project, right?

7
00:00:21,170 --> 00:00:29,510
If you go into front end and then source, there's this assets folder that has the logo and then styles.

8
00:00:29,510 --> 00:00:33,650
And in styles we have the custom bootstrap and the custom index CSS.

9
00:00:33,650 --> 00:00:37,940
So basically we just want to bring that assets folder into.

10
00:00:38,590 --> 00:00:42,100
The source folder of our project like that.

11
00:00:43,000 --> 00:00:45,830
And then we need to bring it in.

12
00:00:45,850 --> 00:00:48,310
So let's go to.

13
00:00:50,730 --> 00:00:51,480
Let's see.

14
00:00:51,480 --> 00:00:57,830
So Styles now this index CSS we don't need, we can delete that.

15
00:00:57,840 --> 00:01:03,210
I actually forgot about that because we now have it in the assets styles.

16
00:01:03,210 --> 00:01:10,410
So what we want to do is in our index JS where we're bringing in or where we were bringing in that index

17
00:01:10,410 --> 00:01:18,570
CSS and the bootstrap, I'm going to comment this version of bootstrap out the default and then I'm

18
00:01:18,570 --> 00:01:29,010
going to right here import from slash assets, slash styles, slash index, CSS and then above it,

19
00:01:29,010 --> 00:01:32,490
I'm going to import the bootstrap.

20
00:01:33,660 --> 00:01:34,110
Let's see.

21
00:01:34,110 --> 00:01:36,900
So it's called is it called is it just bootstrap?

22
00:01:36,900 --> 00:01:39,720
It's bootstrap custom dot CSS.

23
00:01:39,720 --> 00:01:41,790
So I'm going to put that here.

24
00:01:41,970 --> 00:01:48,840
So bootstrap dot custom dot CSS, we already have that.

25
00:01:49,350 --> 00:01:49,860
Okay.

26
00:01:49,860 --> 00:01:51,340
Now let's save it.

27
00:01:51,340 --> 00:01:55,330
And now we have a different kind of look here.

28
00:01:55,330 --> 00:01:59,320
We have this like greenish grayish primary color now.

29
00:01:59,800 --> 00:02:00,160
All right?

30
00:02:00,160 --> 00:02:01,900
And again, this is completely optional.

31
00:02:01,900 --> 00:02:04,780
If you want to stick with the regular bootstrap theme, that's fine.

32
00:02:04,780 --> 00:02:06,940
I just wanted to change it up a little bit.

33
00:02:06,940 --> 00:02:14,350
And then if we look at the index CSS, I just have some basic styles for like when we do the ratings,

34
00:02:14,350 --> 00:02:22,780
this will make the stars yellow rating text product title some style for the tables in the admin section,

35
00:02:22,810 --> 00:02:24,730
the reviews and then the carousel.

36
00:02:24,730 --> 00:02:27,340
So not much, just a couple extra styles.

37
00:02:27,340 --> 00:02:30,520
And if you want to add custom CSS, that's where you would put it.

38
00:02:30,520 --> 00:02:33,700
And then the last thing is just to add the logo to the header.

39
00:02:33,700 --> 00:02:42,010
So let's go back into the header component and let's see, we're going to import, let's say import

40
00:02:42,040 --> 00:02:48,490
logo from and that's going to be, let's see, we're going to go up one level.

41
00:02:48,490 --> 00:02:55,150
So dot, dot slash into assets Logo.png and then where we have our brand.

42
00:02:55,240 --> 00:02:58,090
So right here we have the text of pro shop.

43
00:02:58,090 --> 00:03:00,730
I'm going to keep that text, but I'm going to go.

44
00:03:01,570 --> 00:03:02,860
Right above it.

45
00:03:03,160 --> 00:03:09,870
And then here we'll put our image and the source is going to be to logo.

46
00:03:09,880 --> 00:03:12,160
And for the alt, I'll just put.

47
00:03:12,780 --> 00:03:13,790
Pro shop.

48
00:03:13,800 --> 00:03:15,240
So let's save that.

49
00:03:15,240 --> 00:03:23,820
And now we have the logo and it also made the nav bar thicker, which which makes it look a little less

50
00:03:23,820 --> 00:03:24,930
bootstrap y.

51
00:03:25,350 --> 00:03:25,740
All right.

52
00:03:25,740 --> 00:03:27,480
So that's it for this video.

53
00:03:27,480 --> 00:03:32,130
Let's move on to the next one where we're going to start to list some some products.

54
00:03:32,130 --> 00:03:33,720
They'll be hard coded for now.

55
00:03:33,720 --> 00:03:38,130
But just to just to kind of start with the product components.