[Contribution] CSS Buttons Everywhere

[Bigredman74]

CSS Buttons Everywhere

 

About this contribution:

This contribution uses the alt text of a button and the CSS style sheet to create a custom looking button.

 

Credits:

This contribution is a combination of CSS BUTTONS, http://www.oscommerce.com/community/contributions,3328 and css buttons, http://www.oscommerce.com/community/contributions,3363.

 

Both of these contributions work as promised, but by using parts from each, the results are better looking buttons and a quicker install time.

 

Contribution Compatibity:

The button for Credit Class and Gift Voucher, http://www.oscommerce.com/community/contributions,282, is not automatically converted to a CSS button. I will post an update when available. I am not aware of other incompatibilities. If other incompatibilities are found, please post them here.

 

Support:

Please post your requests for support and installation help or your comments and suggestions to this thread.

 

Download:

http://www.oscommerce.com/community/contributions,3365

Edited July 20, 2005 by Bigredman74

[[MaDBuCe]]

It ain't working here! I think the function tep_image_button does not use an input type.

 

I tried it in a div but i can't get it inline.

 

 ?function tep_css_button($parameters = '') {
? ?global $language;
? ?$css_button = '<div class="cssbutton">' . $parameters . '</div>';
? ?return $css_button;
?}

Edited July 20, 2005 by [MaDBuCe]

[Bigredman74]

  function tep_css_button($parameters = '') {
   global $language;
   $css_button = '<div class="cssbutton">' . $parameters . '</div>';
   return $css_button;
 }

<{POST_SNAPBACK}>

 

You are refering to a function in another contribution, "css buttons".

 

You can download my contribuition, "CSS Buttons Everywhere", from: http://www.oscommerce.com/community/contributions,3365.

[[MaDBuCe]]

You are refering to a function in another contribution, "css buttons".

 

You can download my contribuition, "CSS Buttons Everywhere", from: http://www.oscommerce.com/community/contributions,3365.

<{POST_SNAPBACK}>

 

The tep_image_submit function goes in a form. The tep_image_button goes in a link. Your contrib puts an input type field into an a href function. That's not working.

 

Using MS2.2 / 06-2003

Edited July 20, 2005 by [MaDBuCe]

[Bigredman74]

You referenced the following function, which in not part of the CSS Buttons Everywhere contribution.

 

  function tep_css_button($parameters = '') {
   global $language;
   $css_button = '<div class="cssbutton">' . $parameters . '</div>';
   return $css_button;
 }

<{POST_SNAPBACK}>

 

If you have downloaded the CSS Buttons Everywhere contribution and you are experiencing a problem, check the install instructions again. If it's installed correctly, what is the error that you are receiving and in what page did the error occur?

 

This contributition was tested on an fresh install of osCommerce and also a heavily modded osCommerce site, both with no problems. All image buttons, with the exception of the Credit Class and Gift Voucher contributition as mentioned above, were seemlessly replaced by a CSS button.

 

I would like to help you in any way that I can. Just post the error that you are receiving and the page that it occured on.

 

All the best, Tim.

[[MaDBuCe]]

This part of your contribution works;

 

// BEGIN: CSS Buttons Everywhere

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

global $language;

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

return $css_submit;

}

// END: CSS Buttons Everywhere

 

This doesn't;

 

// BEGIN: CSS Buttons Everywhere

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

global $language;

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

return $css_submit;

}

// END: CSS Buttons Everywhere

 

The link that it creates aren't clickable.

 

The solution is to do it with a span because you can place this in <a href>..</a>

Edited July 21, 2005 by [MaDBuCe]

[Bigredman74]

Which buttons are not clickable to you?

[azer]

could u huys povide a screenshot of this buttons ?

[Guest]

Hi,

 

nice contribution...

but there is a "BIG" typo error...

 

The value of the class attribute in the html_output.php is "cssButton"

But in the stylesheet.css file, the class is "buttonSubmit".

 

Maybe, that's the reason that causes this contribution not to work....

 

But now, I have corrected it and I have uploaded the file to the contribution page.

 

again, nice and great contribution.

[Guest]

If you want to add a hover state, you can add the following lines at the end of your style sheet.

 

.cssbutton:hover {

background-color: #ffffcc;

color: #cc0000;

text-decoration: underline;

}

 

(check that the class name match your class name in the html_output.php fle).

 

Note: dont expect this to work in Microsoft Internet Explorer. IE only accepts hover states for anchors < a > tags.

This works for modern browsers, like Firefox.

[concorde44]

Hi,

what are the advantages of your contrib in relation to mine "CSS BUTTONS" ?

 

Seb

[frae_irz]

this contribution works only with mozilla and netscape, doesn't it?

some of the "links" do not function in the ie and other browsers correct...

[Bigredman74]

Hi,

nice contribution...

but there is a "BIG" typo error...

The value of the class attribute in the html_output.php is "cssButton"

But in the stylesheet.css file, the class is "buttonSubmit".

Maybe, that's the reason that causes this contribution not to work....

But now, I have corrected it and I have uploaded the file to the contribution page.

again, nice and great contribution.

<{POST_SNAPBACK}>

You are correct, that was a BIG typo. Thank you for fixing this and posting an update to the contribution section.

 

 

this contribution works only with mozilla and netscape, doesn't it?

some of the "links" do not function in the ie and other browsers correct...

<{POST_SNAPBACK}>

Thanks for pointing this out. I did test this contribution on a fresh osCommerce install and also a heavily modded site, but only on Firefox in Linux. I'm looking at it now in Internet Exploder and you are correct, some of the links don't work. My apologies to Vincent for the confusion earlier if you are using IE. The new update now works in IE.

 

 

Hi,

what are the advantages of your contrib in relation to mine "CSS BUTTONS" ?

Seb

<{POST_SNAPBACK}>

Hi Seb,

I tried your contribution and I really liked it. Thank you for taking the time to create and share it. I think that buttons created through CSS are a great idea. I experienced some issues with the general behavior/alignment with your contrib, for example the tep_image_submit function caused line breaks or wrapping of buttons on some pages. Then I found the contrib, ?css buttons?, which seemed to solve some of the issues I was experiencing, but the install called for replacing a lot of stuff in the site. Also I couldn't find a support thread for either contribution. So I tried to combine the best parts of the two and started a support thread for it.

 

The reason that I made a different contribution and not just an update to both yours and the other ''css buttons? contrib, is because the functions and installation methods differ so much between the two. Combining the two into a new contribution and starting a support thread seemed more appropriate. Thanks again for your contrib, ?CSS BUTTONS?. This contrib would not have been possible without it.

 

 

CSS Buttons Everywhere - Update 3

- Minor addition to the tep_image_submit function.

- Changed the tep_image_function, links now works in Internet Explorer.

- Optional: Added extra properties to style sheet class ?cssButtons?.

- Tested on a fresh osCommerce install and also a heavily modded site in Firefox, Internet Explorer, and Opera.

 

Download from: http://www.oscommerce.com/community/contributions,3365.

 

Please post your comments, suggestions, or problems about this update.

 

Also, is anyone else working on getting the Credit Class & Gift Voucher button to work with CSS?

[royalfunk]

Where can we see examples of the CSS buttons in action before going through the entire installation?

 

-Aaron

[Bigredman74]

Where can we see examples of the CSS buttons in action before going through the entire installation?

 

-Aaron

<{POST_SNAPBACK}>

 

Hi Aaron,

 

The button attributes, size, border style, background, text style, etc., are all controlled through CSS, therefore the possible combinations are virturally endless. There is no one set button style. The install for this contrib is quick and easy, only two files to edit. I suggest taking a few minutes and install this contrib, adjust the CSS values to match your site, and view your site with the new CSS buttons. If you can cut and paste, the install will be less than 5 minutes. Good luck and let me know how it works for you.

 

All the best,

Tim

[Bigredman74]

Compatibility Hack for the Credit Class & Gift Voucher contribution.

 

In the file catalog/includes/modules/order_total/ot_coupon.php and ot_gv.php.

 

FIND:

      $image_submit = '<input type="image" name="submit_redeem" onClick="submitFunction()" src="' . DIR_WS_LANGUAGES . $language . '/images/buttons/button_redeem.gif" border="0" alt="' . IMAGE_REDEEM_VOUCHER . '" title = "' . IMAGE_REDEEM_VOUCHER . '">';

REPLACE WITH:

// BEGIN: CSS Buttons Everywhere Compatibility Hack
$image_submit = '<input type="submit" class="cssButton" value="' . tep_output_string(TEXT_REDEEM_VOUCHER) . '" onClick="submitFunction()">';
// END: CSS Buttons Everywhere Compatibility Hack

 

In the file catalog/includes/languages/english.php before the ?> at the end of the file,

 

ADD:

define('TEXT_REDEEM_VOUCHER', 'Redeem');

 

This hack was tested on a heavily modded site with Firefox, IE, and Opera. Let me know how it works on your site.

[[MaDBuCe]]

Regarding Update 3

 

<div> is a block element and <a> is inline. This means <a> must be inside a <div> if both are present.

<span> is an inline element and you may change the div's to span's and find it works ok for all browsers.

[concorde44]

ok Tim, you're right there are little misalignements sometimes! Will try your contrib.

 

For Aaron, see it in action here [css buttons] :

Jardins Anim?s

Regards

Seb

[COOLumbia]

Hi,

 

I tried installed the contribution, and it seemed to work OK in that there were buttons, but I get these ugly messages at the top of the screen:

 

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/giftsand/public_html/store/includes/functions/html_output.php:300) in /home/giftsand/public_html/store/includes/functions/sessions.php on line 67

 

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at /home/giftsand/public_html/store/includes/functions/html_output.php:300) in /home/giftsand/public_html/store/includes/functions/sessions.php on line 67

 

So I restored the html_output.php and stylesheet.css files, but I still get the messages. I even copied the html_output.php and stylesheet.css files from another store I have that works OK, and I still get these messages.

 

Can anyone offer any suggestions on how to get rid of these messages? They started soon as I installed this contribution, but I don't think they are related, because I put the onmodified files back, but what could be causing this?

[COOLumbia]

Sorry, I found the problem. html_output.php must not contain any spaces after the last ">". I removed the spaces and all is OK again.

[Bigredman74]

Regarding Update 3

 

<div> is a block element and <a> is inline. This means <a> must be inside a <div> if both are present.

<span> is an inline element and you may change the div's to span's and find it works ok for all browsers.

<{POST_SNAPBACK}>

 

Thanks for the suggestion, but when I change the <div> tag to a <span> in the function, the buttons do not display correctly in Firefox and Opera, IE looks the same as before. I tried it on both a stock site and a modded site, same problem. What other changes did you make to make the <span> tag work for all browers?

[nana]

i was using something like this in tips and tricks it also has a rollover effect but it did not have the solution gor ccgv thx for that

[COOLumbia]

If you want to add a hover state ...  dont expect this to work in Microsoft Internet Explorer. 

You're right about Internet Explorer not doing anything on hover. But even Firefox behaves peculiarly. Go to GiftsAndMore to see examples of what I mean.

 

The Quick Find button works fine in Firefox: it changes the background color to yellow and adds an underline to the text.

 

On the Products page, the FIRST Buy Now button in the column adds the text underline and changes the text color (but not the background color); all the other Buy Now buttons in the column just add the text underline (no color change at all).

 

The Add To Cart buttons just add the text underline (no color change).

 

The Reviews button does the same (underline only), but the Add To Cart on the same line works as it should, changing the background to yellow, the text to red, and adds the underline.

 

Very inconsistent ...

[Guest]

Thanks for the suggestion, but when I change the <div> tag to a <span> in the function, the buttons do not display correctly in Firefox and Opera, IE looks the same as before.

<{POST_SNAPBACK}>

 

I have tested to change <div> for <span>, as a <div> tag inside an <a> tag isnt valid.

 

It works for me, at least in Firefox and IE6/Win

[COOLumbia]

I was able to get some of the CSS buttons to change on mouseover in I.E. by removing the <div></div> tags in html_output.php and removing a '>' in products_new.php. All the "buy now" buttons on the new products page changed on mouseover. I guess the same thing could be done for most of the other buttons (removing the '>' so that there is no div or span, thereby putting the css buttons in the <a></a> tags). When the buttons are within the <a> tags, the mouseover works fine in I.E.

 

I removed the '>' in products_new.php after the "<td align=right valign=middle class-main><a href=xxxxxxxxxxxxxxx>"

 

Then in functions/html_output.php I removed the <div and </div> in "<div class=cssbutton> buttonname </div>"