CSS3 Buttons [support thread]

[lat9]

Thanks for the report; I'll update the readme and stage it for any future release!

[adb34]

I am using this with v1.5.4 brilliant. If you are using Chrome you will find "cssbuttongenerator" in the app store

[DivaVocals]

OOOOOOOOOHHHHH Cindy.. I'm baaaaaack.. Yep adding more complexity to your life.. again..

Trying to figure out how to add a tooltip on hover to my buttons.. For now will use the button text defines for the tooltip just to get things going.. I will probably eventually add a complete set of separate defines just for tooltips.

I found this: http://codepen.io/cbracco/pen/qzukg

I'm thinking I need to modify the includes/functions/html_output.php

But not sure HOW to modify it to add the tooltip.

[lat9]

OOOOOOOOOHHHHH Cindy.. I'm baaaaaack.. Yep adding more complexity to your life.. again..

Trying to figure out how to add a tooltip on hover to my buttons.. For now will use the button text defines for the tooltip just to get things going.. I will probably eventually add a complete set of separate defines just for tooltips.

I found this: http://codepen.io/cbracco/pen/qzukg

I'm thinking I need to modify the includes/functions/html_output.php

But not sure HOW to modify it to add the tooltip.

Tee-hee, no complexity added! The tooltip functionality (although undocumented) is built-in.

In a language/extra_definition file, just set up a construct similar to:

define ('CSS_BUTTON_POPUPS_IS_ARRAY', 'true');
define ('CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT', ': No title defined; see ' . __FILE__);
$css_button_text = array ( 'button_add_to_cart.gif' => 'Click here to add the product to the cart',
                                   );

... and expand the array to suit. The downside is that you need to define the title text for all the buttons as any undefined button will have a title that reads something akin to:

button_back.gif: No title defined, see <whatever the extra_definition's file name is>

[DivaVocals]

Tee-hee, no complexity added! The tooltip functionality (although undocumented) is built-in.

In a language/extra_definition file, just set up a construct similar to:

define ('CSS_BUTTON_POPUPS_IS_ARRAY', 'true');
define ('CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT', ': No title defined; see ' . __FILE__);
$css_button_text = array ( 'button_add_to_cart.gif' => 'Click here to add the product to the cart',
                                   );

... and expand the array to suit. The downside is that you need to define the title text for all the buttons as any undefined button will have a title that reads something akin to:

button_back.gif: No title defined, see <whatever the extra_definition's file name is>

Got it.. Seriously this is ALL I needed!!?? Wow this is a lot easier than what I thought!!! Thanks.. and yeah no worries about having to do this for ALL buttons.. I was planning on probably doing this for all the buttons anyway.. I shortened the buttons names in the language file (which as you know act as the title/alt for image buttons) because some were far too long and made my CSS buttons EXTRA wide.. Then I was looking at another site and saw they used tooltips with their CSS buttons.. So I thought that I could "re-purpose" the original alt titles and use them as tooltips on the CSS buttons from this module as they were more verbose and therefore more "instructive"..

Anyway.. thanks for this.. As always.. ROCK STAR!!!!

[lat9]

You can also do "interesting" things like:

define ('CSS_BUTTON_POPUPS_IS_ARRAY', 'true');
define ('CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT', ': No title defined; see ' . __FILE__);
$css_button_text = array ();
switch ($current_page_base) {
  case FILENAME_ACCOUNT_EDIT:
  case FILENAME_ACCOUNT_HISTORY:
  case FILENAME_ACCOUNT_NEWSLETTERS:
  case FILENAME_ACCOUNT_NOTIFICATIONS:
  case FILENAME_ACCOUNT_PASSWORD:
    $css_button_text['button_back'] = 'Return to <em>Manage Your Account</em>';
    break;
  default:
    if (strpos ($current_page_base, FILENAME_ADDRESS_BOOK_PROCESS) !== false) $css_button_text['button_back'] = 'Return to your <em>Address Book</em>';
    else $css_button_text['button_back'] = 'Return to the previous page';
    break;
}

That is, you can customize the buttons' title text based on the page context.

[DivaVocals]

You can also do "interesting" things like:

define ('CSS_BUTTON_POPUPS_IS_ARRAY', 'true');
define ('CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT', ': No title defined; see ' . __FILE__);
$css_button_text = array ();
switch ($current_page_base) {
  case FILENAME_ACCOUNT_EDIT:
  case FILENAME_ACCOUNT_HISTORY:
  case FILENAME_ACCOUNT_NEWSLETTERS:
  case FILENAME_ACCOUNT_NOTIFICATIONS:
  case FILENAME_ACCOUNT_PASSWORD:
    $css_button_text['button_back'] = 'Return to <em>Manage Your Account</em>';
    break;
  default:
    if (strpos ($current_page_base, FILENAME_ADDRESS_BOOK_PROCESS) !== false) $css_button_text['button_back'] = 'Return to your <em>Address Book</em>';
    else $css_button_text['button_back'] = 'Return to the previous page';
    break;
}

