FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Footer Menu, Icons & Feed

Hi, guys. Welcome back to Getting Started with the Semantic UI. And in this lesson, I want to take a look at the footer and also making sure everything works with the header as well. So all the stars are in, and then we can move on in the next lesson after this one to the content on the home page. So the first thing I'd like to mention to you is inside the images directory. I've added in a new image. It's 70 pixels by 70 pixels, and it's called person.jpg. So now that I have this image in here, I can go back and take a look at the footer.php file. So, continuing on from where we last left off, we were going to look at the third column. But just before I do that, I actually like the idea of having the divider that we have in this middle section on this right here on the left-hand side and also on the third column as well. So let's copy that and paste it up here. And then I want to change this to be the list icon. And then I'm going to copy that and paste it in the third column. And this one is going to be the pencil icon. So if I save that now and we hit refresh, you'll notice we now have those dividers above each section. That looks nice. And now let's take a look at collapsing this cuz otherwise, it can get a little bit confusing. And so we can focus our main attention on adding in content to the third column underneath the divider we just placed in. So, reviewing this Semantic UI documentation again. Open up the menu. And if we scroll down, we can take a look at the Feed underneath the Views section. So if I take a look at the feed, you're able to see that we can have either an image or an icon right here resembling what type of event or activity it is. And then you can have, you know, links inside of here, normal text. You can also have some optional text that says, you know, when this activity happened. And then also, you can have another extra section, where you can put images and so forth in. Now, don't worry about the styling around the edges because that styling is not actually part of the feed section. And if you review the code, you can see here we have the class of piled. And we also have the class of segment. Now, we don't actually want that because we're gonna take a look at that later on, but we want it to just show the feed or the activities on their own. We don't want that surround on there. But if you actually scroll down, you do have a Segments section, and you're able to review it. And you can see here we have a piled segment. So those two classes, piled and segment, have nothing to do with the feed. So do be careful of that and if you're ever unsure, take a look at the classes and then see if you can find a category within the menu. So let's go back to the feed and we can review the code. And you have many, many options down here, so you have all different types of content. And then the variations allow you to just change the size, so we'll probably go with a small size so that we can fit at least two activities in the footer. So, reviewing that code, we have the div element with a class of ui feed, so you need those two classes. But you don't need piled and segment. Now you just add that nice, you know, surround to it. Then we have the header too, which I'm not interested in. Then also you have the div element with the class of event. So this is an event or an activity within the feed. Then you have your label. So your label can be either an image, which will be our person image in our case, or it could be a circular icon or something like that. It doesn't have to be a circular icon, but that does look pretty nice inside of there. And if we scroll down, we can see here, you know, they've defined this as a circular icon, but you don't have to. And then we also have below there the content section within the event. So the content will allow us to view information about it. So for example, the date of the event within the feed. So, was it posted just a few moments ago? Three days ago? So on and so forth. And that text is displayed on the right-hand side. Then we have the summary. So the summary allows you to just, give you a brief summary of what this event is. You can have a link inside of here if you want to and just some general text. And then also, if we take a look at the very last example, you can have images in here, but that's not part of the summary div. So if I scroll down, you're able to see this, another div that says extra images. And also, you'll notice with the second one, we sort of had this nice indented section, which if we review the code, you have the summary and then you have extra text. So you could have extra images or extra text. So now it's time to take our information and put that into our footer section. So first we're gonna create a div for the class of ui and also we need the class of feed. And also I'm gonna put in the class of small, which was in the variation, so we can have a small feed. Then also I'm going to have the div with the class of event, and then we want the div with the class of label, which is either the image or it could be an icon or pretty much whatever type of label you want. And I'm just going to stick with the image, and we're going to take a look inside of the images directory, and then we're going to load in that person.jpg. And don't worry about the size and dimensions. The CSS that's supplied by Semantic will take care of that. All you need to do is make sure you put in an alt attributes, so I'll just say Person right here. And then the next thing we want to do is add in a div with the class of content. So this is the content for the current event. So the content, I will just first of all put in a div with a class of date, which don't forget, that's over the right-hand side in sort of grayed out text. So I can just say, all right, well, that was posted just now, something like that. Then we also have a summary, so I'm gonna say div.summary. And then of course, you can have, you know, another div down below there for extra text or extra images or both if you wanted to. But I'm going to stick with summary only and we're going to add in an anchor. It's not going to go anywhere, so it's just going to be a dummy link. And we can say, Hello World. And then outside of that, we're just gonna say Blog Post. So that's just regular text. And then we can take a look at copying this div right here that is our event. And we can copy that twice. All right, so hit refresh. And there is our links right there. That's looking pretty good. Okay, so there may be a few styling issues that we need to address here, but overall it's looking pretty good. Another thing that we need to consider is when we shrink the browser down. But first of all, let's take a look at those links and try to get them rendering correctly. So go to the main.css and I shall [UNKNOWN] down, and obviously our links don't have the class of items, so actually, what I'll do is I'll just strip that off there. And then hit refresh. And then now you'll notice that's what we have. And to make things a bit more distinct, what I'll do is I will select this, paste it down below. And say the hover state, the color will be a nice orange color. Go ahead and save that and hit refresh. And we hover over and we have the orange colors. So it's really clear what the user is selecting. So now let's scale down the browser and you'll notice that things get pretty squashed. I've also noticed a problem there with the header, so we have a bit of white space, which we'll look at fixing in just a second. But right now, I want to focus on that footer and we need to take a look at the Semantic documentation again, and we need to review the documentation for the grid. And inside of there, we want to just scroll down and you can have, you know, different elements and so on and so forth, and then you have variations. So on the variations, you have a stackable grid. And so, we have the class of stackable. And what this will do is it will simply take all of the columns and stack them on top of each other after reaching the mobile breakpoints. So let's just copy that class name, and then we want to paste that onto this div element right here cuz that's the one with the grid. So I'm going to save that, hit refresh. And now when we bring this down to a certain point, you'll notice it snaps and we have this right here. So I mean, overall this is looking really nice. Now also, I wanna pay attention to this paragraph element because I feel that the text is a bit squashed, and I would like the, you know, a bit more line spacing on there. So let's take a look at main.css, and then we're going to target the element with the ID of footer. And then we're going to tag it the paragraph elements that reside inside of there, which there's only one currently. And then I'm gonna change the line height to be 180%. So I'm going to save that and hit refresh. So now it does look quite nice and things look a bit more spaced out. So I'm very pleased with that. There may be a few other adjustments you may want to do. For example, I was thinking perhaps maybe taking it out of the three columns system and maybe turning it back to 16 columns, and then making this four columns wide and these two six columns wide, equaling 16 in total. And that's one way of doing it if you wanted a bit more space over here, but overall I think it's looking very nice, and it works exactly how I would expect it to. Now let's fix that image in the header. So, I'm just going to take a look at the CSS again. And then we have the main image. And what we want to do is not really play around with the height, but rather set the minimum height. So when I set the minimum height, it's gonna be 100%. So the image can grow larger than the parent, which is good, because at this point, you can see the image has grown much larger than the parent header. When it gets down to this point, you can see there's just a little bit of white space and we've got a really nice, high quality detailed image. So if we stretch it just a little bit, it's not going to affect it too badly. So I've saved that change, and now it simply cannot go less than 100% of the parent. And you could see there that's working really nice. So the last and final thing I want to do is just take a look at wrapping the content of the pages so it pushes the content away from the header, footer, and also the sides of the page as well. So the way I'm gonna do that is with a combination of the header and footer. So first of all, with the header, scroll right down to the bottom, and we want to create a new div element with the ID of content. Now, here's the important part. You wanna take out that closing div tag. So you're leaving this div open. And then of course with the footer, we want to close that div. That way, anything that's inserted between the header and the footer will be automatically wrapped by the content div. So if I take a look at one of my pages now, such as the index page, and open that up, you can see that this is where we're going to be adding the content between the header and the footer. So if I save that, and then we take a look at this, it won't really make much of a difference. So now it's time to style that div that I've just created. So go to the main.css file. And just above the footer selector, I'm going to target the element with the ID of content. And then we want to put in some padding. So I'm gonna set the padding 220 pixels all the way around, top, bottom, left and right. So if I save that now and we go back and hit refresh, you'll be able to notice it's pushing the content away from the edges. Perfect. That's exactly what I wanted. So thank you for watching me in this lesson, and please join me in the next lesson, where we'll take a look at adding in the content for the home page.

Back to the top