Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So right now the data we are getting from the Open Graph API is great, but it looks a little boring. So it's time to add some style to our application. We will have to add some additional divs so that we can target specific areas a little bit better. So let's dig right into the HTML. Right now, we have a div for each friend, called friendinfo, and it's on this line right here. So I really want the friendinfo to be just a div for the top part of my friends information just the part with the photo, the name of the friend, and the word Recommends.
So I am going to take this div and close it right after the word Recommends. I have an extra div down here, and I can't have that, but I still need another div that encompasses each friend's info. So right on top of what used to be the friendinfo div, I am going to grab this and paste another copy of it on top and just call it friend.
Now I have a div for the friends information just these three lines, and then another div for all the information, including the movies that are within each friend. One more thing that I need to do is move this div for movieinfo, and put it right on top of the wrapper. I want movieinfo to be just the information about the movies. I want to take that and make it a popup when I roll over each of the images. So now we are ready to get styling. Let me go ahead and save this, and I'll refresh this document.
It's not going to look any different, the divs are just moved a little bit. So I am going to switch over to my Style Sheets, and I'll start working on some styles. The first thing I am going to do is I am going to get rid of everything called lgrid. That's some old styles that we use to make a grid of images on an earlier movie. So I want to do something that I can only do on my particular editor, and that is turn on a feature called live preview. To do that I need to go right here to the Style Sheets and Select Manage Style Sheet Overrides and then override the style sheet that it's picking up for this preview window with the style sheet that I have open here.
It's going to add a little bit of code right here, and that's not really going to bother anything. It's just a comment. But it's going to make the application be able to apply the styles as I'm typing them, and that is going to be really useful. First thing I want to do is I want to create a style for my anchor tags and my anchor tags are going to be a color: rgb: and the RGB color is going to be 27, 129, and 140. That makes them this blue right here.
So the cool thing about this editor is as I'm typing things in, you can see what I'm doing on the right-hand side, and that's going to become really useful as I do some of the other styles. So I have a header section and in my FTP program, I've already uploaded a copy of this logo right here. It's going to be the logo that's going to appear right up here on the header. I want to add the code for the header section and first thing I'll do is I'll add some padding just to make sure that all the stuff moves to the right-hand side.
So 10 pixels, 10 pixels, and then 0 and 370. That scoots everything over to the right leaving room for my logo. Then I'll set the height to be 130 pixels and the color is going to be 555 just a little bit of a dark gray. Font size is going to be .9 ems, and this is where I am going to put in my logo. The background is going to be a URL and the name of that file is recommendatorlogo.png.
That brings in that logo, and it's in a nice position already. So I had added a style a while back for the notes, this logout URL and the login URL called notes. So I am going to style that now. Let's have padding of 10 pixels just to give it some breathing room from the left. Let's go ahead and style my friendinfo. So friendinfo, this is going to have a simple 1 pixel border at the top, and I'll give it a color of AAA.
It gives it a nice light gray color. I will add a little bit of margin just to give it a little more breathing room and a little bit of padding. I will set the background to an rgba color, 242, 197, 62, and .3. That makes it have a little bit of a blend with the background. I'll add a little bit of margin at the bottom of 1px.
You might not be able to see everything until I put all the styles together, but you'll get an idea of what's going on as I'm typing things. So next I am going to do the friendinfo headline 2. I'll change the font and let me change these sizes here a little bit. So I am just giving some color to the type of the headline level 2 and just adjusting the margin to the left just to push it in a little bit over and delete the padding here.
So let me go ahead and get rid of that margin. friendinfo headline level 3, it's also going to have a font tag. A little bit smaller font, and I am going to give it a red color. So color is going to be another rgba color. So it's going to have that red color like that. I'll get rid of the margin and the padding as well.
Now let's work with the image in the friendinfo area and what I'll do is I'll float it to the left and then I'll add a margin on the left-hand side of 10 pixels. I forgot to put the letter here in friend. But you could see that, that does just kind of push the headlines to the right of the image. Then I'll give it a little bit of a margin to each side. So margin-left and margin-right, and I'll do 8 pixels to the right.
That just moves it in a little bit, and now that's looking like a nice little info bar. Awesome. Let's go ahead and style the movies. This is the list of movies that are right there. I'll clear out the margin and the padding, and I'll change the list style to nothing, so it doesn't have those bullets. We don't see them, because they're actually pushed over to the left, but they were there a minute ago. Now I'll add a little bit of padding. Then I'll control the styles for each of the list items inside the movies class.
I am going to float these to the left. I am going to set the position of them to relative and the padding on the right-hand side to 10 pixels. You are not going to see what this is doing quite yet, but by setting the position to relative, I am going to be able to float this information for the movie later on. Now let's take the movie information. So, movies li .movieinfo. First I am going to style it and then I am going to hide it.
So I am going to do a webkit-border-radius of 10 pixels and then I will add a moz-border-radius for Firefox and just a standard border radius for normal browsers. So the padding to 20 pixels just add a little bit of room there. I am going to set the font size to .8 ems and make it a little smaller.
It doesn't need to be that big. Set the width of this to 300 pixels, and I am going to set a max height for this. Max height is going to be only 200 pixels just so that if I ever get into a description of a movie that's too long, then it's just going to crop it off. What I am going to do next is actually hide this by changing a display property to none. So that actually hides all that information that I just styled. So if I take this off you could see it, if I undo it, you see that they're gone, and now that's making our little images right there just be right next to each other.
I think I can just make this 5px, 0 on the styles for the movies. Now I am going to a apply style to the movieinfo wrapper, that internal part of that movie. So I'll set the max height to be 100 pixels, and I am going to set the overflow to be hidden. So you are not going to see that because all that stuff is being hidden right now. But that's going to actually crop the height of the wrapper and make the overflow still scrollable but not necessarily visible.
So as I said this information right now is hidden and with this next piece of code I am going to actually show it. So, ul.movies. Whenever you hover over a list item, I want you to do the following to the movieinfo. So here I'll set the background color of this, because it hasn't been showing yet. So it doesn't matter what the background color was before. This is going to be another semi-transparent color, and I am going to set the display of it to block. Now when I hover over these things, you actually are going to see the description up here.
It's kind of shifting things around. So I am going to fix that. To do that I'll set the position to absolute. So you see that it's not shifting the tiles around anymore. Fortunately some of these are underneath the pictures. So I need to fix that as well. I'll align these to the bottom of each image by 115 pixels, and to the left by 0. Then I'll set the Z index to something bigger than 0 so that it will appear on top.
So you could see now how that looks. You can see some of the cropping now that's happening when I roll over some of these items that are getting cropped off. And that's okay, because people are still going to be able to click on these images to get to the page with more of a description, but this just gives them a quick idea about what the page is supposed to be about. So that's okay. So let's work with the styles and the movie information a little bit more. So I'll do movies li .movieinfo h3. So this is the headline of the movie.
I'll set the margin and the padding to 0, that's just so you don't get running it out. My color is going to be just a hexadecimal color, 1B818C. Change the line height to be 1 em, and add some padding just to the bottom of 5 pixels. You can see now that the headlines look a little bit a better than they did a minute ago. So I like that, I want to do all this again. So I'll just copy this right there, and I know that I now want to modify the paragraph itself, and I wanted to set the margin and padding to 0 just like I did.
My color is going to be different. I'll just set it to 444. It's just like a gray color and the line I'll set to 1.4 em. So now when we roll over some of these, the paragraphs have a little bit better spacing between each line and they look a little nicer. Finally, I am going to take the images right here and style them a little bit differently. I am going to set the width and the height to 100 pixels. Then I am going to give them a little border.
Now this is because I am setting the width and the height to 100x100, because sometimes you get images back from the server that are not exactly 100x100. I know that I asked for them, but sometimes you get something other than what you asked for. So you may have images that are maybe more like posters and they are a little bit taller, or you may have images that are actually a tiny bit smaller. People just didn't upload very high-resolution images. This assures that I am going to get 100x100 pixel image, whether the image is too big or too small.
Then let's add a nice round edge. That's already looking a lot better. So really styling Facebook applications is exactly like doing any other page. So I know this feature that I have called Live Preview, it's not going to be on everybody's browser. I am going to go ahead and save this, and I'll go back into my application and refresh. So styling a Facebook application is exactly like styling any other page. We have a lot of great courses on CSS. I really like the CSS page layouts course.
So make sure you check it out if you need help understanding how CSS works.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96026 Viewers
56 Video lessons · 109854 Viewers
71 Video lessons · 78671 Viewers
82 Video lessons · 104993 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.