Build Your Own Business Website header image

How to Place a Border Between the Content and the Sidebar in Thesis 2

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 place a border between the content and the sidebar in Thesis 2 by giving it an HTML class and adding a single elements style package. We also show how to customize the options for the border.

Video Transcript

Member:  But you know how Thesis 1.85 had that nice little grey line that would delineate the sidebars?

Rick:  Yes.

Member:  Is that a better way to not have the padding but have the grey line back in? Or do you think the padding is better looking?

Rick:  Well, let’s just take a look at an example of it because that’s really the next question or is can you… how to add a line in that section. And…

Member:  I tried to do it… I’m sorry, I tried to do it to borders and it didn’t work.

Rick:  Well, and we will do it through borders. We just have to choose the right element to use for borders. Because what we want to do is put the border on the main content column. And in order for us to put the border on the main content column, we need to give it a class. And so we’ll… I mean, I’m just going to call it side border as the class. I’m going to copy that too. But if if we give it a class of sideborder, save the template and then come over to the CSS, you can add a single element style package called sideborder. That’s not a very descriptive name but you get the jist. And then the selector would be .sideborder.

And then under Options, you’d come down to your borders. And what you’re going to do is use the standard top right bottom left. And so the top border would be 0 pixels and space. The right border is what you want so you’d say 1 pixel. The bottom border is 0 and the left border is 0. So top right bottom left. And then pick it solid and I don’t know, pick a grey color in there.

Member:  Right. That’s what I did.

Rick:  And really, if you hit save to that and then add it to the list, we got to go to a page. But now you got that light border going right down. And if you make it a border of this thing, it’ll go all the way down to the bottom.

Member:  Okay because I had done it in your post content was that… why is that not the right place to go? Content post or post content for border?

Rick:  Well, theoretically, I suppose you could do that. What I’m doing is selecting the column to give the border to.

Member:  Okay.

Rick:  I mean, that’s the main thing is that you’re picking a structural part to add the border to. I mean, we can try it.

Member:  It’s easier.

Rick:  We can try it and see what happens if we do it to the… just to make sure we know what we are talking about here. But if we add it to the post box, just looking at what the post box… note that the post box doesn’t have any padding beyond it so the line would be right up against the text there.

Member:  Actually, every time I kept doing it, it was like ¾, ½… it was all over the place.

Rick:  Yeah. Well, what Thesis does… I mean, in Thesis Classic is it uses a little background image and then it positions the background image. But you don’t really have to… I mean, this is I think, simpler, really. As long as you’re picking the right element to give the border to.

Member:  Oh, so much easier.

Rick:  So if you want to put the faint line grey, you know, you’d only put a border line in there instead. You can do that just like that. Give that main content column a class and then assign… I mean, I created a single element style for this. And you don’t really have to do that. You could just write a little piece of code too. But if you’re new to this and CSS is not your strong suit then you can just do it this way.

0 Comments… add one

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

Leave a Comment