[00:00:01] Hi and welcome back to the reactor cores in the this guy and we're going to use our styles here that we set up and the last guide and actually Steinmann our tax year. So let's go ahead and look at the design. First thing we talked about actually was this margins of 60 pixels 63. Let's go ahead and add that in on the paragraph tag I'm going to say margin 63 pixels and sixty point five pixels. Back to the design back to the app and we will see what happens for body content here. All right. It appears to me that nothing happened. I'm just going to double check by clicking on these let's just add in like a background color to see if it's hiding something Kate for some reason it is not displaying the styles on our paragraph tag and that's because of course once again we haven't imported it so let's say for it in our main diciest US news content. Save that and head back to the CFS and back into the app itself. You know what. We have our styles. I'm going to leave this background color for now just so we can kind of see it. Let's end this border on the entire component. So it looks like the worry is just five pixels five pixels in zero zero. OK it looks good to me. Let's add that in. So the entire content let's just say really is a copycat from the design whether it's 5 pixels light pixel zero zero save that and go back to the OP and I don't see anything that has changed. [00:02:07][126.5]
[00:02:08] Let's go ahead and just wing it and see if we can get in there let's say Bohrer. Yeah that's the radius that's why. Let's leave that and let's add in the border itself which should be interesting that they don't. Oh it's in here OK. I was on the on something else probably and the image that was on the image. OK. So let's move this border radius to the image and just leave it there because we know it. Now it looks out in the styles of the rectangle itself. I'm going to copy this all just from move we don't need. OK we don't need that. We're that now we can put this over to the left. We don't need border box box sizing. We could be the height and weight for now but we'll probably end up getting rid of that. We on the border radius the border of one pixel solid E6 66 and the background color white. We don't need that obviously. Let's save that and look in the browser and see what we got. All right. And you can see that we have it's looking pretty nice. Now let's go ahead and add in the styles for the image and the title here. So we do have an image on this item Yuru. You probably have an image on yours but if you don't just navigate to an item with an image or we could just create a new one. So say a new newsletter. I'm going to say OK. So we don't have an image. Let's see what we can do. [00:03:49][100.9]
[00:03:58] Let's post one so let's open the post man postman and if you don't have post fan I recommend you download this and do this so we can get the styles in on the image and then I'm going to just say property management Roku app obviously and then I'm going to say slash newsletter slash slash Colan or. And then we don't need 90 slots newsletters Flash and Flash. Yeah that's going to have post for the body I'm just going as a title and I'm putting new item body put in. Laura I'm going to copy that a whole bunch of times now for the image you're Elle. I'm going to put up a placeholder. Let's see that what it is. Yeah the placeholder 960 2068 and then I'm going to post or send OK so that should be good. I'm going to go back to the app and you're going to have to do that as well so I recommend you download postman and do that unless there's an item in here with an image and a newsletter. And we have our image on the first item really awesome. OK. Now let's go ahead and styled this so it appears above the image like we see here in the design. First thing I'm going to do is copy these styles and then actually not have to add into bunches or not a bunch but some styles of her own to actually get this effect because this is not going to be anywhere near the SS with the positioning. So I want to go to a map here. I'm going to put it on the page to get rid of this tag. Obviously New Year's resolution backing up a bit. [00:06:05][126.4]
[00:06:06] Get rid of the heightened with the color. We'll leave that since it's by default black. And then for our farm families can get rid of that. And then we want to change the 500 to bald. Let's save that and see where it puts us. It's probably going to disappear. Yeah because the cost of white to the backroom white slips position it now. But this we can get this effect by giving the image container a position of relative and then giving our age to a position of absolute complete set of top cases. And it might work. Oh sweet. That's correct. But now we just need a Centerin. So we need up pretty easily just by saying top 50 percent left 50 percent and transform. Translate minus 50 percent minus 50 percent. That will position us directly in the middle of the sweep. Really awesome. Right in the middle. You know it's Eslinger title. Much like we have here and it's in the center. So that's exactly what we want. Let's see what we have to do next. So we have to style all these buttons out and we don't want them in the content. Here we actually need to put them like a peer. And then this one right here. So we'll get into that in the next guy the next that will be dedicated solely to that ad and add it buttons. But for now we got most of our stylizing for the content component. Let's go ahead and move on and then finish it in the next guy. [00:07:51][105.1]
[00:07:52] So let's say it gets status get good commit started styling the newsletter content component right. Or catching the next guy. [00:07:52][0.0]
[458.9]