...

View Full Version : html form translated into css



outskirts
11-03-2006, 11:52 PM
I'm new to the forum, so please let me know if I'm getting off on the wrong foot.

So here's the thing. I have an MT weblog. I've been redesigning the 'individual entry archive' template, mostly by means of css. Then I came to the actual 'submit a comment' form and things got sticky.

I read all about fieldsets and labels, I found a lot of tutorials and looked them over, but I kept running into problems because I have to stick to MT coding basics, and I'm not comfortable enough to know what I can dump and what I have to keep. On the other hand, while the tables version looks great when I preview it in bbedit, it misbehaves badly when I test it in the weblog (on Firefox) and in various browsers I've tried.

Obviously I need to convert this to css if I am to have any hope of it working on the weblog. Can anybody point me to resources that might clear up the MT confusion for me?

I can post my css sheets and/or the html for this table, if that would be useful.

Thanks

http://www.tiedtothetracks.com/images/com-pcard-bbedit.jpg

_Aerospace_Eng_
11-03-2006, 11:57 PM
What is an MT web blog. I've never heard of one. Can you post a link to your blog?

outskirts
11-04-2006, 12:15 AM
What is an MT web blog. I've never heard of one. Can you post a link to your blog?


Sorry. I shouldn't have used the shorthand. MT=Movable Type. My weblog is here:

http://www.tiedtothetracks.com/storytelling/

The issue isn't the main template page, but the pages you get when you click on "Link2This" or "Your 2 Cents" (that is, to add a comment).

_Aerospace_Eng_
11-04-2006, 12:37 AM
What does the template look like for one of those pages?

outskirts
11-04-2006, 12:43 AM
This is the template for the individual archive page. It's basically the standard template supplied by MT, but adapted to my needs.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="Movable Type <$MTVersion$>" />

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />

<title><$MTBlogName encode_html="1"$>: <$MTEntryTitle remove_html="1"$></title>

<link rel="start" href="<$MTBlogURL$>" title="Home" />
<MTEntryPrevious><link rel="prev" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" /></MTEntryPrevious>
<MTEntryNext><link rel="next" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" /></MTEntryNext>

<$MTEntryTrackbackData$>

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

<script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script>
</head>
<body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)">
<div id="container">
<div id="container-inner" class="pkg">

<div id="banner">
<div id="banner-inner" class="pkg">

<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
</div>

<div id="pagebody">
<div id="pagebody-inner" class="pkg">
<div id="alpha">
<div id="alpha-inner" class="pkg">

<p class="content-nav">
<MTEntryPrevious><a href="<$MTEntryPermalink$>">&laquo; <$MTEntryTitle$></a> |</MTEntryPrevious>
<a href="<$MTBlogURL$>">Main</a>
<MTEntryNext>| <a href="<$MTEntryPermalink$>"><$MTEntryTitle$> &raquo;</a></MTEntryNext>
</p>

<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<h3 class="entry-header"><$MTEntryTitle$></h3>
<div class="entry-content">
<div class="entry-body">
<$MTEntryBody$>
</div>
<div id="more" class="entry-more">
<$MTEntryMore$>
</div>
</div>
<p class="entry-footer">
<span class="post-footers">Posted by <$MTEntryAuthorDisplayName$> on <$MTEntryDate$></span> <span class="separator">|</span> <a class="permalink" href="<$MTEntryPermalink$>">Permalink</a>
</p>
</div>

<MTIfPingsActive>
<div class="trackbacks">
<h3 id="trackback" class="trackbacks-header">TrackBack</h3>
<div id="trackbacks-info">
<MTIfPingsAccepted><p>TrackBack URL for this entry:<br /><$MTEntryTrackbackLink$></p></MTIfPingsAccepted>
</div>
<div class="trackbacks-content">
<MTPings>
<MTPingsHeader>
<p>Listed below are links to weblogs that reference <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>:</p>
</MTPingsHeader>
<a id="p<$MTPingID pad="1"$>"></a>
<div class="trackback" id="ping-<$MTPingID$>">
<div class="trackback-content">
<p>
&raquo; <a rel="nofollow" href="<$MTPingURL$>"><$MTPingTitle$></a> from <$MTPingBlogName$><br />
<$MTPingExcerpt$> <a rel="nofollow" href="<$MTPingURL$>">[Read More]</a>
</p>
</div>
<p class="trackback-footer">
Tracked on <a href="#ping-<$MTPingID$>"><$MTPingDate$></a>
</p>
</div>
</MTPings>
</div>
</div>
</MTIfPingsActive>

