1 00:00:00,480 --> 00:00:04,560 The next page will modify is the blog Dot P HP page. 2 00:00:04,560 --> 00:00:06,740 Go ahead and open the file in your text editor 3 00:00:12,740 --> 00:00:15,320 on this page we need to change the following items 4 00:00:18,020 --> 00:00:25,410 we need to modify the page title headings in footer we need to replace the navigation code with the 5 00:00:25,420 --> 00:00:34,220 p HP requires statement as we have in the other pages we also need to modify the blog posts and activate 6 00:00:34,250 --> 00:00:39,850 the read more buttons so each blog post as an individual read more button 7 00:00:44,380 --> 00:00:50,320 and the objective is to have them launch a modal window which will present the viewer with some additional 8 00:00:50,320 --> 00:00:54,040 content so I'll show you an example on the completed version 9 00:01:03,780 --> 00:01:07,980 so as you can see when I click the read more button the modal appears 10 00:01:13,090 --> 00:01:23,060 in each model is customized relevant to the blog post we clicked on so you can see the title frozen 11 00:01:23,080 --> 00:01:31,370 criminal law team matches the blog post title and then we have some content area here note that will 12 00:01:31,370 --> 00:01:34,980 work on the member only access functionality later on. 13 00:01:35,030 --> 00:01:39,340 So don't worry about the logout function and logging in. 14 00:01:39,440 --> 00:01:43,400 That's something that we're going to be doing after this tutorial 15 00:01:46,740 --> 00:01:48,090 is let's go ahead and get started 16 00:01:51,460 --> 00:01:55,060 reading scroll down to line 12 and just change that the page title 17 00:02:02,450 --> 00:02:04,220 do the same with line 35. 18 00:02:14,650 --> 00:02:16,180 Delete the navigation code 19 00:02:18,910 --> 00:02:21,760 and replace it with the BHP require statement 20 00:02:26,810 --> 00:02:29,780 and on line forty eight. 21 00:02:29,840 --> 00:02:35,360 Change the title company blog to the perfect cup. 22 00:02:36,350 --> 00:02:38,090 And also we'll need to change the footer 23 00:02:46,270 --> 00:02:50,440 so I've just saved the file and I'm going to refresh it. 24 00:02:50,540 --> 00:02:53,190 So the navigation is working. 25 00:02:54,020 --> 00:02:55,920 The title has been updated. 26 00:02:56,270 --> 00:03:01,310 Updated and the footers is also updated. 27 00:03:01,420 --> 00:03:04,460 We'll need to change the text for each blog post. 28 00:03:04,600 --> 00:03:11,520 So here it says the post title and it has some sample text attached to it so we'll just go ahead and 29 00:03:11,520 --> 00:03:20,340 change it to some more relevant information so I'll start with the first one which is which is on line 30 00:03:22,040 --> 00:03:22,930 50 for 31 00:03:27,750 --> 00:03:29,270 and then the second one. 32 00:03:33,890 --> 00:03:34,570 And then the third 33 00:03:40,180 --> 00:03:44,890 I've just saved the changes and we can see that the page has been updated. 34 00:03:45,970 --> 00:03:54,430 Next we need to add a data toggle and data target attribute to each one of these read more buttons and 35 00:03:54,430 --> 00:03:58,930 so the purpose of this is to launch the modal when the button is clicked. 36 00:03:58,930 --> 00:04:05,840 We haven't created the models yet we'll do that after we finish this step so me scroll up to the first 37 00:04:05,840 --> 00:04:08,880 button which is right over here. 38 00:04:11,560 --> 00:04:12,580 Online 59. 39 00:04:13,220 --> 00:04:23,630 And I'm going to replace this with a button element. 40 00:04:23,850 --> 00:04:34,100 So here's our button element type Button class Beatty in and Beatty and info so large size except the 41 00:04:34,100 --> 00:04:36,720 data toggle to model and data target. 42 00:04:36,740 --> 00:04:46,750 To my model remember that the data target will launch the modal associated with this with this I.D. 43 00:04:49,280 --> 00:04:56,340 So it's important that each button has a unique data target name and you'll see that in just a second. 44 00:04:57,680 --> 00:05:02,520 So refreshed and there's the button do the second one. 45 00:05:12,400 --> 00:05:21,170 So this data target is set to my model to and the third one will be set to my model three 46 00:05:26,950 --> 00:05:27,230 OK. 47 00:05:27,240 --> 00:05:33,770 So we have each one of the buttons done just refresh the page and you can see that the button color 48 00:05:33,770 --> 00:05:41,150 is blue because of the class we've used Beatty and dash info if just the blue button. 49 00:05:41,150 --> 00:05:46,880 Now let's go ahead create the models and we'll we'll create the models towards the bottom of the page 50 00:05:47,630 --> 00:05:59,670 right before the footer. 51 00:05:59,840 --> 00:06:02,060 So that's what the modal syntax looks like. 52 00:06:03,150 --> 00:06:05,660 You can see that we've specified the I.D.. 53 00:06:05,760 --> 00:06:11,010 And this corresponds to the button that we created earlier 54 00:06:13,800 --> 00:06:15,860 and then we have the class model fade 55 00:06:18,830 --> 00:06:29,420 and in the modal content we have the content area the header for the modal a close button. 56 00:06:29,790 --> 00:06:31,080 And we've worked with models before. 57 00:06:31,080 --> 00:06:32,630 So all this should look familiar. 58 00:06:32,780 --> 00:06:37,130 The modal title modal body and modal footer. 59 00:06:37,130 --> 00:06:43,560 So I'll save that and we'll refresh and I'll go ahead and load the first model so there it is. 60 00:06:44,660 --> 00:06:45,400 That's what it looks like 61 00:06:49,430 --> 00:06:53,160 the syntax for the second and third model is going to be almost identical. 62 00:06:53,160 --> 00:06:58,660 The only thing that's going to change is the I.D. and the content. 63 00:06:58,660 --> 00:07:05,840 For example the title so I've already created the code for this 64 00:07:08,880 --> 00:07:10,550 for modal too and Model 3 65 00:07:17,610 --> 00:07:18,290 and so there it is 66 00:07:22,620 --> 00:07:31,220 modal too there's the I.D. my model to and we can see that the modal title has changed to Irish coffee. 67 00:07:31,250 --> 00:07:32,420 That's the only difference. 68 00:07:32,420 --> 00:07:37,980 Nothing else has changed and for modal three the only thing that's changed is the I.D.. 69 00:07:38,540 --> 00:07:43,580 My modal three and the title frozen caramel octane. 70 00:07:44,680 --> 00:07:48,140 So I've saved the file a refresh and now each one should work 71 00:08:00,560 --> 00:08:04,620 and so that completes that page and we'll see you in the next lesson.