That is, you can customize the buttons' title text based on the page context.

Nice.. I'm sure I'll break some ish doing this.. One question.. this example covers the back button.. Can I do the this without blowing something up??

define ('CSS_BUTTON_POPUPS_IS_ARRAY', 'true');
define ('CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT', ': No title defined; see ' . __FILE__);
$css_button_text = array ();
switch ($current_page_base) {
  case FILENAME_ACCOUNT_EDIT:
  case FILENAME_ACCOUNT_HISTORY:
  case FILENAME_ACCOUNT_NEWSLETTERS:
  case FILENAME_ACCOUNT_NOTIFICATIONS:
  case FILENAME_ACCOUNT_PASSWORD:
    $css_button_text['button_back'] = 'Return to <em>Manage Your Account</em>';
    break;
  default:
    if (strpos ($current_page_base, FILENAME_ADDRESS_BOOK_PROCESS) !== false) $css_button_text['button_back'] = 'Return to your <em>Address Book</em>';
    else $css_button_text['button_back'] = 'Return to the previous page';
    break;
switch ($current_page_base) {
  case FILENAME_ACCOUNT_EDIT:
  case FILENAME_ACCOUNT_HISTORY:
  case FILENAME_ACCOUNT_NEWSLETTERS:
  case FILENAME_ACCOUNT_NOTIFICATIONS:
  case FILENAME_ACCOUNT_PASSWORD:
    $css_button_text['button_forward'] = 'Return to <em>Manage Your Account</em>';
    break;
  default:
    if (strpos ($current_page_base, FILENAME_ADDRESS_BOOK_PROCESS) !== false) $css_button_text['button_forward'] = 'Return to your <em>Address Book</em>';
    else $css_button_text['button_forward'] = 'Return to the previous page';
    break;
}

[lat9]

I've had sites where I've organized this file by alphabetical button-name (as indicated in your example, above) and other sites where it made more sense to organize the file by page, as below. It all depends on which way you (or whoever is going to maintain the list) find it easier to locate/verify that all the title-text values are supplied.

define ('CSS_BUTTON_POPUPS_IS_ARRAY', 'true');
define ('CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT', ': No title defined; see ' . __FILE__);
$css_button_text = array ();
switch ($current_page_base) {
  case FILENAME_ACCOUNT_EDIT:
  case FILENAME_ACCOUNT_HISTORY:
  case FILENAME_ACCOUNT_NEWSLETTERS:
  case FILENAME_ACCOUNT_NOTIFICATIONS:
  case FILENAME_ACCOUNT_PASSWORD:
    $css_button_text['button_back'] = 'Return to <em>Manage Your Account</em>';
    $css_button_text['button_forward'] = 'Go somewhere else';
    break;
  case FILENAME_ADDRESS_BOOK_PROCESS:
    $css_button_text['button_back'] = 'Return to your <em>Address Book</em>';
    break;
  default:
    $css_button_text['button_back'] = 'Return to the previous page';
    $css_button_text['button_forward'] = 'Go to the next page';
    break;
}

[DivaVocals]

I've had sites where I've organized this file by alphabetical button-name (as indicated in your example, above) and other sites where it made more sense to organize the file by page, as below. It all depends on which way you (or whoever is going to maintain the list) find it easier to locate/verify that all the title-text values are supplied.

define ('CSS_BUTTON_POPUPS_IS_ARRAY', 'true');
define ('CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT', ': No title defined; see ' . __FILE__);
$css_button_text = array ();
switch ($current_page_base) {
  case FILENAME_ACCOUNT_EDIT:
  case FILENAME_ACCOUNT_HISTORY:
  case FILENAME_ACCOUNT_NEWSLETTERS:
  case FILENAME_ACCOUNT_NOTIFICATIONS:
  case FILENAME_ACCOUNT_PASSWORD:
    $css_button_text['button_back'] = 'Return to <em>Manage Your Account</em>';
    $css_button_text['button_forward'] = 'Go somewhere else';
    break;
  case FILENAME_ADDRESS_BOOK_PROCESS:
    $css_button_text['button_back'] = 'Return to your <em>Address Book</em>';
    break;
  default:
    $css_button_text['button_back'] = 'Return to the previous page';
    $css_button_text['button_forward'] = 'Go to the next page';
    break;
}

Okay.. I'm gonna play..

SLIGHT off topic (but kinda related) question:
Is there similar code for the admin CSS buttons???

[lat9]

Okay.. I'm gonna play..

SLIGHT off topic (but kinda related) question:
Is there similar code for the admin CSS buttons???

Kinda-sorta-not-exactly-related answer: Nope