Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2006-01-13 12:36:52
- systrum
- Member
- Registered: 2004-08-28
- Posts: 44
masking submit button with a gif
I edited the comment_form to style my comments submit button by replacing
txp:comment_submit /
with
input type=“image” src=“http://url/submitButton.gif” name=“submit” value=“Submit” class=“button”
because of this i have found that IE (mac and windows) can`t post comments. other browsers are fine.
how should i edit this in order mask the submit button with a gif? is it possible?
Offline
#2 2006-01-14 22:36:52
- systrum
- Member
- Registered: 2004-08-28
- Posts: 44
Offline
#3 2006-01-15 01:26:22
- Neko
- Member
- Registered: 2004-03-18
- Posts: 458
Re: masking submit button with a gif
You could try the CSS way and either style the submit button tweaking background, border, fonts and padding or set a negative margin to the submit button and then replace it with the desired image, like in this example
I’ve tried it once and worked just fine, except for IE (darn IE!). Maybe you’ll be luckier than me. :3
Offline
#4 2006-01-15 09:16:04
- systrum
- Member
- Registered: 2004-08-28
- Posts: 44
Offline
#5 2006-01-15 09:37:06
- -P-
- Member
- From: Finland
- Registered: 2005-09-10
- Posts: 211
Re: masking submit button with a gif
You have to define class with stylesheet
<code>
.button {
background: url(../myimage.gif);
}</code>
and then in your comment form make id with your button like this
<code><div id=“button”>
<txp:comment_preview /> <txp:comment_submit />
</div></code>
Last edited by -P- (2006-01-15 10:16:44)
Offline
#6 2006-01-15 09:41:50
- systrum
- Member
- Registered: 2004-08-28
- Posts: 44
Offline
#7 2006-01-15 10:16:05
- -P-
- Member
- From: Finland
- Registered: 2005-09-10
- Posts: 211
Re: masking submit button with a gif
Glad I could help! :D
Mind submitting url for your buttons or is the site not ready yet?
Offline
#8 2006-01-15 10:40:08
- systrum
- Member
- Registered: 2004-08-28
- Posts: 44
Re: masking submit button with a gif
actually still working on it
sorry, i know this is a really lame question but …
how should i accomodate <code><div id=“button”>
<txp:comment_preview /> <txp:comment_submit />
</div></code>
to work with
<code><tr> <td align=“right” valign=“top”> </td> <td valign=“top” align=“left”> <txp:comment_preview /> <txp:comment_submit /> </td> </tr></code>
Offline
#9 2006-01-15 11:25:58
- -P-
- Member
- From: Finland
- Registered: 2005-09-10
- Posts: 211
Re: masking submit button with a gif
I don´t use any tables in my comments_form:
<code>
<label>message</label>
<txp:comment_message_input />
<div id=“button”>
<txp:comment_preview /> <txp:comment_submit />
</div >
</code>
nor have any installation at the moment with original comment_form so I could test it for you. So the rest of the answer would be only guessing. This is the method I use, don´t know if it is the best one.
I suggest that you download few ready themes for example from Stuart and look into their forms as a sample, how they have been done. That is a good way to learn :)
Offline
#10 2006-01-15 12:14:20
- systrum
- Member
- Registered: 2004-08-28
- Posts: 44
Re: masking submit button with a gif
thanks P
will look into the best option for my setup and when complete i will post up my comment_ form and a link
Offline
Re: masking submit button with a gif
Just an (obvious) note about the example posted about: make sure that you use “.button” in your stylesheet for class=“button”, and “#button” for id=“button”.
Offline
#12 2006-01-23 09:57:00
- systrum
- Member
- Registered: 2004-08-28
- Posts: 44
Re: masking submit button with a gif
Here is what i ended up with in my comment_form to get what u see Here
probably not the best method but it seems to look ok in most browsers on both mac and pc.
if you see any probs, then please be sure to let me know.
<code><table cellpadding=“4” cellspacing=“0” border=“0”> <tr> <td align=“right” valign=“top”>Name</td> <td valign=“top”><input type=“text” name=“name” value=”“ style=“border: 1px solid #EBECEC;” size=“25” tabindex=“1” /></td> </tr> <tr> <td align=“right” valign=“top”>URL</td> <td valign=“top”><input type=“text” name=“web” value=”“ style=“border: 1px solid #EBECEC;” size=“25” tabindex=“1” /></td> </tr> <tr> <td align=“right” valign=“top”>Email</td> <td valign=“top”><input type=“text” name=“email” value=”“ style=“border: 1px solid #EBECEC;” size=“25” tabindex=“1” /></td> </tr> <tr> <td valign=“top” align=“right”> <txp:text item=“Message” /> </td> <td valign=“top” colspan=“2”><textarea name=“message” cols=“30” rows=“12” style=“width:360px;height:100px;border: 1px solid #EBECEC;” tabindex=“4”></textarea></td> </tr> <tr> <td align=“right” valign=“top”> </td> <td valign=“top” align=“left”> <txp:comment_preview /> <input type=“submit” name=“submit” value=“Submit” style=“background-image: url(submitButton.gif); background-color: #F9F9F7; width: 56px; height: 22px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; text-align: center; line-height: 22px;”/> </td> </tr> </table></code>
Offline
Pages: 1