CSS buttons v2.x

[athena]

I'm still struggling...but i used his style sheet as a pattern....via Firefox webtools....thankyou...but i earned the help....too many hours at this....

My big issue is I can't seem to get any of the individual buttons to obey my styles. Looking at firefox's stylesheet reference on my site, I don't see the individual buttons pulling anything other than the .cssButton and .cssButtonHover For instance:

.cssButton {
	color:#FFF;
	font-weight:bold;
	height:22px;
	line-height:22px;
	border:0px; 
	padding-bottom:4px; 
	margin:0px;
	background:no-repeat;
	}
.cssButtonHover{
	color:#FFF;
	font-weight:bold;
	height:22px;
	line-height:22px;
	border:0px; 
	padding-bottom:4px; 
	margin:0px;
	background:no-repeat;
	}

Then i give each button a width that matches the text and made up some button background images in standard widths of 80px, 100px, 120px and 160px but it does not pay attention to this:

.button_add_address {
width:120px; 
background-image:url("/Products/includes/templates/classic/images/120pxGreenBtn.gif")
}
.button_add_to_cart:hover {
width:120px; 
background-image:url("/Products/includes/templates/classic/images/120pxBluBtn.gif")
}

I'm toggling between two test style sheets...wow is it already 3 o'clock! ...FRIDAY!!!! so if you check the link My site you may see varied results.

[Sawhorse]

It looks like you have the On Order button working in FF. It does have a different length than all the others.

Sawhorse

[athena]

Well...i've come to the conclusion that after trying virtually every mod for rollover buttons ever invented for zencart, that rendering the original stylesheet_css_buttons.css for background images to serve as button images is the way to go. It requires the least intrusive methods, minimal editing of html_output.php to get the form buttons to roll, but you settle for the possible browser fonts, however clearer text on your buttons to be sure.

Zen mod: Dynamic Rollover Input Buttons is the winner in this regard. Very clean stylesheet and the background images he supplies are easily modified. It would have saved me a week if found 40 work hours ago. Very grateful.

Did not mean to hyjack this thread. This mod css buttons v2.x only flaw is having to run the sql script and still not being able, at least at my coding knowledge level, to make your chosen image buttons roll. I was able to get it to work with easy rolloevers mod, but then still had the issue with the form or input buttons not rolling.

so Dynamic Rollover Input Buttons it is. There are links in the mod packet to great examples of what can be done with it.

[Sawhorse]

I am glad that you found an effective CSS button process.

Sawhorse

[chadderuski]

Could either chadderuski or yourself share your process etc.?

Sawhorse.

Hey Sawhorse!

Sorry I missed out on these latest posts. My solution to CSS rollover buttons does use background images or "sprites" as they are also called. When you roll over a button, the css controls the location of the background in the "window". This method is very common these days as you do not have any blinking going on as you do when you swap images.

You build each button and the state you need. Look here for simple example of 3-state button (normal, hover, and click):

http://chicagophoto.net/btest/

On Royal Industries I'm just using a two-state button. Your style sheet is the workhorse, here is a partial sample:

 
/* General Button Styling Definitions */
.cssButton {
	height:27px;
	border:0px; 
	padding:0px; 
	margin:0px;
	text-indent:-500em;
	background-position: 0 0;
	display:block; 
	overflow:hidden; /* needed for IE */
	}

/* Primary Class :hover and :active states */
.cssButton:hover {
	background-position:0px -27px;
	}

/* .cssButton:active { background-position:0 -54px} */
.button_add_address {width:120px; background:url(../buttons/english/button_add_address.gif) }
.button_add_to_cart {width:120px; background:url(../buttons/english/button_add_to_cart.gif) }
.button_back {width:68px; background:url(../buttons/english/button_back.gif) }

Notice: text-indent:-500em;
I do this to slide zencarts CSS button texts off the button.

There are some core edits that have to be done, and I'd have to dig to find them as it's been ages since I looked at the code. BTW, Royal in now on 1.3.9h.
All form buttons work also (with the core edits!). Note that there are some forms that seems to be done differently than others. Some inconsistencies that
I found (but don't remember!). My solution also allows you to send over-rides within the code for fine tuning placement of the buttons.

Does that make sense? Royal is fully "zoomable"... it doesn't break when you blow it up to fit a larger screen - tested on 30" apple cinema display!

I thought I had posted the core edits in this thread, but perhaps not... Let me know if you'd like to give this a try. Perhaps some day I'll make a contrib out of this.. ;p

[chadderuski]

Concerning above post:

To use my concept you need these two edits to your /includes/functions/html_output.php

On or around line 267 is the function zen_image_submit();

edit the if statement to this:

    if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<30) return zenCssButton($image, $alt, 'submit', $sec_class, $parameters );

Then just a bit lower comment out the original function zenCssButton() and put this code in:

/**
 * generate CSS buttons in the current language
 * revised code and concepts by Chadderuski and Sir John Steed
 * Allows full control of all link and form buttons through CSS stylesheet.
 * This revised function replaces the standard zenCssButton() above.
**/
function zenCssButton($image = '', $text, $type, $sec_class = '', $parameters = '') {
   if (strrpos($image, '.') !== false) $sec_class = substr($image, 0, strrpos($image, '.'));
   if (!empty($parameters)) $parameters = ' ' . $parameters;

   // form input button
   if ($type == 'submit'){
     // $css_button = '<input class="cssButton ' . $sec_class . '" ' . ' type="submit" value="' . '"' . $parameters . ' />';
     // $css_button = '<input class="cssButton ' . $sec_class . '" ' . ' type="submit" value="' .$text . '"' . $parameters . ' />';
     $css_button = '<button class="cssButton ' . $sec_class . '" ' . ' type="submit" ' . $parameters . ' >' .$text . '</button>';
   }
   // link button
   if ($type=='button'){
      $css_button = '<div class="cssButton ' . $sec_class . '"' . $parameters . '>'. $text . '</div>';
   }
   return $css_button;
}

Notice the two commented out line under 'submit' ... you can experiment with this if you like. But code as is works well. There ARE some pages that seemed to need
tweaking for button placement.

As always, experiment on a backup/test site! If you want to try this with the three states buttons, PM me and I'll get you the buttons and CSS.

-cj

[Sawhorse]

Thank You for Sharing your Information. I am sure all CSS users will find it very useful.

Sawhorse

[athena]

cj...thank you for that.

I'm curious about your styling of individual buttons. the only one I have an issue with is the View button on the "Your Account" page.

I am not using your method as I prefer having only three background images to deal with. I'm using the default text and still going with Dynamic CSS Input Buttons mod.

Wondering if styling individual buttons is where your core edits come in. I tried just adding to the style sheet:

.BUTTON_IMAGE_VIEW_SMALL {
	width:auto;
	}

any insight appreciated. Hate modifying core code.

[athena]

Since this View button seemed like the only button with width issues, I used the template override system by changing the width to 80px and padding (8px) of the table column to match the width of the submit buttons in the mod of 80px in:

includes > templates > mytemplate > templates > template_account_default.php

<table width="100%" border="0" cellpadding="8px" cellspacing="0" id="prevOrders">
<caption><h2><?php echo OVERVIEW_PREVIOUS_ORDERS; ?></h2></caption>
    <tr class="tableHeading">
    <th scope="col"><?php echo TABLE_HEADING_DATE; ?></th>
    <th scope="col"><?php echo TABLE_HEADING_ORDER_NUMBER; ?></th>
    <th scope="col"><?php echo TABLE_HEADING_SHIPPED_TO; ?></th>
    <th scope="col"><?php echo TABLE_HEADING_STATUS; ?></th>
    <th scope="col"><?php echo TABLE_HEADING_TOTAL; ?></th>
    <th scope="col" width="80px"><?php echo TABLE_HEADING_VIEW; ?></th>
  </tr>

[athena]

I also solved the button disappearing from a tip on an older thread about the issue, removing the style for input:focus:

IN STYLESHEET.CSS CHANGE:

input:focus, select:focus, textarea:focus {
background: #F0F8FF;
}

TO:

select:focus, textarea:focus {
background: #F0F8FF;
}