Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 6 – Part 6 – Create Front Page CSS

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects - ,

Applies to -

The next thing for us to do is to create the front page CSS because we have quite a bit of this done but we haven’t styled our widget areas. Actually, there is some styling that needs to happen here, our text style needs to change. I’ve forgotten, this doesn’t even have a home page like that but we’re going to change the color of our text on the home page and we’re going to make a couple of things responsive. We’re going to make these respond properly and make the menu responsive.

We’ve got a different font style and we’ve got a centered heading. While we don’t really have any links in here currently, we want a different link color and it’s going to be this bright blue color. That’s the first thing we’re going to do and this is where we’re going to start using that custom body class that we created.

Style the Front Page

We come to our style.css and down to the bottom of the normal CSS, footer area, before responsive design and instead of body, this is going to be Front Page Specific Styles. I’m just going to cut and paste this text to speed this part of the process up. We’re going to change the font color for our body from the color that we set in the Thesis design options to this color.

We’re going to change the headline area so that the color is slightly different, so that the font size is different and so that the text is aligned to the center then we’re going to change the link color of the front page. Notice that we have our body.front-page and then we have our .front-page .headline_area h2 and our body.front-page a.

It is this custom body class that we added using the body class filter which is why we can do this referencing only to front-page and have it affect nothing else. Let’s come back over here, upload style.css and now that we’re here, we’re going to Thesis Design Options and save the CSS file and refresh it. Now our text is lightened up, we’ve centered our heading. Let’s create a link, byobwebsite.com, update, come back over to the page and that’s what our link color looks like.

Structure the Sidebars

The next thing we need to do is to structure these sidebars. Look over at this. Now, what we’re going to do is we’ve got a nice bunch of padding on either side plus an equal amount of padding in between and so the way that works here is again, I’m going to copy this code. We’ve got our structure, our home sidebars and that home sidebars has a top and bottom padding of 25 pixels with no padding on the sides.

Each widget column is 300 pixels wide, it floats to the left, it’s got a margin left of 25 pixels and it’s got its own background color. Our left most widget column is not going to have any margin, that’s why we added that left and that right class to those. When we hit save now, upload and save the design options which rewrites the CSS file and refresh this, now we should have 3 of these things stack side by side.

You can see that darker color in the background and we’ve got our nice evenly spaced padding. We have that piece of it working. What we should do is add some widgets into this here quickly. This is perfect actually because we’ve got our Home Left Widget Area. This says Center Widget, I already created these widgets so we would have this.

If I come back over here and refresh it, there we go. Now, I’ve got a title, an image, an h5 tag, some text and a link. If we come back over and look at those widgets, here’s the title of the widget, here’s an image, here’s an h5 tag, some text, here’s a link. Those are all the things we’re going to be styling for this widget.

Style the Heading Area

We’re going to start off by styling this heading area. Remember in the heading area, what we said was that we wanted to use a background gradient and a background image. We’ll work on the background image later but I’m going to start off here with this background gradient. Now, long time watchers here will be familiar with this but what we’re going to do is zoom in on this and get our colors for our background gradient.

We’re going to go to ColorZilla gradient generator to generate the gradient. Our top color is this blue color so let’s go over to ColorZilla and Ultimate CSS3 Gradient Generator. We are going to do essentially a single gradient and the top is going to be this light color. We’ll paste that there and the bottom is going to be the darker color so we’ll copy that, come back over to the gradient generator and paste that color in the bottom. Now that we have that gradation of light to dark gradient here, we’ll include IE9 support, we’re going to copy this and come over to NetBeans and paste it.

Add Background Gradient

We’ve got home_sidebars that was our main div that we created. We started the heading off with .widget-heading and we’ll just paste that in. Now, we’ve got our background gradient added to this, hit save and actually, we do need to add a couple of other things to this. Let’s go ahead upload it and we’ll take a look at it, save it and refresh this. So now you see we’ve got that thing here.

We want to get rid of this margin up here and give it a height then we’ll add some padding to this text when we get to editing that text. In fact, what we’ll do is add a style to that too.

Set Padding and Margin

If we come over here, I’m going to say, margin:0; then I’m going to say height:48px; and we’ve got our background set correctly. For the home-sidebars h3 tag, we’re going to set the font size to 22 pixels and we’re going to make its color white and we’re going to give it some padding, that is we’re going to give it 15 pixels of padding on the top and bottom and 20 pixels of padding on the left and the right.

For that h5 tag, we’re going to color it white, we’re going to give it a specific size of 15 pixels, we’re going to get rid of the uppercase, get rid of the letter spacing but we are going to give ourselves a bit of separation below it. If we hit save now, upload and refresh, now we have our Center Widget Area, Right Widget Area and we’ve got those setup correctly.

However, we want this to butt all the way up here at the top and we want some space below this and the image. We want some space there and we want no space at the top so if we look at where this space is coming from, that is coming from padding top ul sidebar_list so we need to remove that from this. In fact you can see if we do remove that, it pops up there.

Add Bottom Margin to Widget Heading

I think we also want to add some bottom margin to widget heading. Here is that structure, home_widget_column ul.sidebar_list, we’re going to add a padding of 0 and we’re going to give it a margin of 20 around the div instead of the li which is going to push all that away from the heading.

We hit save again and upload it, come back over here and refresh it. Now we have our heading configured the way we want it. We’ve got that space but no space here, our h5 text is bright white and bigger, our regular text is the color that we want it.

Create a Submit Button

The only other thing we want to do here to these things is create this button. Notice how I’ve got this setup as a button instead of this regular link. The way we do that is first to take this button and give it a class. If we come over and look in our widgets, you’ll see I’ve given it a class of submit so if we take a look at this link, you’ll see div and title then a link. What we’re going to do is style this class “submit” so that it looks like a submit button.

I’m going to do that with this code right here. Our home_sidebars .submit, we’re going to give some margin around it but we’re going to make it float to the left and for the submit a, we’re going to change the text to white, give it this background color, give it some padding which makes it look like a button. We’re going to get rid of the left margin and make it change when we do the hover, hit save, upload it, refresh it. Now, we have our buttons the way we want and they change color when we hover over them. We have now styled those things.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment