CSS buttons works in one language and not other?

[McLovin]

Hi guys,

I've recently installed an additional language pack (Dutch) for ZC (v151 with custom template). I've activated CSS, but the "Add Selected products to cart" button, only works as a CSS button in English. In the other language (Dutch) the "Add Selected products to cart" is rendered as an image (the other buttons seem to be working just fine).

I've have been searching through the PHP files using the Developers tool kit, but unfortunately I wasn't able to find anything. I've also been able to find an earlier thread (http://www.zen-cart.com/showthread.p...-and-not-other) with another user facing the same problem, but unfortunately his solution didn't work for me.

If anyone could offer any advice, I'd be much obliged!

Thanks

[Trinity14]

So you have copied your translated file to: includes/templates/YOUR_TEMPLATE/buttons/dutch

You may also need to change includes/templates/YOUR_TEMPLATE/css/stylesheet_css_buttons.css if there are any changes made to the default button width.

Hope that helps.

[McLovin]

So you have copied your translated file to: includes/templates/YOUR_TEMPLATE/buttons/dutch

You may also need to change includes/templates/YOUR_TEMPLATE/css/stylesheet_css_buttons.css if there are any changes made to the default button width.

Hope that helps.

Thanks for the reply!

I've looked at the stylesheet_css_buttons.css, but as far as I can see the default button width hasn't been changed. I've also played with the translation files by changing

define('BUTTON_ADD_PRODUCTS_TO_CART_ALT','Geselecteerde artikelen toevoegen aan winkelwagen');

into

define('BUTTON_ADD_PRODUCTS_TO_CART_ALT','Add Selected Products to Cart');

in case the translated string was too long. But unfortunately no luck.

Below I've added the contents of stylesheet_css_buttons.css and the function zenCssButton (..\includes\functions\html_output.php). Maybe these contain a hint?

/**
 * CSS Buttons Stylesheet
 *
 * Thanks to paulm for much of the content of the CSS buttons code
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet_css_buttons.css 2765 2006-01-01 21:15:45Z birdbrain $
 */

/* css buttons */
.cssButton, .cssButtonHover {
	font-family: 'Oswald', sans-serif;
	font-size:13px;
	line-height:14px;
	text-transform:uppercase;
	color:#fff;
	font-weight:400;
	text-decoration:none!important;
	background:#a49682;
	display:inline-block;
	padding:5px 4px 8px 5px;
	cursor:pointer!important;
	margin:0 2px;
}
a span{
	width:auto!important;
}
.cssButton:hover,
.cssButtonHover {
	font-family: 'Oswald', sans-serif;
	font-size:13px;
	line-height:14px;
	text-transform:uppercase;
	color:#fff;
	font-weight:400;
	text-decoration:none!important;
	background:#595959;
	display:inline-block;
	padding:5px 4px 8px 5px;
	cursor:pointer!important;
	margin:0 2px;
}
.navNextPrevWrapper a,
.btn1 a{
	text-decoration:none;
}
/* adding the styles below might be needed if the default button width is changed */
/* .button_continue_shopping, .button_shipping_estimator {width: 150px;} */
.small_delete, .button_prev, .button_next, .button_search  {}
.button_sold_out_sm, .button_sold_out, .button_update_cart, .button_checkout, .button_login {}
.button_return_to_product_list, .button_add_selected {}
.button_in_cart{}  
.button_submit {}
.button_update_cart {}
.button_update_cartHover {}
/*.innerbox#headernavcenter .boxtext .button_search {display:inline;}*/

/*---search-button---*/
#head-search .cssButton.search{
	width:62px!important;
	height:35px!important;
	border:none;
	background:url(../images/search.gif) no-repeat 0 0;
	font-size:0;
	cursor:pointer;
	float:left;
	margin:0;
}
#head-search .cssButtonHover.search{
	width:62px!important;
	height:35px!important;
	border:none;
	background:url(../images/search.gif) no-repeat 0 bottom;
	font-size:0;
	cursor:pointer;
	float:left;
	margin:0;
}

  function zenCssButton($image = '', $text, $type, $sec_class = '', $parameters = '') {

    // automatic width setting depending on the number of characters
    $min_width = 80; // this is the minimum button width, change the value as you like
    $character_width = 6.5; // change this value depending on font size!
    // end settings
    // added html_entity_decode function to prevent html special chars to be counted as multiple characters (like &)
    $width = strlen(html_entity_decode($text)) * $character_width;
    $width = (int)$width;
    if ($width < $min_width) $width = $min_width;
    $style = ' style="width: ' . $width . 'px;"';
    // if no secondary class is set use the image name for the sec_class
    if (empty($sec_class)) $sec_class = basename($image, '.gif');
    if(!empty($sec_class))$sec_class = ' ' . $sec_class;
    if(!empty($parameters))$parameters = ' ' . $parameters;
    $mouse_out_class  = 'cssButton' . $sec_class;
    $mouse_over_class = 'cssButtonHover' . $sec_class . $sec_class . 'Hover';
    // javascript to set different classes on mouseover and mouseout: enables hover effect on the buttons
    // (pure css hovers on non link elements do work work in every browser)
    $css_button_js .=  'onmouseover="this.className=\''. $mouse_over_class . '\'" onmouseout="this.className=\'' . $mouse_out_class . '\'"';

    if ($type == 'submit'){
// form input button
   $css_button = '<input class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" value="' .$text . '"' . $parameters . $style . ' />';
    }

    if ($type=='button'){
// link button
   $css_button = '<span class="' . $mouse_out_class . '" ' . $css_button_js . $style . ' >&nbsp;' . $text . '&nbsp;</span>'; // add $parameters ???
    }
    return $css_button;
  }

[Trinity14]

Can you send a link to your site and I'll take a look?

[McLovin]

Yes, of course! http://www.bonesfashion.nl/

[Trinity14]

As long as I add a quantity amount to the product, I can add it to the shopping cart and proceed with shopping or checkout. So what you have in code works.

You are using the includes/templates/template default/buttons/dutch/button_add_selected.gif

Check includes/templates/YOUR_TEMPLATE/buttons/dutch/button_add_selected.gif... you may have to upload the button_add_selected.gif or edit it to make it look like the rest of your site's template.

[McLovin]

That's the weird thing. For some reason ZC uses button_add_selected.gif, while it should be using CSS. And it only does that with the 'Add Selected products to cart' (at least, as far as I can see). But you're right, I can always edit the button_add_selected.gif to make it look like the rest of my site's template. If I manage to find a solution, I'll post it here!

EDIT: My website is password protected, because it still needs some work. If you want to check out my website just let me know, I'll make it accessible or send you the login info.

[lat9]

When CSS buttons are enabled, if the "alt" text supplied for a call to zen_image_button is longer than 30 characters, the function falls back to display the button image. I'm pretty sure that that's what you're running into.

[McLovin]

Many thanks, that was the solution!

I had to change the definition in ..\includes\languages\language_name\theme671\button_names.php.

[RESOLVED]

[Trinity14]

Glad it all worked out!