Jump to content

Free help from tech experts
Welcome to Geeks to Go forums. Create a FREE account now to gain access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing topics, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. Best of all, registration and all assistance is 100% free! This message, and all ads will be removed once you have signed in.
Create an Account Login to Account

How Can I Create A colorful SUBMIT Button


  • Please log in to reply

#1
Fimchibble

Fimchibble

    New Member

  • Member
  • Pip
  • 7 posts
I also posted this on YAHOO Answers but I'm pretty sure I'll get a better answer here (I hope)

I have some basic Adobe Illustrator and PhotoShop skills but when it comes to writing anything but the most basic html tags Iím useless.

Iím starting a small Internet business and I'm using YAHOO Site Builder 2.4 to build my web site. It's great software for someone like me who isn't a computer expert. I do NOT have the YAHOO merchant account because right now I can't afford the $30 a month maintenance fee.

I would like to create a SUBMIT button that's more attractive than the drab gray one offered by YAHOO. Although I can create a nice button in Adobe Illustrator I don't know how the heck to bring it into Site Builder to make it function. I called YAHOO tech support and they said I could, in fact, use a button of my own design but that I would have to generate the code (I assume html) myself.

I can get the html imbed code off PhotoBucket (my image host) but as far as the other code that enables the SUBMIT button to direct my sites form information to my email address...that's another story. I'm at a total loss!

Is there anyone who can tell me what code I would need to post in the html box in Yahoo Site Builder so that the colorful SUBMIT button that I have created myself will function properly? I need you to keep it simple because I'm stupid when it comes to this stuff.

Thank you VERY much for any information and I hope this question was clear and made sense.
  • 0

#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Do you just want to style your submit button with a background color/image, what? Many, many ways to so something. Post the code you have so far for your form using the submit button and give some details. Image links to ones you made that you might want to use would be helpful.

Edited by Major Payne, 04 February 2009 - 11:58 AM.

  • 0

#3
Fimchibble

Fimchibble

    New Member

  • Member
  • Pip
  • 7 posts
Well, I don't have ANY code written. This is the button I created and as boring as it may look here it works with the color scheme of the particular page I made and it's heaven next to the ugly thing YAHOO supplies.

http://i104.photobuc...BMIT-BUTTON.gif

The gentleman from YAHOO tech support said if I viewed the page source of my published web page I could grab much of the needed code from the existing gray SUBMIT button that they use and apply it to mine.

I opened the source code but couldnít correctly isolate the right section because I didn't even know what I was looking for!
  • 0

#4
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
<style type="text/css">
input#go {
width: 150px;
height: 37px;
background: url(http://i104.photobucket.com/albums/m181/doctorkazoo/SUBMIT-BUTTON.gif) no-repeat center scroll;
}
</style>

<input id="go" type="submit" value="" />

Let me know if that works for you. Don't have all your code so can't flesh it out.
  • 0

#5
Fimchibble

Fimchibble

    New Member

  • Member
  • Pip
  • 7 posts
OMG! Thank you SO much! You must be some sort of freakin' computer GENIUS!

It seems to work perfectly! I have no idea how you were able to write that code without actually being on Site Builder.

The only problem is that for some reason there is sort of a square frame around my button. That may be just because I have to render it differently?

The other and more serious problem is that on my MAC the button just appears blank. Please see the image link I've attached to further explain.

At any rate I'm amazed I've come THIS far! I feel like I'm almost at the solution!!

http://i104.photobuc...azoo/OOPS-1.jpg

Attached Thumbnails

  • SAMPLE.jpg

  • 0

#6
Fimchibble

Fimchibble

    New Member

  • Member
  • Pip
  • 7 posts
OH...and please forget the half a button on the bottom...that's just a mistake on my part that has nothing to do with anyhting. :)
  • 0

#7
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Don't have anything like Image Block 1.2 installed on your MAC? No add-ons in Firefox that would disable an image. You could try to run Fire in Safe Mode (Not Windows' Safe Mode) and see if it works. Firefox has options to set to block images. Might check those. There was an IE for MAC at one time, but don't know if it is worth trying to see if the problem is the OS or the browser: Internet Explorer for MAC . Maybe try Firefox on your MAC.

I can not try it here on a MAC to resolve the problem for you. Can you post your code for the button now that is used for the MAC view?
  • 0

#8
Fimchibble

Fimchibble

    New Member

  • Member
  • Pip
  • 7 posts
1). Anything like Image Block 1.2 installed on your MAC?
Not that Iím aware of and any other site Iíve been to looks fine on my MAC

2). Add-ons in Firefox?

I checked and as far as I can tell I have no add-ons

3). Fire in Safe Mode
Iím not sure how to do this but Iíll look it up and figure it out and let you know if it worked.

4). Options to set to block images.
Really? I hope I donít have it set for that. I looked all over and couldnít find where these settings were.

5). Maybe try Firefox on your MAC.
Yup.. FireFox is what I use on my MAC...I donít run it on the DELL PC

6). Can you post your code for the button now that is used for the MAC view?
I wish I could but I donít think Iím educated enough to pick out the code. I viewed the page source and didnít see ANYTHING that look like the code you created. Most lines start with <tr or <td and I donít even know what the heck that is. I know...I'm stupid!

Just as I was about to poster this Iíve discovered a Mozilla Firefox support page with a list of troubleshooting questions. I went through the whole thing and it didnít help at all!
  • 0

#9
Fimchibble

Fimchibble

    New Member

  • Member
  • Pip
  • 7 posts
And I just started FireFox in Safe Mode and the button was still blank :)
  • 0

#10
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Does the MAC show same image not showing peoblem using Apple's Safari or any other browser?

The "<tr or <td" stuff are table tags. Can you provide a link to where the button is being used online? Doubt if that will help too much since I don't have a MAC. :)
  • 0

#11
Fimchibble

Fimchibble

    New Member

  • Member
  • Pip
  • 7 posts
MAJOR:

The only two browsers I use on my MAC are FireFox and Safari and they both show the button as just a blank square. Well...Safari shows it as a blank square with rounded edges but itís pretty much the same thing.

I actually left the original, ugly, gray SUBMIT button on the site right besides the new one you gave me code for and that original one shows up on all these other browsers. Is there maybe anything you could try adding to your code? Iím not suggesting that you made any mistake and I hope it doesnít come across like that. Thereís clearly an issue here with something on my end.

I WOULD send you a link to the page but unfortunately I have 2 other people who are involved with this business and for now I am forced...even against my better judgment, to keep it strictly confidential.

I also noticed that the alignments of some of the elements on the site, particularly form fields, are also off when I view the site on my MAC. Iím only mentioning this because I thought it might be informative to you in understanding what might be going on.

I created another web page a while back with Site Builder (much less complex) and I didnít run into any of these problems. Iím thinking of contacting YAHOO again. Maybe there is some setting in the software that I need to select that makes it compatible with different browsers and operating systems?

I just had an idea. I did a word search in the page source code for ď.gifĒ because I remember that was in the code you wrote for me. So I was able to find the bit you created! Here is how your code looks processed on my MAC. I gave you a bit of code before and after your section as well in case itís helpful! I hope you can make some sense out of this stuff...I sure canít! Thanks again!!!!

<td width="19" height="19" colspan="2"></td>
<td width="190" height="19" colspan="7"></td>
<td height="105" width="322" colspan="6" rowspan="6" valign="top"><div style="width:322px;height:105px;overflow:auto;"><!--$begin html$--><style type="text/css">
input#go {
width: 150px;
height: 37px;
background: url(http://i104.
photobucket.com/albums/m181/doctorkazoo
/SUBMIT-BUTTON.gif) no-repeat center scroll;}</style><input id="go" type="submit" value="" /><!--$end html$--></div>
</td>
<td width="59" height="19" colspan="2"></td>

<script>tableWorkaround2(19)</script>
</tr>
<tr>
<td width="404" height="13" colspan="18"></td>
<td width="59" height="13" colspan="2"></td>
<script>tableWorkaround2(13)</script>
  • 0

#12
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Site Builder has to really suck. :) The style tags with the style code I gave you should be between the "<head></head>" tags of the HTML page. How you do that with Site Builder is beyond me. In fact I see a few other coding errors, but none that may affect your image and submit button.

An improper doctype and bad coding can be the cause of problems with some browsers, but you seem to have the problem only on the MAC with same browsers as on Windows. Without a MAC and the same browsers you use, I'm at a lost as to the exact problem. My code should work in any browser and does here with the ones I checked it with. The closest I can get to seeing it in a MAC OS is browsershots.
  • 0


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

featured