Different button color with JQuery

[veszka]

Hi,

 

I would like to create button with different color in osc 2.3.1. With JQuery theme creator I don't know how can I do it.

The color of the button depends on any condition.

 

Have anyone any idea related this feature?

 

Thanks in advance!

[veszka]

Any idea or help?

 

Thank you!

[NodsDorf]

Maybe somebody else can be more specific. As I have only played around with 2.3.1 but it appears the button color is tied into the pages Background color and the theme from themeroller you use. Or it maybe an opacity thing that is bleeding the background through.

 

You can see a test site I have up, I used a green background and a pink theme. The buttons are still green but on hover they turn pinkish. http://www.onlinegamekey.com/index

[multimixer]

The best way to go is to create a new theme with themeroller, that's very easy to do, illustrated example here. If you want to change just the buttons, by altering the css your self, you can read here

 

You said you don't know how to do with the ui theme creator, what exactly is the problem?

[♥14steve14]

Have you looked in the contribution section. I uploaded a range of new jquery codes compatible with the standard oscommerce and included instructions on how to change.

[stephen89]

Its kind of a pain but in ext\jquery\ui\redmond\jquery-ui-1.8.6.css

you can change the look of the buttons, My problem is that in osc 2.3.1 some of my buttons are partially transparent (some more or less than others) Reviews button in product_info is like 50% see through while the cart/checkout/account buttons at he top are about 80% and the add to cart button is 100%, this has me confused because I can't see anything in the review button code that would make it see through.

 

anyway in the jquery ui css file, you should be able to change the colors of the button text, background colors/images and borders

[strub]

Hi,

 

I tried also to have different button colors but it seems quite complicated to do this or I didn't find out an easy way to do this so I gave up.

 

By the way, you can easyki change the semi transparent colors if you change "secodary" to "primary" like this:

 

tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'secondary')

tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'primary')

[foxp2]

first step, change the tep_draw_button function in catalog/includes/functions/html_output.php with :

 

////
// Output a jQuery UI Button
 function tep_draw_button($title = null, $icon = null, $link = null, $priority = null, $params = null, $id = null) {
static $button_counter = 1;	
$types = array('submit', 'button', 'reset');

if ( !isset($params['type']) ) {
 	$params['type'] = 'submit';
}
if ( !in_array($params['type'], $types) ) {
 	$params['type'] = 'submit';
}

if ( ($params['type'] == 'submit') && isset($link)) {
 	$params['type'] = 'button';
}

if (!isset($priority)) {
 	$priority = 'secondary';
}

if (!isset($id)){
	$idbutton = "tdb" . $button_counter . "";
}else{
	$idbutton = $id;
	$button_counter -= 1;
}
$button = '<span class="tdbLink">';

if ( ($params['type'] == 'button') && isset($link)) {
 	$button .= '<a id="' . $idbutton . '" href="' . $link . '"';

 	if ( isset($params['newwindow']) ) {
   	$button .= ' target="_blank"';
 	}

} else {

     	$button .= '<button id="' . $idbutton . '" type="' . tep_output_string($params['type']) . '"';

if ( isset($params['params']) ) {
 	$button .= ' ' . $params['params'];
}
}

$button .= '>' . $title;

if ( ($params['type'] == 'button') && isset($link) ) {
 	$button .= '</a>';
} else {
 	$button .= '</button>';
}
$button .= '</span><script type="text/javascript">$("#' . $idbutton . '").button(';

$args = array();

if ( isset($icon) ) {
 	if ( !isset($params['iconpos']) ) {
   	$params['iconpos'] = 'left';
 	}

 	if ( $params['iconpos'] == 'left' ) {
   	$args[] = 'icons:{primary:"ui-icon-' . $icon . '"}';
 	} else {
   	$args[] = 'icons:{secondary:"ui-icon-' . $icon . '"}';
 	}
}


if (empty($title)) {
 	$args[] = 'text:false';
}



if (!empty($args)) {
 	$button .= '{' . implode(',', $args) . '}';
}

$button .= ').addClass("ui-priority-' . $priority . '").parent().removeClass("tdbLink");</script>';

$button_counter++;

return $button;
 }

 

example :

file : catalog/includes/header.php

 

<div id="headerShortcuts">
<?php
 echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART),null, null, 'btn_shopping_cart') .
  	tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), null, null, 'btn_checkout') .
  	tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'), null, null,'btn_my_account');

 if (tep_session_is_registered('customer_id')) {
echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'), null, null, 'btn_logoff');
 }
?>
 </div>

 

and add in your stylesheet.css :

 

#btn_shopping_cart{
background : blue;
color: white;
}
#btn_checkout{
background: red;
color: white;
}
#btn_my_account{
background :green;
color: white;
}
#btn_logoff{
background :black;

 

result :

 

[NodsDorf]

That is some good info foxp2. +1 for you.

 

I played with them buttons for hours trying to get them to play nice. :)

[veszka]

I'm sorry for the late answer and tnak you for your answers. It seems be I didn't explain my problem too good.

I want to do the following (simplify): if A condition is true I want to draw a button with red color and "A" label. If A condition is not true I want to draw a button with green color and "B" label and so on.

I can did to change the icon and label, but I can't do to change the color.

 

Thank you! Tamas

[multimixer]

What condition, can you be concrete?

[veszka]

Here is my code from product_info.php:

 

<?php if ($product_info['products_quantity'] > 0 ) 
	{
		if ($product_in_basket['customers_basket_quantity'] >= $product_info['products_quantity']  )  {		
						echo tep_draw_button(IMAGE_BUTTON_RESERVED, 'gear');
					}
				else 
					{
						echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'primary');
					}
	}
	else 
	{		
	echo tep_draw_button(IMAGE_BUTTON_SOLD, 'locked');
	}
?>

[veszka]

Dear foxp2,

 

I read again your post, and this is what I want :) thank you!

I have only a little problem with this solution. If I use this solution more than once, the second time the button become "wrong" . Please see the attached picture. buttons

What should be the problem?

 

Here are my codes:

products_new.php

echo tep_draw_button(IMAGE_BUTTON_RESERVED, 'gear' , null, null, null, 'btn_reserved'); 

 

stylesheet.css

 

#btn_reserved{
background : grey;
color: white;
}

 

thank you!