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.
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?
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.
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