Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    html form translated into css

    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


  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What is an MT web blog. I've never heard of one. Can you post a link to your blog?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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).

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What does the template look like for one of those pages?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is the template for the individual archive page. It's basically the standard template supplied by MT, but adapted to my needs.

    Code:
    <!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>

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well here is the form just be sure to keep the original variables and form action
    Code:
    <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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •