CSS3 Buttons [support thread]

[lat9]

... 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. 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!

[DivaVocals]

I think you've got it. 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..

[rbarbour]

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.

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..

[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.

[DivaVocals]

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!!!!

[lat9]

Thanks, Diva, very punny!

[DivaVocals]

Thanks, Diva, very punny!

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

[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.

[Design75]

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.

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

[rbarbour]

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