Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Styling the comment form / remember me checkbox
No doubt this’ll be one of those “duh” moments when somebody points me in the right direction, but as it stands my brain’s in danger of ejecting after an hour or so of hacking/forum searching/googling.
My seemingly simple remit is to display the comment form thus:
label: input box
label: input box
…
Remember me: checkbox
with all the labels on the left (but right aligned) and the inputs/textarea/checkbox to the right of the corresponding label (but left aligned); as if they were in an old-school table. I’d like the preview/submit buttons on the same “row” as the remember/forget checkbox, floated right (that bit’s pretty easy).
I coded the comment_form with <label for blah><input blah>, floated label left with text-align:right, and after a small amount of margin skullduggery, all was well. I added <code><txp:comment_remember></code> to the form and found it outputs the HTML elements in an order that I consider to be back-to-front (input first, then label) so my float:left doesn’t have the desired effect.
I’ve had no luck using CSS trickery to “swap” those two elements stylistially. So, in true “if you can’t beat ‘em join ‘em” style, I tried swapping all my elements in the comment form so the <input> tag came first. I then tried writing a rule for that instead (e.g. float label left; give input boxes large left margin). No joy; just boxes misaligned or appearing below the text or sprayed across the page.
If anybody has pointers on how to achieve this comparatively simple CSS layout I’d be very grateful. As a last resort, how would I hack comment.php so the “remember/forget” elements output the label first? I guess the line that does the damage is:
<code>
$checkbox = (!empty($_COOKIE[‘txp_name’]))
? checkbox(‘forget’,1,0).tag(gTxt(‘forget’),‘label’,’ for=“forget”’)
: checkbox(‘remember’,1,1).tag(gTxt(‘remember’),‘label’,’ for=“remember”’);
</code>
but I can’t figure out how to get it to swap the elements from that.
In one or two posts’ time I’ll probably look a complete tube for not thinking of the simple solution in the first place, but hey: wouldn’t be the first time :oD
Many thanks in advance.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Styling the comment form / remember me checkbox
What I usually do is:
- Wrap the text inputs and textarea in a div
- Wrap the checkbox/radio input’s in a p tag.
I’m far too lazy to dig into
The HTML is something like this (pasted from recent article):
<code>
<div>
<label for=“email”>email</label>
<input id=“email” name=“email” size=“15” tabindex=“2” type=“text”>
</div>
<p><input id=“scam-1” name=“scam-1” tabindex=“4” type=“checkbox”>
<label for=“scam-1”>Send me 1,000,000 pancakes now!</label>
</p>
</code>
CSS:
<pre>
<code>
fieldset div {
margin: 2px 0;
clear: both;
}
fieldset div label {
width: 15%;
display: block;
float: left;
}
fieldset div input {
width: 82%;
}
fieldset p {
margin: 5px 0 0;
clear: both;
}
fieldset p label {
width: 95%;
float: right;
}
fieldset p input {
float: left;
}
</code>
</pre>
To get the checkbox on the right, and label on the left, this should work, though I haven’t tested:
<pre>
<code>
fieldset p label {
float: left;
}
fieldset p input {
float: right;
margin-right: xxx;
}
</code>
</pre>
Hope that works!
Last edited by deldindesign (2006-06-09 00:59:50)
Offline
#3 2006-06-09 05:47:07
- net-carver
- Archived Plugin Author
- Registered: 2006-03-08
- Posts: 1,648
Re: Styling the comment form / remember me checkbox
Bloke,
I had exactly the same trouble when I set up my comments form (check it out here.) I ended up hacking the PHP to get it the way I wanted.
If you get in contact with me by email (from this forum) I can send you my hacked file.
— Steve
Offline
Re: Styling the comment form / remember me checkbox
Thanks for the tip deldindesign. Can’t believe I didn’t think to wrap comment_remember in a span and control it separately. Maybe I should refrain from coding at 1am :-)
Anyway, I added a <span> and tested it out using the trusty Firefox developer toolbar and it worked a treat with the float:right & margin-right trick. Guess which browser it didn’t work in though: yup, Internet Exploder 6. Even after giving the checkbox a small explicit width, it “bumped” the label onto the next line unless I used a really small margin value for the checkbox which made it almost float off the page to the right. Rats!
Guess I’ll carry on hackin’ until somethin’ works. Or perhaps I’ll just admit defeat and use net-carver’s comment.php adjustments.
Thanks for your help guys.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline