Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls
 

Curious difference in buttons...depending on browser?

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design
 
Thread Tools Search this Thread
  #1  
Old 12-01-2003, 03:51 PM
 
KathyHS KathyHS is offline
 

Senior Member
  
Join Date: Nov 2003
Posts: 143
 

Default Curious difference in buttons...depending on browser?

Okay, this is a mystery.

I'm on a G4 Mac OSX and using Mozilla and Safari...I altered the GO buttons in my store to my own color scheme. No problem. SHows up everywhere in product info and a text link for BUY NOW and a purple (my version) GO button.

But then I visited my store using a PC with IE and instead of the GO buttons (not to be found within the product listings) I get an ORANGE "BUY NOW" button instead. no GO button at all.

Then I discover that the BUY NOW button is not a button at all but a submit link with two gifs: but1 and but2 for both ends.

Soooo...okay. I can alter the but1 and but2 gifs in the skin1...but where is the color for the submit color to match it? Is that in the CSS? if so where?

Thanks in advance!
__________________
X-Cart 4.1.11
Reply With Quote
  #2  
Old 12-08-2003, 10:05 PM
  kangus's Avatar 
kangus kangus is offline
 

Senior Member
  
Join Date: Feb 2003
Posts: 160
 

Default Button.tpl MESS!

The problem I think is a lack of knowing what CCS can do:

Currently your button.tpl tests for Microsoft and if IE uses a mind dead button. They embedded the image names and size and the size is not valid (no type like px or pt). They also use an image fill in the <font> tag and a tag that only IE knows <nobr> .....

X-Cart button.tpl: (what this does is embed Javascript in your page, if the customers have Javascript turned off this fails)
{* MAKE SURE YOU HAVE NO REDUNDANT CARRIAGE RETURNS IN THIS FILE ! *}{if $type eq "input"}{assign var="img_type" value="INPUT type=image"}{else}{assign var="img_type" value="img"}{/if}{capture name=goimage}{include file="buttons/go_image.tpl"}{/capture}{if $style eq "button" and $webmaster_mode ne "editor"}<SCRIPT>
if (navigator.appName.indexOf('Microsoft')>=0)
document.write('<nobr><{$img_type} src="{$ImagesDir}/but1.gif" width="7" height="14" border="0" align="absmiddle"><FONT class="Button">{$button_title}</FONT>[img]{$ImagesDir}/but2.gif[/img]</nobr>');
else
document.write('<font class="FormButton">{$button_title} <{$img_type} {$smarty.capture.goimage|replace:"\r":""|replace:" \n":""}></font>' );
</SCRIPT>{else}<font class="FormButton">{$button_title} <{$img_type} {include file="buttons/go_image.tpl"}></font>{/if}
------------------------------------------------------------------------------

I had to modify my button.tpl:

[img]{$ImagesDir}/lefts.gif[/img]
<span class="ButtonBack">{$button_title}</span>
[img]{$ImagesDir}/rights.gif[/img]

and add class="Button" to the <a > tags that call button.tpl

Then modify skin1.css:

a.Button {text-decoration: none; FONT-FAMILY: Arial;font-weight: bold; font-size: 11px; font-style: normal; font-variant: normal;}
a.Button:link,A.Button:visited {COLOR: #97C0C1; font-style: normal;}
a.Button:hover,A.Button:active{ COLOR: #FFFFFF;font-style: normal; font-size: 11px;}
.ButtonBack {BACKGROUND-COLOR: #a54579; vertical-align: middle;}
.ButtonLeft{margin-left: 0px; margin-right: -3px;line-height: 9px; padding: 0px; vertical-align: middle;}
.ButtonRight{ margin-left: -3px; margin-right: -0px;line-height: 9px; padding: 0px; vertical-align: middle;}

The net effect is text that changes color on mouse over and a button that works on IE/Mozilla/Firebird

X-cart really needs to have every tag "classed" from the database.
I had to edit cart.tpl/gifcert.tpl/add_coupon.tpl/checkout.tpl/buynow.tpl to add the <a > class

Of course if you do this you can not use the patch system to upgrade.
Reply With Quote
  #3  
Old 01-10-2004, 04:05 PM
  joshf's Avatar 
joshf joshf is offline
 

Advanced Member
  
Join Date: Jul 2003
Posts: 97
 

Default

Thank you, Kangas...

A MUCH better solution than creating individual GIFs for each button.

Now, is there a way to keep it from flashing when you hover?
__________________
joshf | X-Cart Portfolio
Currently: http://nightowlpapergoods.com | http://pinkolive.com
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions > Changing design



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 01:37 PM.

   

 
X-Cart forums © 2001-2020