Build Your Own Business Website header image

How to Customize the Post Box in Thesis 2.1 – Part 7 – Align Social Sharing Boxes Using HTML, Float & Padding

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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.

Everything we have done to customize the Thesis 2 Post Box so far has been fairly simple. We’re now going to start talking about something that’s more complicated and that is using absolute and relative positioning to put the other things in their places.

Install Social Networking Boxes

The first thing I have to do is install a couple of those social networking boxes, I don’t think I have any of those boxes installed here. I won’t do them all but I will do enough of them so that you can see how to do this.

We’re just going to run over a DIY themes and download them. Social media boxes. I think I’m going to do the Facebook like button. I guess I haven’t downloaded this in awhile and the Twitter button and then the Google+ button because all 3 of these things are different sizes and one of things I want to demonstrate to you is how to deal with that.

Getting these images to line up nicely like that is a pain in the butt because all of these things are different heights and so they don’t just naturally line up but now that we’ve got them downloaded, we’re going to choose a file and I’m going to organize them by date now instead.

Choose data downloads. Facebook Like, add the box. Google+, add the box. Then Twitter, add the box.

And then we’re just going to activate them all. Let’s come into the Skin Editor and then drag Facebook Like button and Google+ button and Tweet Button and into the footer. I think we’re just going to leave this like that for a second.

Let’s take a look at what they look like. Okay so let’s change those boxes, Tweet Button we want horizontal count and then Google+ horizontal count and then Facebook Like horizontal count. Let’s refresh this.

Use Relative and Absolute Positioning to Align Images

Now we can start using absolute and relative positioning because what we’re going to do is take these things and move them over and then align them about their middles.

Block Level Elements

All block level elements can have a position and the type of positioning it has can be static which is what it is by default and that means it automatically follows the ordinary HTML flow. You have relative which means that you can specify its position relative to its container and absolute which means you can specify its absolute position relative to anything.

How Absolute Positioning Works

The way absolute positioning generally works is that absolute positioning is either absolute in relationship to the browser window or it’s absolute in relationship to the first container that has a specified position.

So what we do generally if you want to position something absolutely, you first put it in the container that has a position of relative and then you can use absolute positioning in relationship to its specific container and that’s what we’re going to do here.

So we need to make this “post_footer”. We need to give it a position of relative so that we can then take each one of these things here and give them an absolute position.

Create Wrappers for Each Element

So what have we got? We’ve got an iframe well, isn’t that interesting? We are going to need to create wrappers for these things because they don’t have wrappers in themselves. We’ll do that quickly now. We’re going to create 3 HTML containers and they’re going to be divs.

This one will be Facebook Container, it’s going to be a div. We’ll make the class facebook and then we’ll do the same thing with other HTML container. That’s going to be Google+ Container and we’ll give it a class of google. Then finally, we’ll create our third container and this would be for Twitter and we give it a class of twitter.

Now we’re going to shift+drag each one of those things into the Post Footer and then drag Facebook Like into the Facebook Container, Google+ into that one and this one into this one and just to keep this conceptually straight, we’re going to move these down and hit save.

The reason we did this is to give ourselves a handle to use for styling. Let’s come back over here and look at our HTML again. Now we have a div class=”twitter”, a div class=”google” and a div class=”facebook” and each of those things we can use two position.

Float Elements to the Right

Actually, I think we’re going to do this a little differently than I planned on doing. We’re going to bring these up to above number of comments because we’re going to float these to the right. And when you float something to the right this one will be right most, this one will be next, this one will be next and this one would be last which means it would be the closest to the categories so that’s what’s going to happen here.

Get Selectors

Save that template and come back over here to Firefox and refresh it. We’re going to play around with this here. We’ll inspect the element and we’re looking at “twitter”. So “twitter” and we will say float:right and then say position:relative. Then this one here we’ll say float:right and position:relative and then this one we’ll say float:right, position:relative

Then for our comments, we are going to say display: inline-block and float:right there we go. So you can see without having actually to fix this we have these things lining up on the right hand side.

Add Positioning and Heights in CSS

We’re going to use positioning to get it in the right spot. Let’s start by coming back over to our custom CSS and down here we’re going to say .home_archive.post_box .post_footer. Now we’re just going to say .post_footer .twitter, .post_footer .google, .post_footer .facebook and then we’ll say float:right. I’m going to give it a height of 24px, you’ll see why in a minute. float:right; height:24px, position:relative.

I’m making these all behave in the same way, giving them all the same set of rules. Next is the number of comments link, “num_comments_link”. Actually, I’m going to say .home_archive.post_box .post_footer since I want to limit the style to this specific instance so .home_archive.post_box .post_footer .num_comments_link display:inline-block, float:right. And I’m going to say padding-right:20px to give myself a little bit of space on the righthand side there.

At this very moment we’re quite close to having these lined up right. Now the reason why these have so much space is because they’re planning on this number being in triple digits, right? This is very specifically designed to be, let’s see that’s width of 100%, okay width of 106px.

We could choose to reduce the size of that but we’re not going to at the moment, we’re going to leave that like it is assuming that it knows what it wants. Note though that none of these really lines up nicely so I think in order to make all that line up nicely, we are going to say height:30px here. Yeah, that did it.

Now we’re going to move these things in their position. Actually, wouldn’t that be interesting? You know, I bet I could have just simplified this whole conversation by adding padding-top:3px. Oh, except that I really don’t want it there, escape, padding-top:3px. That bring that one a little bit? Yeah, make it 5 I guess, 4 and then the Twitter one, make that padding-top:6px. No, that one’s 4px also and then the Google one, make that padding-top:2px, okay.

Well, so this is one way to lay that out. So the Google one is the only one that’s not that way, the Google one was just 2px. Okay, so we’ve got .post_footer .twitter, .post_footer .facebook 4px, .post_footer .google 2px. Save custom CSS, refresh it.

2 Comments… add one
2 comments… add one
  • Kevin Levine December 15, 2013, 8:36 pm

    Hi Rick, This is more advanced than I’m ready for, but I happen to stumble across it and was wondering why did you have to specify the same information in two different locations (inspector rules and custom css)?

    Thanks,

    Kevin

    • Rick Anderson December 16, 2013, 1:01 pm

      Kevin, the inspector is just for testing. It doesn’t actually change the site. It simply changes the browser’s view of the site.

Leave a Comment