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 5 – Part 9 – Style the Related Products in Thesis 2

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

So the next thing we’ll do is style the related products in our Thesis 2 eStore now that we’ve got the related products in place on the Product Template. The first thing I want to do is create another structure for this. I’ll come down here and create a container and we’ll call this Related Product Info and then we’ll just say info as our name.

Arrange Elements in Containers

Then I’m going to drag it down into place inside of Related Products and drag that down below WP Featured Image and then drag each of these things into it. So now, we’ve got the image in a container and that container sits beside the image and it has inside of it the Headline, the Product Price and the “Add to Cart” button.

Add Margins to the Product Display

Let’s refresh this and look at it. This is inside of class called “info” and we can give “info” margin-left of 320px so that moves it over which I think works fine so let’s start there. We’re going to start off with product display .info and then give it a margin-left of 320px. So we’ll come over here to the Custom CSS editor and we’ll say .product_display .info and then we’re going to say margin-left:320px.

Now, in a media query we’re going to have to change this. We’re going to have to make the margin go away but we’ll do that here in a minute. Then I think we want to make this headline a little bit bigger so p class=”headline”. Again, product display .headline and let’s just make that 18 pixels or 24 pixels. So .product_display .headline, it’ll be font-size, let’s call it 22px.

And now we got a nice larger version of this. I think we should split this up a little bit so perhaps product display should have a margin top of 24px, yeah, let’s do that. Actually, let’s even give it a little bit more. So .product_display margin-top: and then what I’m going to do is actually grab one of the sizes here and I think I’m going to pick 3over2 and then border-top:2px solid.

Add Color and Padding

And again, I’m going to choose a color. Let’s see, color1, color2, color3, it’s not going to work so color2 we’ll pick semicolon. So now we’ve got a top margin and we’ve got a border and I think we’re probably going to want some padding but we’ll just taking a look at that again for a second here.

Okay, why is that an error? Oh, because I’ve got those comments in there, it doesn’t require Comments and the Comments makes it an error, just a space.

Okay, so we’ve got our line but we really want some space below that line so I thought we would want some padding here so we’ll go ahead and take padding-top: and then we’ll just use a single this time. Yeah, that looks okay.

There’s all kinds of other things you could do with this, right? We could give it a background color, we could make the image small and stack them on top of each other. At this point now that you’ve got the tools to add these things together and to come up with related products, the sky’s the limit on how you want to go about styling it.

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