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 8 – Part 6 – Style the Comments

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Now that we’ve got our comment form in place on the Single Post Template what we’re going to do is create the packages to style it.

Create a Comments Package to Style the Comments

That starts off over in CSS and we are going to create a comments package. We’re going to use a couple of different packages here. First, we’re going to use a comments package and then we’re going to use a forum input package to style this thing.

So our comments package, we’ll call it Comments, the reference will be comments, the CSS Selector is .comment, it’s automatic and we’re going to start off with the background color and that was that $bc8 and we’re going to have a border which was that $bc5, the width is 2 and solid.

I think in terms of padding, we’re going to say 10 pixels all the way around and before we mess with nested, I think we’re just going to hit save, now let’s see what it looks like. Of course, I do have to add the reference &comments. Okay, so that’s getting us someplace, it sets a good starting spot.

So the thing we want to do here next then is we want to take this avatar and float it to the left, take this article section and give it a left margin so that it floats up here beside and then do the same thing with our footer here so that thing shifts over and now it’ll help this.

It almost feels like that’s too strong a border, doesn’t it? Yes, it does. Let’s start with that though. We’re going to float this to the left. If we inspect it, this is a span class avatar so we’re going to take #comments, .avatar and then float to the left and make 88 pixels wide or we’ll just float it to the left actually.

Then we’ll take the next section which is article and we’ll give it a left margin of 100 pixels and we’ll take footer and give it a left margin of 100 pixels and see how that makes this thing sort of shape up a bit.

We’ll go back to our Comments and we’re going to do this in Additional CSS actually so .comment .avatar{float:left} and then .comment article{margin-left:100px;} and we’ll do the same thing for footer.

Let’s see what that looks like. Okay, it’s getting there. Let’s see, we have an unusual thing happening here with something. Let’s save this and test it outside of the canvass for a second.

Specify Padding and Margin for the Footer

In this case, what’s happening is the name is going pretty much to the top although there is a little oddness with this Reply link hanging down and I’m not quite sure why that would do that, footer a, footer. I could make footer a specific height which might help so I maybe give it some bottom margin I guess. Let’s see, height 40px. Okay that’s not going to work there but let’s do it here then, footer. That might solve that problem so we’ll give the footer a height of 40 pixels and maybe give it bottom margin. Yes, you have a bit of bottom margin and then we’re going to break up the lines here.

So, Comments, .comment footer{height:40px;}. Let’s come over here to our Comments and make that border 1 then let’s come over to Nested Comments and let’s give it left padding of 100 so $p100, it should shove it over a little bit.

I don’t think we’re going to do anything special with Author Comments. Now, I think what we want is some bottom margin in that so we’ll look at our main comments here first and say, margin bottom, let’s say $p100 again, there we go.

Remove the Nested Comments

What that does is that separates out contained comments and also splits up the nested ones. Now, I think we can get rid of the nested comments. Nested comments, margin, bottom margin let’s say $p50 instead so we’ll cut it in half and see what happens there. Okay, that’s better except the canvass is showing a bunch of padding at the top of that, let’s see what happens outside of the canvass. The name still stays there, okay perfect.

Style the Author Comments

We still have a bit of styling left to do though. I’m not sure if this is going to look good but just to do something interesting, we could take Author Comments and make the background white. Let’s just try one other thing as well. For regular comments, border width, instead of 1 let’s say 1px and then 1px, 1px and 5px and then the Nested Comments should have just the 1 or maybe Nested Comments should just have a top, let’s try that. There’s a lot you can do with this obviously.

Nested Comments, the border will be 1px 000. Much better, that looks great. So we have a nice hard line here showing the extent of a comment and we got it wrapped then we have a Nested Comments. Let’s see, so that’s a nested comment.

Actually, I’m going to reply to Jim’s here, let’s see how that works. You know, it might not work inside of this though, let’s try it here. The Author Comment doesn’t go white, Nested Author Comments, that’s where we would set that, Nested Author Comments, Background, fff. Right.

We have a system here for displaying our comments and the borders not too distracting. We do however have this 15 Comments, our header intro here that needs to be styled as well so this is “comments_intro” and we want the comments intro to look very much like this.

So we come back over to Comments, Additional CSS, .comments_intro{font-size:24px; color:$tc11; font-weight:bold;} and it also has a link and we want the link to look the same color and everything so we’re going to just do this one more time, .comments_intro a, hit save.

Okay, 15 Comments… add one and I guess we want a bunch of bottom margin there, margin:$p100 and 0. There we go, 15 Comments… add one, now we have our nested columns list. We have now the Comments styled and the next thing for us to style is the Comment Form. Save CSS, let’s just double check the way it looks in our completed, looks good okay.

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