In this screencast we're going to get into building the comment form in HTML/CSS. The markup for the comment form lives in the comments.php file in our theme. We look for the <form> element to find it.

We lay out each of the three inputs (name, email, url) using the grid system we have in place. Boy we've gotten good use out of that eh?

We already have a CSS file exclusively for comment related stuff, so that's where we'll work. The first thing we write is making the inputs in our little grid 100% wide so they fit within the column. Divs would do this naturally, but inputs behave more like inline-block and don't automatically fill their parent containers width. We also fiddle with the main textarea a bit making it 100% wide and not as tall as it was. We decide not to mess with the resizing ability of the textarea. It doesn't really break anything.

Then we get the Reply link working. The JavaScript already works just fine, because we didn't mess with the ID for the form which the JavaScript relies on. We do need to make a bunch of tweaks though, like giving the form a gray background so the design of it works.

We spend the rest of the time tweaking some things with media queries so that the form looks OK on small screens.

Comments

  1. User Avatar
    Ahrengot
    Permalink to comment#

    Hey Chris,

    Greate series. Really enjoying it so far. How did you get the comment preview and markdown support to work within these comments? I assume those are plugins, right?

  2. User Avatar
    JonathanBeech
    Permalink to comment#

    In Sublime Text on a mac, the control D shortcut with the cursor positioned next to a closing or opening html element allows you to create a highlighted selection of everything between that element. I find it useful for figuring out where the opening and closing parts of a div are within the code. This is something I have seen Chris wrestle with a bit and it might help speed things up just a little.

    I believe the Emmett plugin needs installing for this to happen however.

  3. User Avatar
    bomb
    Permalink to comment#

    what this site do with the job board is cool.
    how can i implement it as comment board?
    can you explain as detail as possible?
    thank you

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag