Build Your Own Business Website header image

How to Customize the Post Box in Thesis 2.1 – Part 5 – Structure the Footer HTML

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.

So far we’ve styled the post title and the thumbnail image in the Thesis 2 Post Box.

Position the Read More Link

The next thing we’re going to do is move our Read More over to here and that’s going to happen inside of our Skin Editor. Open up our Post Footer and we’re going to shift+drag our Read More link out and put it in our Post Box. Drag that down to the Excerpt and we’re going to leave it as a span tag.

Let’s get rid of this Read More link and we’re going to use the built-in one with Thesis in the Excerpt here. So we’re going to say “Show ellipses with a bracket at the end of the excerpt” and “Show “Read More” link” and have it Read More just like that. Refresh it. There we go, now we’ve got our Read More how it should be.

Structure the Footer HTML

The next thing we want to do is get down to our footer. First off we’re going to get rid of the class “submit” because the style for that button comes from the class “submit”. Then what we’re going to do is open up the tray and take Categories and Date and shift+drag Categories up there and then Date up there.

Date Format, – Posted in. What we really want to do here I think at this point is say -in and we’re not going to leave the character separator just in case. Categories and then the number of comments, okay.

So let’s save that template and just take a look at where we are with it. Okay, March 4, 2013 – in: Cafe Events 0 Comments.

What’s the Difference Between a span and a div?

Ronan asks, “What’s the difference between a span and a div and a class?”. Ronan I strongly encourage you to watch the video An Introduction to HTML for WordPress and Thesis Users. I talk about those kinds of things there in detail.

A div is a structural HTML element and it’s used as a container for HTML content, it’s a container essentially. It’s an HTML container that automatically has block level elements where you can have width and height and position and that kind of stuff.

Span is an HTML tag that is specifically intended to add different styling to paragraph text in the middle of the paragraph. So it’s an inline type of element and if you wrap something in the span tag it doesn’t create a new line break. It doesn’t create a space, it simply makes a change inside of the line. Now in this case, I’m using a span tag because I want these all to be on the same line.

So if we refresh this, I want all these to be on the same line. If you look at the HTML here, it’s span span and a. These are all inline style elements so they don’t automatically start off on a new line. Had I chosen this to be a p tag then this would be on its own separate line and this would be down below it.

This is probably going to become paragraph tags though and we’re going to have to add styling to those paragraph tags to make them behave the way we want them to behave. Because we can’t make this stuff float to the left if it’s a span although I suppose we can because we have it as a class. In fact, that’s an interesting exercise, we’ll leave it as a span for the moment and it will give me a chance to demonstrate display block.

0 Comments… add one
0 comments… add one

Leave a Comment