Fortunately, that template has a commentform.tpl file. The button is relatively easy. On line 37 of that file is this:
Code: Select all
<input type="submit" name="serendipity[submit]" value="{$CONST.SUBMIT_COMMENT}" /> <input type="submit" name="serendipity[preview]" value="{$CONST.PREVIEW}" />
We need to give those buttons a class, so lets call that class "comment_button" (or whatever you like). So, line 37 would be edited to look like this:
Code: Select all
<input class="comment_button" type="submit" name="serendipity[submit]" value="{$CONST.SUBMIT_COMMENT}" /> <input class="comment_button" type="submit" name="serendipity[preview]" value="{$CONST.PREVIEW}" />
Now that we have the class, we can give it some style that is approximately the same as what you provided as an example. In the file style.css, we need to add some code, which I placed right after line #144 for input and text area styles:
Code: Select all
input.comment_button {
background:#efefef;
border: .2em double #CCCCCC;
cursor:pointer;
font-size:1em;
font-weight:bold;
line-height:1em;
padding:0.5em;
}
I didn't use a background image like your example, but I could have... anyway, that should get you close to the appearance you wanted for the button.
Now, for the rest of the form.... to get better alignment, I need to change the html structure. There is more than one way to do this, but I tried what I am about to show you, and it worked OK in firefox. I did not try it in any other browsers though, and it might need tweaking.
The code we will change is lines 5-13:
Code: Select all
<p><label for="serendipity_commentform_name">{$CONST.NAME} </label><input type="text" id="serendipity_commentform_name" name="serendipity[name]" value="{$commentform_name}" size="30" /></p>
<p><label for="serendipity_commentform_email">{$CONST.EMAIL} </label><input type="text" id="serendipity_commentform_email" name="serendipity[email]" value="{$commentform_email}" /></p>
<p><label for="serendipity_commentform_url">{$CONST.HOMEPAGE} </label><input type="text" id="serendipity_commentform_url" name="serendipity[url]" value="{$commentform_url}" /></p>
<p><label for="serendipity_replyTo">{$CONST.IN_REPLY_TO} </label>{$commentform_replyTo}</p>
<p><label for="serendipity_commentform_comment">{$CONST.COMMENT}</label> </p>
.... which is replaced by this:
Code: Select all
<dl>
<dt><label for="serendipity_commentform_name">{$CONST.NAME} </label></dt>
<dd><input type="text" id="serendipity_commentform_name" name="serendipity[name]" value="{$commentform_name}" size="30" /></dd>
<dt><label for="serendipity_commentform_email">{$CONST.EMAIL} </label></dt>
<dd><input type="text" id="serendipity_commentform_email" name="serendipity[email]" value="{$commentform_email}" /></dd>
<dt><label for="serendipity_commentform_url">{$CONST.HOMEPAGE} </label></dt>
<dd><input type="text" id="serendipity_commentform_url" name="serendipity[url]" value="{$commentform_url}" /></dd>
<dt><label for="serendipity_replyTo">{$CONST.IN_REPLY_TO} </label></dt>
<dd>{$commentform_replyTo}</dd>
</dl>
<label for="serendipity_commentform_comment">{$CONST.COMMENT}</label>
And, somewhere in style.css, perhaps around line 460 or at the very end of the file, we can add this:
Code: Select all
.serendipityCommentForm dl {
width: 100%;
}
.serendipityCommentForm dt {
float: left;
margin: 0 0 5px 0;
}
.serendipityCommentForm dd {
margin:0 0 5px 30%;
padding: 0;
}
.serendipityCommentForm dd input,
.serendipityCommentForm dd select {
width: 95%;
}
You may need to play around with margins and widths depending on the language file you are using, but the above values appear to work in English. I did not test this exhaustively - just quickly in firefox and IE6 rrunning Windows.
