Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2007-08-22 15:34:32
- hilife
- Member
- Registered: 2007-08-21
- Posts: 11
Styling comment form
How does one style the comment form under the article ….. basically what tags would i need to add to have more control of the look of the form ?
Thanks
Offline
Re: Styling comment form
i dont know them off the top of my head but just take a look at a page with comments and then view the source to see what classes/id’s it uses?
Offline
Re: Styling comment form
Hope it makes sense:)
- .txpCommentInputForm
- .txpCommentInputMessage
- #message
- .comment_name_input
- #name
- .comment_email_input
- #web
- .comment_web_input
- #web
- .button
- #txpCommentPreview
- #txpCommentSubmit
- .checkbox
- #remember
- #forget
Last edited by colak (2007-08-22 15:59:10)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Styling comment form
iblastoff answered as I was figuring it out for you:)
… the best way might be to go to Presentation>Forms>comment_form and start organising it from there. Keep in mind the tab order of the form
- Comment
- Name
- Website
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#5 2007-08-22 16:00:22
- hilife
- Member
- Registered: 2007-08-21
- Posts: 11
Re: Styling comment form
so its basically adding classes and ids like the way we add to the articles eg i have a recent article list with this in it :
<txp:recent_articles class=ul1” label=“gallery” limit=“10” section=“Gallery” sort=“Posted desc” labeltag=“h3” />
how do i apply the classes to the comment form like on the name tag coz basically i want to start off by reducing the font size and changing its color…. :
<label for=“name”><txp:text item=“comment_name”/></label>
am not a txp guru yet so i appreciate the help guys !!!
Last edited by hilife (2007-08-22 16:03:30)
Offline
Re: Styling comment form
i can tell you what i have in the comment_form which is a kind of a small development from shared code in this forum when i was new to txp
<txp:comments_error wraptag="ul" break="li" />
<div id="cmntform">
<txp:if_comments_preview>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
<div class="cmntpreview">
<h1>Preview your comment</h1>
<h2>Hi <txp:php>echo pcs('name');</txp:php></h2>
<p><strong>Your comment is not yet submitted.</strong><br />
This is what you wrote:</p>
<div class="previewtext">
<txp:comments_error wraptag="ul" break="li" />
<txp:comments_preview wraptag="p" />
</div>
<h2>To submit your comment, please click the button below.</h2>
<label><txp:comment_submit /></label>
<br /><br />
<p><strong>To make changes, please click <a href="#commentsform">edit</a></strong></p>
<p style="text-align:right"><a href="#" onclick="toggle_visibility('cmntform');">Close</a></p>
</div>
</txp:if_comments_preview>
</div>
<h2>Add Your Comment</h2>
<div style="float:left;width:200px;">
<h2 id="comment"><txp:comments_invite /></h2>
<p>blah blah</p>
</div>
<div id="commentsform">
<fieldset>
<div class="l"><label class="r">Comment:</label></div>
<div class="i"><label class="r"><txp:comment_message_input /></label></div>
<div class="l"><label class="n">name:</label></div>
<div class="i"><label class="n"><txp:comment_name_input /></label></div>
<div class="l"><label class="r">e-mail (optional):</label></div>
<div class="i"><label class="r"><txp:comment_email_input /></label></div>
<div class="l"><label class="n">website:</label></div>
<div class="i"><label class="n"><txp:comment_web_input /></label><txp:comment_remember /></div>
<div class="i">
<label class="n"><txp:comment_preview /></label>
<label class="n"><txp:comment_submit /></label>
</div>
</fieldset>Last edited by colak (2007-08-22 16:09:37)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#7 2007-08-22 16:10:17
- hilife
- Member
- Registered: 2007-08-21
- Posts: 11
Re: Styling comment form
i got it…i was using a separate stylesheet so added the comment style on it and voila the changes were accomplished !!!
Thanks guys….
Offline
Re: Styling comment form
you dont need to add them yourself as they’re setting those ids/classes on their own. you just need to style them.
as for labels you can style them just like anything else. assuming you want the labels to have the same style, im sure you could use something like
#txpCommentInputForm label {your styles;}
Offline
Pages: 1