CSS3 Buttons [support thread]

lat9:

Well :censored:, I fixed that a couple of months ago and never uploaded the changes. Let me get v1.0.3 packaged and uploaded and then I'll post the change to get this working.
Following is the change to the zenCssButton function in /includes/functions/html_output.php to provide the emulation required to allow the Wish List button to operate properly:

    if ($type == 'submit'){
// form input button
//-bof-v1.0.3a
      if ($parameters != '') {
        // If the input parameters include a "name" attribute, need to emulate an <input type="image" /> return value
        // by adding a _x to the name parameter (thanks to paulm for providing the fix for Zen Cart v1.3.6!).  
        if (preg_match('/name="([a-zA-Z0-9\-_]+)"/', $parameters, $matches)) {
          $parameters = str_replace('name="' . $matches[1], 'name="' . $matches[1] . '_x', $parameters);
        }
        // If the input parameters include a "value" attribute, remove it since that attribute will be set to the input
        // text string.
        if (preg_match('/(value="[a-zA-Z0=9\-_]+")/', $parameters, $matches)) {
          $parameters = str_replace($matches[1], '', $parameters);
        }
      }
//-eof-v1.0.3a
      $css_button = '<input class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" value="' .$text . '"' . $tooltip . $parameters . ' />';
    }

Great job

Its working!:D

Thanks for reporting the issue!

v1.0.4 is now available in the plugins. Besides correcting the issue reported by remops, this version includes DrByte's "memory exhausted" fix (http://www.zen-cart.com/showthread.php?207435-php-5-4-fatal-error-Allowed-memory-size-of-83886080-bytes-exhausted&p=1240551#post1240551) for the zen_href_link function.

i increase the height of slider in the home page, now it is covering some part of content area... how i move the container lower from the slider? pls help

easyphil:

i increase the height of slider in the home page, now it is covering some part of content area... how i move the container lower from the slider? pls help
Why do you believe that this is a CSS3 buttons' issue? I think you'd get more help by either posting your question (with a link to the page in question) to either the slider's support thread or the templates that's included the slider's support thread.

Soooooooooooooooooooooo... been a minute since I stirred up some trouble round here.. Gotta question which lat9 is gonna LOOOOOOVE!!! :smile:

How can one use awesome fonts with the CSS buttons.. I would like to prepend the shopping cart character to the "Add to Cart" button for example.

Now before anyone tells me to simply add the Awesome Font HTML to the language file.. Been there.. done that.. got a t-shirt.. WHat I end up with is the alt definition being so long that it exceeds 40 characters and the image button displays instead of the CSS button.

I've edited the pages (product info shopping cart, etc) that I want to add the font glyphs to directly, but then I gotta add a MESS of CSS to align the font with the button I want.. and that's an OKAY solution, but it still doesn't really prepend the button text with the font which is what I REALLY.

Can I buy a vowel.. just kidding.. anyone got a HINT on how to do this.. or heck I'll admit I might need more than a hint here...

HELP!!!

Okay.. so this is as far as I got (note the bits in red):

<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
            <?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
            if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
              // hide the quantity box and default to 1
              $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . '<i class="fa fa-shopping-cart"></i>' . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            } else {
              // show the quantity box
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . '<i class="fa fa-shopping-cart"></i>' . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>
    <div id="cartAdd">
    <?php
      echo $display_qty;
      echo '<i class="fa fa-shopping-cart"></i>';
      echo $display_button;
            ?>
          </div>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

This got this result:
http://tlwtestsite(dot)tablelegworld(dot)com/Bargain-Deals/cross-bar-for-61-width-501-17-for-Palantir-only

It puts the glyph next to the button, but not IN the button..

DivaVocals, you're always pushing the envelope! It's a *difficult *problem, since the font-awesome definitions are enclosed in <i></i> tags which won't fly for the button names (they're specified in the **value **attribute for a submit button).

You've got me thinking ...

lat9:

DivaVocals, you're always pushing the envelope! It's a *difficult *problem, since the font-awesome definitions are enclosed in <i></i> tags which won't fly for the button names (they're specified in the **value **attribute for a submit button).

You've got me thinking ...Yep.. see that line?? I may not cross it, but I don't mind walking on it.. hahahahahaha.. but don't cha love that I am MAKING you think???? hahahahahahaha...

I wonder if this is possible using psuedo elements.. I know that requires wrapping every input element in a span or div and apply the CSS on these. Dunno if that would work which kinda doesn't matter since I can't see HOW to do it.. Sigh...

Of course if I understood how to use the unicode for each glyph, then that might allow me to put the glyphs inside the language file without triggering the 40 char limit..

