Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:3 hours
Crs 107011
  • Overview
  • Transcript

4.10 CSS: Page Banners

Hey, welcome back. In the previous lesson, I started styling this slider, and it's functional, but I still need to take care of its contents. So, as you can see in the PSD, we have these boxes, semi-transparent boxes, with the content inside them. So, let's see. First the first box is a header with a class of .fancy-box and also .fancy-red. So the first thing I'll do is make some room her, e and then I'm gonna say .fancy-red. I'm going to start with the colors first, so I'm gonna set background-color. This one will use the @color-link. And then I also know we have .fancy-yellow, which is used in a different slide and also in the footer. So for that, the background-color will be @color-button-one. And also, I know I have a .fancy-gray, which is used in the secondary pages. And for that the background-color will be @color-dark-bg. All right, so now we're talking. Let's start with the actual, the parent .fancy-box. First of all, I'm going to set the color to white. And good. Next, I'm gonna set display to inline-block. [BLANK_AUDIO] So that it won't stretch on the entire width of the page. Instead, it will stretch according to its content. Next, I'm gonna add some lateral padding. So a 0 top bottom, and let's do baseline times 2 on the sides, so it looks like this. Next, I'm gonna lower its opacity to about 90%. Good. And finally I need to add this drop shadow right here. So to do that, I'll use -webkit-box-shadow, and we can do a bunch of parameters. The first one is x, so 10 pixels. Y, ten pixels. 0 for blur. 0 for spread. And the actual color. I'm gonna use black with about 30% opacity. Save. And there it is. Now, looking a bit closer at this, look, you can see it better here. I think I'll tweak this a little bit. Make this a bit smaller, 8 pixel the x. And maybe 8 pixel on the bottom. Yeah, that looks a bit better. [BLANK_AUDIO] Okay, good. Now, this also applied the style to, to this box on the bottom. But I'll take care of that later. Now, it's this content box, which should be black and also semi-transparent! Now, that box has a class of slide-contents. So, .slide-contents. Gonna set the background-color: rgba, black, with a 80% opacity, so 0.8. Let's do the color white. [BLANK_AUDIO] And let's check it out. All right. Now, let's give it a width of about 65%, and also let's position it in the center. So I'm gonna do margin: 0 for top and auto for left and right. So now it's on the center. Also, let's give it some padding. Let's do a baseline, so 27 pixels. All right. Now, in the PSD, notice the header here is on top of the slide contents. So, let's do that. I'm gonna move the slide contents div up by 27 pixels. So on margin here, I'm actually gonna say -@baseline, auto for right, 0, and auto for left. Okay, and let's add some more padding on the top. So let's see. Padding is @baseline, and let's do @baseline times 3 on the top, and the rest is simple baseline. So, something like that. Okay, that's perfect, and actually, that pretty much completes our slider. Now, let's see about these other two pages. And the first thing I gotta do is update their head and load JavaScript into them. So, I'm gonna add the Google fonts, FontAwesome, and the style sheets in my portfolio, right here, and in my about page, right here. And also I'll add the JavaScript at the bottom of each page. [BLANK_AUDIO] Okay. Let's see it. So already you can see that the page is almost complete. We just need to make some minor changes. Okay. So the first one is the page header. And let's take a look. We have a div with a class of page-banner, and an id of page-portfolio. So inside here, I'm gonna say .page-banner. And first of all, I'm gonna align the text to the center. And then I need to load these images right here. And each image is 350 pixels. So, what I'm gonna do is set a height on the page banner of 350. Okay. And then, I'm gonna load the actual image. So #page-portfolio. I'm gonna set the background to the same full back color, @color-dark-bg, and then url is gonna be ../images/banner-portfolio.png. Same, starts from top left, and it doesn't repeat. Save that. There it is, cool. All right, since I'm here, I'm just gonna do the about page. Okay, so banner-about banner-about. This one's a jpg. I must have exported a different format for a, by mistake. Let's see, About, okay. Now we only need to move this banner further down so it looks something like this. And to do that, well, I'm actually gonna do a bit of measurement here. One, two, three, four, five, six, seven, eight, nine, ten rows. So, simple, I'm going to do padding-top: @baseline times 10. And now my portfolio banner is in place, but it kind of overlaps with the, the actual main content, so we've got to push this content down. So I'm going to use, let's see, page-banner. I'm going to use a margin-bottom: @theme-margin. It's the variable I was telling you about. So now the content is pushed down. And actually, I think I'll do one better, I'll do @theme-margin plus another @baseline, just to create a bit more spacing here, because this header kind of overlaps, so the padding here on the top needs to be higher than the, than the @theme-margin variable. See the portfolio and the home page. All right, now, the home page, I also need to add this margin here. So I'm gonna go all the way up right here and say margin-bottom: @theme-margin. Save, and there we go. Now, I think I just remembered, I forgot to, where is it, fancy-box? Okay, I need to add another version of this without the vendor prefix. Just like that. So it will work on other browsers as well. Okay, that's it for the banner and the slider. So now our banner is functional in all of the pages, and our slider is functional as well. Now, in the next lesson, I'll move on to this main area and begin styling it. So, I'll see you there.

Back to the top