Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Styling your app

From: Building Facebook Applications with PHP and MySQL

Video: Styling your app

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.

Styling your app

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.

Show transcript

This video is part of

Image for Building Facebook Applications with PHP and MySQL
Building Facebook Applications with PHP and MySQL

24 video lessons · 8790 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Building Facebook Applications with PHP and MySQL.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.