DivaVocals:

... Of course if I understood how to use the unicode for each glyph, then that might allow me to put the glyphs inside the language file without triggering the 40 char limit..
I think you've got it:P. Adding the glyph's HTML symbol (defined here: http://fortawesome.github.io/Font-Awesome/cheatsheet/) to the button's alt-text will do the trick!

lat9:

I think you've got it:P. Adding the glyph's HTML symbol (defined here: http://fortawesome.github.io/Font-Awesome/cheatsheet/) to the button's alt-text will do the trick!

Yes.. but alas this doesn't work.. as I look into why, I see that the font has to be available locally.. Grrrrr... I'll keep plugging at this..

I've done this, it's definitely hacked code that strips and severely minimizes this awesome plugins code therefore don't wanna post here. If yourself or lat9 wanna link to see demo and if its what your looking for i'll pass the code for you to play with. PM me for a link.

DivaVocals:

Yes.. but alas this doesn't work.. as I look into why, I see that the font has to be available locally.. Grrrrr... I'll keep plugging at this..

I've submitted v1.1.0 to the Plugins; it will be available for download once approved. With that version, you can define (on a button-by-button basis) a Font Awesome glyph that will be prepended to the button's name!

Although I forgot to include the recognition in the v1.1.0 readme (that'll be fixed in later releases), the implementation is based on prototype code provided by rbarbour.

lat9:

I've submitted v1.1.0 to the Plugins; it will be available for download once approved. With that version, you can define (on a button-by-button basis) a Font Awesome glyph that will be prepended to the button's name!

Although I forgot to include the recognition in the v1.1.0 readme (that'll be fixed in later releases), the implementation is based on prototype code provided by rbarbour.

You are FREAKIN' AWESOME!!!! :clap:

Thanks, Diva, very punny!:blush:

lat9:

Thanks, Diva, very punny!:blush:

No seriously lady.. I asked this NEVER imagining it would end up in the base code!! It's a FANTASTIC addition!!!! You totally rock!!!

I searched through this thread and others but can't seem to find an answer to my question (maybe I'm overlooking something?) so I'd very much appreciate some help. I'm running Zen Cart v1.5.4 and the latest version of CSS3 Buttons. I've got a custom designed template that I coded myself. My shop is at http://shop.d9s.co/
On just about every page where there is a CSS3 button there is a lack of space around the buttons. Look at the search button on the top of the header of all pages and the buttons at the bottom of any info page such as this one.

How do I add space around the buttons so that they aren't right at the edge of all the template's boxes? I've tried editing the margins in the button's css file but that didn't seem to work. The layout boxes have padding values but the buttons don't seem to pay any attention to those settings so they get stuck at the edges. What am I doing wrong?

Also, not all of the buttons have the same a:hover effect and I'm not quite sure why. Check out this page and see that the search, add to cart, and add to wishlist buttons react differently to mouseover than the Write Review button or the Buy Now button in the Featured sidebox. I have no idea why that's happening because the write review button is a default Zen Cart button so it should be the same as the rest, right?

Thanks for any help. I've been working on this all week and still have much more work to do before it's ready. :smile:

Dream9Studios:

I searched through this thread and others but can't seem to find an answer to my question (maybe I'm overlooking something?) so I'd very much appreciate some help. I'm running Zen Cart v1.5.4 and the latest version of CSS3 Buttons. I've got a custom designed template that I coded myself. My shop is at http://shop.d9s.co/
On just about every page where there is a CSS3 button there is a lack of space around the buttons. Look at the search button on the top of the header of all pages and the buttons at the bottom of any info page such as this one.

How do I add space around the buttons so that they aren't right at the edge of all the template's boxes? I've tried editing the margins in the button's css file but that didn't seem to work. The layout boxes have padding values but the buttons don't seem to pay any attention to those settings so they get stuck at the edges. What am I doing wrong?

Also, not all of the buttons have the same a:hover effect and I'm not quite sure why. Check out this page and see that the search, add to cart, and add to wishlist buttons react differently to mouseover than the Write Review button or the Buy Now button in the Featured sidebox. I have no idea why that's happening because the write review button is a default Zen Cart button so it should be the same as the rest, right?

Thanks for any help. I've been working on this all week and still have much more work to do before it's ready. :smile:

for the search button you can add the to the stylesheet:

.button_search: margin-right 15px;

that seemed to work when i tried it with firebug. The 15px value can of course be set to the desired value

Not a big deal but in the readme.html file it says:

To include Font Awesome glyphs in your buttons, edit the file /includes/extra_definitions/css_button_glyphs.php

I think it should be:

/includes/extra_datafiles/css_button_glyphs.php