CSS buttons v2.x

[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;
}

[Sawhorse]

This is a just in case you are having the same problem I was having and can't find the solution post.

I was trying to make a button smaller in width. I wanted it to be 65px and it was currently 80px wide.

I went into the /public_html/includes/template/YOUR TEMPLATE/css/stylesheet-css_buttons.css and tried to make the change. However, the change never stuck. I searched for hours trying to find out the solution. I could change the width in firebug but of course that is only temporary.

The solution is in /public_html/includes/functions/html_output.php at about Line #305 :

$min_width = 80; // this is the minimum button width, change the value as you like

All you need to do is change that minimum width from 80 to the width of your choice.

Sawhorse

[swamyg1]

Do you guys think that the sliding doors method might be bit outdated? We now have CSS3, I know all browsers don't quite support it but it's definitely growing in popularity. With CSS3 we can add gradients and drop shadows to buttons without any images.

Would like to get your thoughts on this!