Build Your Own Business Website header image

How to Create More Than 4 Columns in Thesis 2.0

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

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.

In this session we show how to create more than 4 columns in Thesis 2.0. Thesis 2.0 comes with a columns package that maxes out at 4.  We demonstrate how to create containers and add columns inside those containers to have a setup with 6 columns. We also test adding a comment block to the page without breaking the CSS.

Video Transcript

Member: Great. Okay and just the last question that I had was about the columns package in the CSS. I noticed it only would preset to go up to 4 and I was wondering if that… you know, if I wanted to make 6 columns, I guess I would have to make 2 containers and their width and kind of fit them side by side or will there be a package that they’ll have an unlimited number of columns per se?

Rick: I don’t know if he plans on doing one with more than 4. It certainly something that would be interesting to include. There are some things, other things I’d like to see in the columns package and so I’ve thought about creating my columns package. But having said that, well, let’s create a container and let’s call it divide in 2, there we go. Add that box and then add another container and that’ll be left half, add the box and new container called right half. Add the box and then drag right half into divide in two and left half into divide in two and divide in two up to the body. And then in divide in 2, you’re going to call this, I don’t know, columns 2 2. And then in your left half, you would do columns 3 3 and in the right half, do it again. And you know, and then column 1, column 2, column 3.

So let’s see, column 1 is too generic. Column 6 1 and container column 6 2 and container column 6 3 and container column 6 4… you probably get what’s going on here.

Member: Yeah no then you can create your widgets with your C1, C2, C3, C4 and then when you get up to 5, you’d be back at C1.

Rick: Yeah well you’d have C1, C2, C3 and then C1, C2, C3.

Member: Right yeah, if you split it up that way, 3 and 3.

Rick: Right. So you’d have… let’s see, left half, left half, left half… and then C3, C2 and C1 effectively doing exactly the same thing and below, C1, C2, and C3. And then you come over to your CSS and you create a column package. This one is divided in two and the reference is columns 2 2. And then the selector is columns 2 2 and then your options would be 2 columns and 50% and 50%.

Member: Except there’s 3 columns you put in that package, wasn’t it? Or no, okay…

Rick: No, this is the one that’s divided in two so these are each 50%. Save, columns 2 2 and then we’re going to do the same thing with columns 3 3. Divide in 3.

Member: Now, another question where you put in columns 2 2 and columns 3 3 underneath, does it matter if it’s underneath or can it be in a straight line?

Rick: I’m not sure what you mean.

Member: Well, instead of making a big, long, downward list, if you wanted to put your references in a straight line, can you put like a space and then go in columns 3 3? Or do you have to start it on the next line.

Rick: Well, that’s a good question. I don’t know. Let’s save and compile it this way.

Member: Because it would be kind of nice if you took all your header codes and kind of put it in a straight line. It might be easier to find.

Rick: Okay so we save and compile that and this is for our page. So I guess I really need a… I guess a need a menu so I get to a page. Oh, divide in two also has… okay, I see. It’s already got that stuff. So then we just refresh this for a second and inspect the element, see what we got. Okay so there’s columns 2 2, columns 3 3, okay that worked. And so if we look at our resources for a second, scroll down to css.css. Okay so that works that way. Now let’s see what happens if we put them side by side…. seems to work.

Member: So you can put all your header elements together and space out your body and footer elements differently?

Rick: Yeah you know, I don’t know if that means that you can put any comments to yourself in there. You probably can’t. It’ll probably trash it if you put some comments to yourself.

Member: Well, you could always try that just now.

Rick: I could always try it just now. Evidently, if you put the comment in there right, it’ll go in there.

Member: Nice.

Rick: Yeah, actually. That’s very nice. Let’s see… yeah, I would say that that’s working just fine. You can actually put comments in there and not break the CSS, I think. I mean, it looks like a valid comment block. So if we just copy that, let’s just see whether or not it’s really a valid comment block or not. Yeah, sure is so that would work fine.

0 Comments… add one

Save $200 on Membership Now!

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

Leave a Comment