CSS buttons v2.x

[chadderuski]

Hi Paul!

Remember way back when I was working on getting 3-state CSS rollover buttons to work (sliding door method)?
Well, I seem to have them working now.

Pardon the current "mess" of this site. Still working on the graphical layout, and other pages still need refining, but you may find the buttons interesting!

http://ubuysupply.com/zentest/

Some minor modifications to core code were needed, but seems to be working correctly. I used Steed's button generator to make the buttons then "merged" them for the 3-state effect.

-chadderuski

[Sawhorse]

Great looking buttons.

I understand that you used http://www.zen-cart.com/index.php?ma...roducts_id=743 to generate your buttons. But, it would be nice to let us know how you

"merged" them for the 3-state effect.

and what

minor modifications to core code

were necessary to get this great effect.

Sawhorse

[chadderuski]

Hi Sawhorse,

This is my first test using this method, and shows what the button looks like unwindowed.

http://chicagophoto.net/btest/

The main core change was to /includes/functions/html_output.php

/**
 * 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;
}

I may have made changes to zen_image_submit() also ... will have to look at clean code.

placement of the css buttons is not always "right" out of the box, so you may have to modify those pages to get the look you want. Mostly, I've found I've had to use some relative positioning to get them where I want them.

Note that I haven't necessarily honored zencarts css/picture button switches here... a lot of testing and experimentation went into this... but so far working.

I also used the sliding door method on the horizontal navigation. This did require adding a <span></span> in the menu generation code under /includes/classes/categories_ul_generator.php. Those tabs use two images for left/right sides of the button so you can +/- the page and not break them.

Of course, inspiration for this is from Paul's CSS Horizontal Dynamic Menu and this great tutorial:

http://www.alistapart.com/articles/slidingdoors/

I'm sure a more knowledgeable CSS pro could really clean this up. My drop menu's CSS is a bit garish, but works! You can link those direct and see what I did. I sort of hacked away at it until I got it to do what I wanted. But I'm certain there is a cleaner way more elegant way! And there aren't any IE hacks in here to fix IE's bugs (so far they are working though).

-Chadderuski

[Sawhorse]

Thank you for providing all this information. I think that some may be able to duplicate your work. And if you find that you did make

changes to zen_image_submit()

please let us know.

Since I am not a programmer I know full well the "hacked away" method of programing. That is my most used method. It takes lots of time but when you have a product functioning as you would like, it just make my day!!!

I an currently using CSS buttons and I also have "adjusted" size and location. My worry (and I bet others) is that if I start with additional modification, it may take me awhile. I need to think about that concern. The buttons I have now work very well (not as nice as yours) but are very functional.

Again, nice work.

Sawhorse

[chadderuski]

Hi Sawhorse,

The changes I made are mostly in the template files which you should be using and not editing the default. I thinks I had to adjust one of the side boxes, the header (ofcourse!) and also the product detail pages (which I have yet to complete). I have been using these as a "two state" button on the company site for a solid year, but now that I have a new project I decided to finish them and get them polished.

I forgot to mention how to merge the images. After you make each state, I stack these together in photoshop and then export them as a single image. Then you need to work up the css for each button. Because they are all different lenghts, you need an entry for each:

/* only include this once */
body {behavior:url(includes/csshover.htc);}

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

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

/* standard buttons */
.button_add_address {width:113px; background:url(../buttons/english/button_add_address.gif)}
.button_add_to_cart {width:123px; background:url(../buttons/english/button_add_to_cart.gif)}
.button_back {	width:61px; background:url(../buttons/english/button_back.gif)}

This method does require the csshover.htc class. And you have to specify the width of each button and the background image to use.

Glad you like them!

[Sawhorse]

Thanks for the added info.

Sawhorse

[torvista]

In /includes/extra_functions/css_buttons.php
line 13 has

  if(CSS_BUTTONS_FROM_ADMIN === true){ 

Where is this constant CSS_BUTTONS_FROM_ADMIN set?

thanks
Steve

[kernheimer]

I was wondering if anybody has used this on the new 1.3.9 jet?? i would love to input it, but am affraid to, since it say's 1.3.5

[australican]

Hi all, has anyone got the css sprite/sliding door method to work on all the buttons. I've managed it for the link buttons, but having great difficulty getting it to work with the form buttons.
I hacked away at css_buttons.php and made some progress, but it makes a mess of things.

I basically need to add a class to the button element.

You can see my mess here

http://countrytothecore.net

On the product info pages, you'll see where its working on the prev/next navigation area and the shopping cart button. The tell a friend will show the worse of my efforts and if you hover over the add to cart, you'll see how it falls apart.

I can see that some people have addressed the issue for main navigation menus, and if the answer is in there somewhere, as a newbie, I can't see it. As in, I just don't get it yet.
Any help would be much appreciated.
David

[australican]

Hi again, I've got this to work for the most part. (Although the buttons still need some alignment.)
In my css_buttons.php file, I made this change...

 // replaced <input />s by <button></button>s
    //$css_button = '<input' . $class . ' type="submit" value="' .$text . '"' . $parameters . ' />';
    $css_button = '<a class="button">' . '<button' . $class . ' type="submit" value="' .$text . '"' . $parameters . '>' . $text . '</button>' . '</a>';
  }

This works with some extra css but shows quite a few errors when trying validate, aside from the fact that it's not a very kosher way of doing things.

I'd appreciate it if anyone had any better ideas.

Also when mousing over the long image in my two image sliding door, the whole button changes to the correct slice of the sprite, but when mousing over the smaller portion, only the smaller portion changes. Any ideas?

Thanks,
David