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 3 – Part 8 – Create the Structural CSS

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - ,

Applies to -

The next thing we’re going to do is add some structural CSS to this and we’re going to do that by opening up style CSS. We’re actually just going to delete those colors now and we’re going to start off with the header and drop some pre-written code in here. What this does is it takes the header and it gets rid of the left and right padding that is automatically created by Thesis.

Header Revised Structure

We’re going to get rid of our left and right padding in the header then we’re going to take that header left area that we created last week, we’re going to make it 380 pixels wide and float it left. The code created last we’re going to float it right and we’re going to make it 572 pixels wide. If you need a refresher on this, take a look at the header HTML file here and here we have our div id header left, div id header right.

We should probably add a clearing div to this as well so that’s what we’re going to do, div style equals clear: both; we need to escape and double quotes. We need to escape this one too, div style clear both. Now it’s going to add the clearing div to this so that the header actually fills up the whole space. Hit save to that and come over to our style.

This should make our header line up perfectly. It’s 380 pixels and 572 pixels, it’s a bit of trial and error depending upon how you set these. You’ll need to set this as well but let’s go ahead and upload this. We come back up to functions and let’s upload header so we get the revised structure. Let’s take style CSS and upload that, come back over and refresh this.

You’re going to notice nothing changed. The reason nothing changed is because with the child themes, Thesis doesn’t include custom CSS as a regular include. What it does is it reads the custom CSS file then writes the results of that custom CSS file to the layout CSS file and serves only the layout CSS.

Rewrite Layout CSS in Thesis

What we have to do is force Thesis to rewrite layout CSS by coming over here to Design Options and simply hitting save. Now that we’ve hit save, that custom CSS that we wrote is going to be applied. It used to be that our menu is down below the logo and tagline. Now, they are side by side and all those colors went away.

Rewrite Footer CSS

The next thing that we’re going to do then is do the same kind of thing for our footer CSS which is slightly complicated. Again, we’re going to copy the codes we’ve already written. In the footer, we’re going to cut that out and it’s not current to what we’re doing yet. We’re going to make sure that there’s no padding in the footer so we bring that down to 0. Footer left, we’re going to give it a width of 50%.

Here we give it a width of specific pixels but in this case, our footer left area is going to be 50% and we’re going to float it left and footer right area is going to be 50%. We’re going to float it right.  We want to clear the floats before we put the footer bottom in and we’re going to make it 100% wide. The footer widget column which are the widgets that happen in left and right, we’re going to make them 50% wide and we’re going to float them left. We call this footer bottom widget columns, they are going to be 50% and we’re going to float them both left.  Now this is not responsive CSS.

Next week, we’re going to do the media queries and we’re going to make these responsive. This week, we’re just getting it so it works in the full string.

Just to refresh your memory let’s come back over here to our footer HTML; tour footer widget column which is what each widget area is called in these top two rows and in our bottom row it is footer bottom widget column. We’re going to upload this CSS up to the site, you have to hit save to force it to regenerate the site, the CSS file, and hit refresh.

Now we have our 4 widget areas in a row. We have our 2 widget areas side by side and if we do this, obviously, it’s not responsive. What we’re going to do next week is add the media queries that make this responsive, make this responsive and when we come over to this page, make the sidebar responsive. That is the result of the work that we’ve done so far today.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment