close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

DA button styles

Thread began 2/17/2012 7:15 am by gary.brett434358 | Last modified 2/17/2012 10:11 am by Jason Byrnes | 593 views | 1 replies |

gary.brett434358

DA button styles

Hi, not of great importance but is it possible to change button styles created by DA? Depending on the page it creates I have noticed the buttons are coded differently, for example the update button on details & update pages are different?

Presently on the update page it created this button:

<input type="image" name="Update" id="Update" value="Update" alt="Update" src="WA_DataAssist/images/Slate/Traditional_update.gif"  />



On the details page update button is:

<a href="tblcontacts_Update.php?ContactID=<?php echo(rawurlencode($row_WADAtblcontacts['ContactID'])); ?>" title="Update"><img border="0" name="Update" id="Update" alt="Update" src="WA_DataAssist/images/Slate/Traditional_update.gif" /></a>



I managed to change the latter to my style using this:

<a href="tblcontacts_Update.php?ContactID=<?php echo(rawurlencode($row_WADAtblcontacts['ContactID'])); ?>" title="Update" class="btnIconLeft mr10"><a href="tblcontacts_Update.php?ContactID=<?php echo(rawurlencode($row_WADAtblcontacts['ContactID'])); ?>" title="Update" class="btnIconLeft mr10"><img src="images/icons/dark/pencil.png" alt="" class="icon" /><span>Update</span></a>



Can I change the update page update button conform with my other styled buttons?

Thanks

Sign in to reply to this post

Jason ByrnesWebAssist

to understand this a little better lets break down the different types of buttons, why they are used, and how they change.

the button on the details page is an href link to the update page that is wrapped around an image tag, this is used to link to the update page and pass the ID of the record to update:

the anchor:

php:
<a href="tblcontacts_Update.php?ContactID=<?php echo(rawurlencode($row_WADAtblcontacts['ContactID'])); ?>" title="Update">



the image:

php:
<img border="0" name="Update" id="Update" alt="Update"  src="WA_DataAssist/images/Slate/Traditional_update.gif" />



close the anchor:

php:
</a>




your change was to edit the src attribute of the image tag to point to your image. you changed:

src="WA_DataAssist/images/Slate/Traditional_update.gif"


to:

src="images/icons/dark/pencil.png"



On the update page, the button is part of form, the buttons job is to tell the form to send the information to the browser. A link cant be used for this, so a form element is needed.

There are two types of form elements that can be used to submit a form:
1) A button element using the type="submit" attribute
2) An Image element using the type="image" attribute


While setting up the data assist wizard, One of the settings on the second step allows you to choose wether to use a Button or Image element type on the page.

In your case, it is an image element using <input type="image"....

php:
<input type="image" name="Update" id="Update" value="Update" alt="Update"  src="WA_DataAssist/images/Slate/Traditional_update.gif"  />



just like an image tag, an image form element type has the src attribute:

src="WA_DataAssist/images/Slate/Traditional_update.gif"



that tells it what image to load. you can change that src attribute to point to your own images to change the look of the buttons.


Extra info:
If the button where a submit element type, you would need to use CSS to change it's appearance. A submit button type does not allow for an image to be used, except as a background.

see the following road map tutorial for details on styling form elements with css:
roadmap_03.php

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...