Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

[Contribution] CSS Buttons Everywhere


Recommended Posts

I love this contrib.

 

I have made a littlec change in tep_image_submit.

I removed the class="cssButton" and so I get the default type="submit" buttons, which is what I really want.

 

// BEGIN: CSS Buttons Everywhere MODIFIED

function tep_image_submit($image, $value = '-AltValue-', $parameters = '') {

global $language;

$css_submit = '<input type="submit" value="' . tep_output_string($value) . '" />';

return $css_submit;

}

// END: CSS Buttons Everywhere

 

Great for me.

 

But...if I do the same with tep_image_button, I get plain text.

I tried by using <input type"submit" ...etc. in tep_image_button, but although it works in Firefox it does not in IE. I also tried using <button>, but still didn?t worl. Reading previous post seems that these are illegal html.

 

Out of ideas :-((, I?m pretty new to html and php.

 

Is there any way I can get the same "button" style in "tep_image_button" ?

 

Thanks a lot in advance.

Link to comment
Share on other sites

  • Replies 76
  • Created
  • Last Reply

Top Posters In This Topic

On the product_info.php page, the default is text, "Click to enlarge", not an image or button. Is this the page in reference, and if so, have you modified this page to display an image button for "Click to enlarge"?

 

Yea this is my code in that area

<script language="javascript"><!--
  document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id'] . 'ℑ=0') . '\\\')">' . tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');
//--></script>
<noscript>

 

The image that I am trying to have displayed is this one:

image_enlarge.gif

 

If anyone knows how to get this to work with CSS please let me know.

Link to comment
Share on other sites

...

If anyone knows how to get this to work with CSS please let me know.

In your code above, change "tep_image_button" to "tep_image_button_nocss"

 

In the file /catalog/includes/functions/html_output.php add the following before the closing ?>

 

function tep_image_button_nocss($image, $alt = '', $parameters = '') {
global $language;

return tep_image(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, $alt, '', '', $parameters);
 }

 

It's just the original function renamed so you can use it whenever you want the image to appear.

 

I haven't tried this myself, so let me know how it works.

 

Best Regards, Tim

Link to comment
Share on other sites

In your code above, change "tep_image_button" to "tep_image_button_nocss"

 

In the file /catalog/includes/functions/html_output.php add the following before the closing ?>

 

function tep_image_button_nocss($image, $alt = '', $parameters = '') {
global $language;

return tep_image(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, $alt, '', '', $parameters);
 }

 

It's just the original function renamed so you can use it whenever you want the image to appear.

 

I haven't tried this myself, so let me know how it works.

 

Best Regards, Tim

 

 

Works Perfect! Thanks for all the help.

James

Link to comment
Share on other sites

  • 2 weeks later...

Goodday,

 

I have a problem with the Hover state in IE.

Found a fix with the hoverstate in IE, to include the <input> with an javascript function, the hover state is working, only the "function tep_image_button" buttons don't work anymore. I have made 2 html_output.php files, 1 for IE en 1 for FF, because FF don't like this on some buttons.

 

I tried the "function tep_image_button" to use an mouseclick event, and this was working to. only i don't know how to do this correctly.

 

this works..

function tep_image_submit($image, $value = '-AltValue-', $parameters = '') {

global $language;

$css_submit = '<a href="java script: void(0)"><input type="submit" class="cssButton" value="' . tep_output_string($value) . '" /></a>';

return $css_submit;

}

 

this is not working..

function tep_image_button($image, $value = '-AltValue-') {

global $language;

$css_submit = '<a href="java script: void(0)"><input type="submit" class="cssButton" value="' . tep_output_string($value) . '" /></a>';

return $css_submit;

}

 

this works..

<a href="java script: void(0)"><input type="submit" class="cssButton" value="Winkelwagen bijwerken" /></a>

 

this is not working..

<a href="http://yottazone.dyndns.info/shop/checkout_shipping.php"><a href="java script: void(0)"><input type="submit" class="cssButton" value="Kassa" /></a></a>

 

Anyone has a clue for me, to activate the hover state for IE for the "function tep_image_button"

 

Thanks

Link to comment
Share on other sites

  • 1 month later...

Goodday,

 

I have a problem with the Hover state in IE.

Found a fix with the hoverstate in IE, to include the <input> with an javascript function, the hover state is working, only the "function tep_image_button" buttons don't work anymore. I have made 2 html_output.php files, 1 for IE en 1 for FF, because FF don't like this on some buttons.

 

I tried the "function tep_image_button" to use an mouseclick event, and this was working to. only i don't know how to do this correctly.

 

this works..

function tep_image_submit($image, $value = '-AltValue-', $parameters = '') {

global $language;

$css_submit = '<a href="java script: void(0)"><input type="submit" class="cssButton" value="' . tep_output_string($value) . '" /></a>';

return $css_submit;

}

 

this is not working..

function tep_image_button($image, $value = '-AltValue-') {

global $language;

$css_submit = '<a href="java script: void(0)"><input type="submit" class="cssButton" value="' . tep_output_string($value) . '" /></a>';

return $css_submit;

}

 

this works..

<a href="java script: void(0)"><input type="submit" class="cssButton" value="Winkelwagen bijwerken" /></a>

 

this is not working..

<a href="http://yottazone.dyndns.info/shop/checkout_shipping.php"><a href="java script: void(0)"><input type="submit" class="cssButton" value="Kassa" /></a></a>

 

Anyone has a clue for me, to activate the hover state for IE for the "function tep_image_button"

 

Thanks

Link to comment
Share on other sites

Hi guys,

I want to install this great contribution on my site for adding buttons to categories.php. I just wondering whether this mod will allow me to add buttons to categories/subacategories in the left coloumn. I am using BTS with oscommerce. Or it just works on already created buttons like buy now, my account, etc. Any help would be great..

 

Brad

Link to comment
Share on other sites

  • 3 weeks later...

Hi All,

I have used CSS Buttons Everywhere and it works fantastic!

the only thing i want to ask is the after we implement there are few buttons take more space than they should.

 

like instead of button like this

 

------------- Continue-------------

 

this should be like this

 

--Continue--

 

I couldnt find a property in CSS which can effect this, how can we make the buttons to be right widths.

 

I hope i am able to make clear what i want to say!

 

Thanx

Link to comment
Share on other sites

I'm using this contribution and everything works except for one button! The add to cart on the product_info.php page. Any ideas what to try? I really like this one and don't want to revert back to using the images.

 

PM me if you would like the URL.

 

Justin

Link to comment
Share on other sites

  • 6 months later...

Great contribution.. However there are a few (minor) issues on my site and I wondered if anyone is experiencing the same..

 

Firstly,

 

MY INCOMPATIBLE CONTRIBUTIONS:

 

DOWNLOADS FILE PAGE: The problem is there (i think) because this contribution uses onMouseOver events to add highlighting to the buttons..

 

osC AFFILIATE: Also I believe the 'build link' button added below the product image on product_info.php by the osC Affiliate contribution does not change..

 

Secondly, on Firefox I have noticed that my <input class="cssbutton" type="submit"> do not show a hand cursor, while others do..

 

I have a heavily modded store, but dont think that should be a problem with this contribution..

 

Thanks for any help in advance!

 

Scottman

Link to comment
Share on other sites

I have just updated this excellent contribution..

 

But I have found one more problem, other listed previously, that occurs on my store when viewing with firefox:

 

1. the :hover class does not work on any CSS buttons created with tep_image_button, only with butttons created using tep_image_submit.

 

2. the cursor: ; CSS attribute does not work with buttons created by tep_image_submit but does work with buttons created using tep_image_button

 

Is anyone else experienceing the same? Or has anyone already aded a fix for this to thier site?

 

Please help me fix this as its driving me mad, and making my site look very messy!!

 

Thanks in advance,

 

scottman

Link to comment
Share on other sites

  • 2 months later...
I have just updated this excellent contribution..

 

But I have found one more problem, other listed previously, that occurs on my store when viewing with firefox:

 

1. the :hover class does not work on any CSS buttons created with tep_image_button, only with butttons created using tep_image_submit.

 

2. the cursor: ; CSS attribute does not work with buttons created by tep_image_submit but does work with buttons created using tep_image_button

 

Is anyone else experienceing the same? Or has anyone already aded a fix for this to thier site?

 

Please help me fix this as its driving me mad, and making my site look very messy!!

 

Thanks in advance,

 

scottman

I have noticed a similar problem. the tep_image_submit buttons center text correctly but the tep_image_buttons skew the text to the top of the button. Basically anything that is a link rather than a submit is messed up.

 

Anyone have any idea?

 

Gary

Link to comment
Share on other sites

I have noticed a similar problem. the tep_image_submit buttons center text correctly but the tep_image_buttons skew the text to the top of the button. Basically anything that is a link rather than a submit is messed up.

 

Anyone have any idea?

 

Gary

 

I had a similar problem with some of the buttons working correctly and some not and it turned out to be a Doctype problem. Some of the pages were going into “Quirks” mode and others not. The pages in Quirks mode from having an incorrect Doctype were the ones that didn't work. You might try to fix your DOCTYPE statement and see if they work better.

 

Here's a pretty good article on the subject: http://alistapart.com/stories/doctype/

 

You want something like this:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

At least that's what did the trick for me.

Link to comment
Share on other sites

  • 4 weeks later...

I have a problem with some buttons working right and some just being hyperlinked. I installed the contrib correctly a few times and it is still having problems. I'm using oscmax 2.0 and installed it to the stylesheet.css in my template dir.

Link to comment
Share on other sites

  • 4 weeks later...
  • 3 months later...

How been looking trough the thread but didnt find my info. Som my question in:

How can i make the CSS-buttons to looke the same?

I.e. buttons for continue and button for login is slightly different. It also appears different in different browsers. In safari it puts a aqua-button instead of the css-button.

 

I the problem lies with the submit-buttons. I want to convert the to "tep_image_button".

 

Any solution for this?

Link to comment
Share on other sites

  • 4 months later...

Hi

 

This is a great contribution but I cannot get it to work with wishlist (http://addons.oscommerce.com/info/1682)

 

I've played around for hours and am simply not getting the function right. - The buttons simply do not do what they are meant to, apparently because the css buttons are not passing the correct info for the wishlist functions. Any help would be greatly appreciated!

Link to comment
Share on other sites

  • 7 months later...

I am using CSS buttons everywhere. Is there an solution for buttons with longer names which is causing them to break and create two lines?

 

Example:

-----------------------

| continue |

| |

| shopping |

-----------------------

 

Am looking for this:

------------------------------

| continue shopping |

------------------------------

 

Thanks.

 

blr044

Link to comment
Share on other sites

Hi

 

This is a great contribution but I cannot get it to work with wishlist (http://addons.oscommerce.com/info/1682)

 

I've played around for hours and am simply not getting the function right. - The buttons simply do not do what they are meant to, apparently because the css buttons are not passing the correct info for the wishlist functions. Any help would be greatly appreciated!

 

This is how I changed wishlist page, hope it works for you. GL!

 

<input type="submit" name="delete_prod_x" value="Delete from Wishlist" class="TheButtonStyle">  <input type="submit" class="TheButtonStyle" name="add_prod_x" value="Add to Cart" />

Link to comment
Share on other sites

I am using CSS buttons everywhere. Is there an solution for buttons with longer names which is causing them to break and create two lines?

 

Example:

-----------------------

| continue |

| |

| shopping |

-----------------------

 

Am looking for this:

------------------------------

| continue shopping |

------------------------------

 

Thanks.

 

blr044

 

Found solution!

Link to comment
Share on other sites

  • 3 weeks later...

Hello, i got everything working fine..

 

Now i have a difficult question, i would like to make the corners of the buttons round and have a hoover funcion.

How do i add this ? i tryed everything...

 

Some help would be great...

 

This is how it is now :

 

.cssbutton {

border: solid 2px #5f3318;

background-color: #ddd7c1;

color : #5f3318;

vertical-align: top;

font-weight: bold;

font-family: Verdana, Arial, Tahoma;

font-size: 12px;

cursor: pointer;

text-align: center;

width: 150px;

}

 

.cssbutton:active, cssbuttonsubmit:active {

border-style: inset;

}

 

.cssbuttonsubmit{

border: solid 0px #5f3318;

background-color: #ddd7c1;

vertical-align: top;

color: #5f3318;

font-family: Verdana, Arial, Tahoma;

font-weight: bold;

font-size: 12px;

cursor: pointer;

text-align: center;

width: 150px;

}

Link to comment
Share on other sites

  • 1 month later...

I added an update to the package that should fix the difference between the regular buttons and the submit buttons. They all look the same now. It is not my code, it is from Basic Design Contribution, I just googled it and found the missing bit of code there.

Link to comment
Share on other sites

  • 2 months later...
I am using CSS buttons everywhere. Is there an solution for buttons with longer names which is causing them to break and create two lines?

 

Example:

-----------------------

| continue |

| |

| shopping |

-----------------------

 

Am looking for this:

------------------------------

| continue shopping |

------------------------------

 

Thanks.

 

blr044

 

Hi - just installed and having the same issue - what was your solution??

 

Cheers

Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...