<MTIfCommentsActive>
<div id="comments" class="comments">
<div class="comments-content">
<MTComments>
<MTCommentsHeader><h3 class="comments-header"><img src="http://www.tiedtothetracks.com/storytelling/images/whatyousay.jpg" height="72" width="216" border="0" align="left" alt="Whatyousay" />
</h3></MTCommentsHeader><p>
<a id="c<$MTCommentID pad="1"$>"></a>
<div class="comment" id="comment-<$MTCommentID$>">
<div class="comment-content">
<span style="font-family:skia,sanserif;color:black; font-size:200%;padding: 1px; "><$MTCommentOrderNumber$>. </span><span style="font-family:Skia, Verdana, Arial, sans-serif;color:black; font-size:100%;padding: 5px; "><strong><$MTCommentAuthorLink default_name="Anonymous"$> <$MTCommentAuthorIdentity$></strong> spoke up on <a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a> and said:</span>
<$MTCommentBody$>
</div>

</div>
</MTComments>
</div><hr>

<MTEntryIfCommentsOpen>
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />

<div class="comments-open" id="comments-open">
<h2 class="comments-open-header"><img src="http://www.tiedtothetracks.com/storytelling/images/speakup.jpg" height="38" width="135" border="0" align="left" alt="Speakup" />
</h2>

<div class="comments-open-content">
<script type="text/javascript">
<!--
writeTypeKeyGreeting(commenter_name, <$MTEntryID$>);
//-->
</script>

<MTIfCommentsModerated>
<p class="comments-open-moderated">
(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)
</p>
</MTIfCommentsModerated>

<div id="comments-open-data">
<div id="name-email">
<p>
<label for="comment-author">Name:</label>
<input id="comment-author" name="author" size="30" />
</p>
<p>
<label for="comment-email">(required) Email Address:</label>
<input id="comment-email" name="email" size="30" />
</p>
</div>

<p>
<label for="comment-url">gotta website?</label>
<input id="comment-url" name="url" size="30" />
</p>
<p>
<label for="comment-bake-cookie"><input type="checkbox"
id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
Click this box if you want your computer to remember how to fill this form in; otherwise you'll have to do it again the next time you've got something to say.</label>
</p>
</div>

<p id="comments-open-text">
<label for="comment-text">your turn: <MTIfAllowCommentHTML>(you may use HTML tags for style)</MTIfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="20" cols="50"></textarea>
</p>
<div id="comments-open-footer" class="comments-open-footer">
<input type="submit" accesskey="v" name="preview" id="comment-preview" value="Preview" />
You have to preview your comment before you can actually submit it; this is a step that discourages spammers and other lower life forms.
</div>
</div>
</div>
</form>
</MTEntryIfCommentsOpen>
</div>
</MTIfCommentsActive>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

_Aerospace_Eng_
11-04-2006, 06:46 AM
Well here is the form just be sure to keep the original variables and form action

<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />

<div class="comments-open" id="comments-open">
<h2 class="comments-open-header"><img src="http://www.tiedtothetracks.com/storytelling/images/speakup.jpg" height="38" width="135" border="0" align="left" alt="Speakup" />
</h2>

<div class="comments-open-content">
<script type="text/javascript">
<!--
writeTypeKeyGreeting(commenter_name, <$MTEntryID$>);
//-->
</script>

<MTIfCommentsModerated>
<p class="comments-open-moderated">
(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)
</p>
</MTIfCommentsModerated>

<div id="comments-open-data">
<div id="name-email">
<p>
<label for="comment-author">Name:</label>
<input id="comment-author" name="author" size="30" />
</p>
<p>
<label for="comment-email">(required) Email Address:</label>
<input id="comment-email" name="email" size="30" />
</p>
</div>

<p>
<label for="comment-url">gotta website?</label>
<input id="comment-url" name="url" size="30" />
</p>
<p>
<label for="comment-bake-cookie"><input type="checkbox"
id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
Click this box if you want your computer to remember how to fill this form in; otherwise you'll have to do it again the next time you've got something to say.</label>
</p>
</div>

<p id="comments-open-text">
<label for="comment-text">your turn: <MTIfAllowCommentHTML>(you may use HTML tags for style)</MTIfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="20" cols="50"></textarea>
</p>
<div id="comments-open-footer" class="comments-open-footer">
<input type="submit" accesskey="v" name="preview" id="comment-preview" value="Preview" />
You have to preview your comment before you can actually submit it; this is a step that discourages spammers and other lower life forms.
</div>
</div>
</div>
</form>

outskirts
11-06-2006, 09:25 AM
Well here is the form just be sure to keep the original variables and form action


Thank you for your help, but I've got to ask a couple questions which are probably pretty simplistic.

So this is the form, I just have to add the formfield css to the main css file?
When you say 'original variables' you mean, what exactly? Can you point to an example?

I think this variable issue is what had me confused in the first place. All the examples I've seen on the web never clarify how to identify the actual variable name that goes into the label part of the formfield css.

If that makes any sense at all.

Again, thanks for your help and I apologize if these questions have disturbingly obvious answers.

_Aerospace_Eng_
11-06-2006, 03:29 PM
The labels have a for attribute that correspond the inputs that have id = "whatever". Don't remove any labels or inputs and you should be fine. There is also something in the form action made by MT so keep that as well.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum