| ||||||||||
Shopping cart software Solutions for online shops and malls | ||||||||||
|
X-Cart Home | FAQ | Forum rules | Calendar | User manuals | Login |
Curious difference in buttons...depending on browser? | |||
|
|
Thread Tools | Search this Thread |
#1
|
|||||||
|
|||||||
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 |
|||||||
#2
|
|||||||||
|
|||||||||
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. |
|||||||||
#3
|
|||||||||
|
|||||||||
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 |
|||||||||
|
|||
X-Cart forums © 2001-2020
|