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 7 – Style the Comment Form

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

Create Comment Form Text Style

The next thing we’re going to do is create a comment form. You can see there’s a Form Input, this is the thing that you’re going to use to style your comment form. We’re going to create two of these. One of them is going to be for the form text style and the other is going to be for the form text area.

Let’s say, Comment Form Text Input, comment_text_input, input and then we’ll say, [type=’text’] and it’s going to say .comment input[type=’text’], save.

Create Form Text Area Style

Then we’re going to create a similar kind of thing for text area input, .comment textarea and hit save to that. So our Input, leave the text color alone but our background color is going to be that $bc8, our border is going to be 1 pixel and it’s going to be the $bc5.

We’re going to have padding of 5 pixels all the way around and on our focus, our background color will become white and I think that’s going to be good for the moment then we’re going to do the similar kind of thing here.

Now, in this case, I will come back to look at the width here but the border will be 1. Let’s do the background color, $bc8, width then $bc5 and then padding is going to be 5, 5, 5 and 5, Input:focus, background color will be white. Let’s go in there and take a look at that. Now, we can’t really see it because I’m logged in here so let’s save the CSS and refresh this.

Fix Problem with Content Area Page Wrapper

I didn’t get it right there. Yes, we need an id=commentform not class comment, id #commentform. Let’s see, so &comment_textarea_input, text_input, textarea_input okay. It’s not right, no extraneous characters there, something is failing here though. I bet it’s failing here too now. No, it isn’t. Okay, what’s going on over here? So clearly there’s an error.

What’s happening here is that my content area page wrapper is not expanding to fill the stuff that’s in it or expanding to contain the sizes in it and that’s because a float is failing someplace and so since the float didn’t get cleared, it’s just climbing all the way up to the top and all of the background stuff that should be there is being hidden.

Now, the absence of the clearing floats suggests that there’s an error in the CSS file and in particular, an error immediately before the end of the CSS file. So if we go over to CSS and Edit CSS, all of our clearing divs is down here at the bottom and so if there are errors above it, that can make the rest of it not work right.

I’m guessing that we have an error here someplace and it’s probably in the comment stuff that we just wrote because that was working fine before then. Let’s see if we can figure it out. Go over to the CSS file and it’s probably down here towards the bottom. Well, if I don’t spot it right off the bat, what I do is just copy this, open up a dummy CSS file in my editor and paste it and see if I can find the errors so that’s what we’re going to do here.

I can see I already did this once with somebody else. I see, I’ve got a double quotes there, that’s what it is and variable is the place where you enter it yourself. So let’s go and fix that, type=’text’. Interesting little excursion there. So the basis of this is laid out.

Add Style to Comment Form Textarea Input

Now, what we really want to do though is take this little comment thing and put it up here, take the submit button, put it below there, make this thing wider, make our labels all the same length so these things line up and then add some bottom margin here. So we’re going to start that off by inspecting this element, comment_form_title. That is going to be our first piece to style.

Come over here, this is going to put all the rest of the stuff in the Comment Form Textarea Input and again, this is font-size:24px; font-weight:bold; color:$tc11; margin:$p100 0;} okay we can save.

So now we have our Leave a Comment is there and the rest of this we’re going to have to do in the non logged in state. These things are labels so what we’re going to do is label so it’s going to be id=”comment_form_name label because this is a label too I think. I guess it doesn’t matter, we’ll say comment_form_label and we’ll make it 100 pixels wide and see how that works.

Okay, width is equals 100px, let’s come over here to our Options and let’s give ourselves a bit of bottom margin, $p50. It’s not going to help us there because we won’t see that. Come over and check it out un-logged in.

We have to make our labels display block because the width is not taking into effect. That’s even better actually and the width is irrelevant at that point so we’re just going to make the label display block, display:block and then our Textarea Input, I want to make the width of this 90%. I guess we’ll just make it 100%. Yes, that looks better.

Add a Selector for the Submit Button to Reference

We need our submit button to look good so the way we’re going to do that is to get it a selector that we can reference here, id=’submit’ so it’s input#submit. Okay, comment_form_submit id=”submit”. What we’re going to do then with this is come over to our submit button style that we created a couple of weeks ago and we are referencing submit a. But now what I’m going to do is comma and say, input#submit.

I think that should be all we really need for that. Well, let’s just see what happens. Yes, and is what happens. Inspect the element for the cancel reply, “cancel-comment-reply-link”.

We’re going to do the same thing with that one so it’s comma a.cancel-comment-reply-link and we’ll save that, let’s see if that works here. What’s styling that then, it’s not dot, it’s id, that’s my mistake, a#cancel-comment submit. Well, my text size is funny there, where would that be? I didn’t specify a text size so where is it getting its font size? Well, let’s just give it a font size and let’s also make this cancel-comment-reply-link float to the right.

We’ll come back over to here and font settings and let’s make it 15 and then under Additional CSS, what did I just say we’re going to do? We want that button to float to the right. Okay, cancel-comment-reply, I think I’m just going to put it over the submit though. I don’t know, it’s going to get a little confusing now I think.

Maybe I have to say display:inline for that, is that help it? No, it doesn’t help it. Okay, because that one is not floating to the left, I guess it’s what it is. Maybe I have to say this display:block; that’s better. So make it float left so that is the input type=”submit” that one’s going to float left.

I think we need some bottom margin there into that, is that do it? Yes, that does do it. So we will say, form id=”commentform”, come back over to this and we’ll say #commentform{margin-bottom:$p100;} that’s working that way.

What happens if I made those width 100%, that’s probably too much so the width is 90%. That looks pretty good so we’ll do that too, 90%. Now, let’s see what this looks like in the responsinator.

Well, that’s not good, what happened? It almost looks like it’s missing that meta tag. No, it’s there so let’s see why that isn’t. Well, that’s a little crazy. That’s why, all my media queries are missing, how did that happen? I don’t know how that happened but we’re going to save this, come over to Thesis, select skin, open up Lesson 7, just come down here and grab all that stuff. It’s nice when the problem is that easy.

I think we’re going to have to follow up with this one next week to fix some of these things because once we get to this point here, we don’t want there to be 100 pixel wide margin. Maybe that’s the only thing we really have to do is, get rid of the additional padding. Let’s see what it looks like in a somewhat larger screen here. That’s fine here so what we need to do is reduce the padding here and get rid of the left margin for the comments and actually, I think we’ll just do that right now.

Adding Margin to the Article

This is article so if we get rid of the margin left article there and if we add a width to this of 100 pixels, it didn’t help. Let’s say, margin-right:10px; there we go so we get rid of that. The avatar gets a margin-right of 10px, the article, we lose entirely the left margin for the article and we’re just going to be looking at a couple of other things here so let’s see.

We get down to comment article{margin-left:0px;} and then do the same thing for footer and then .comment .avatar{margin-right:10px;}. Excellent, okay. So the only other thing we want to do is just diminish this li .children .comment padding-left so .children .comment padding-left:10px. Again back in here at the bottom, .children .comment{padding-left:10px;}. Okay, that’s working perfect.

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