Page 1 of 2 12 LastLast
Results 1 to 10 of 149

Hybrid View

  1. #1
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,401
    Plugin Contributions
    87

    Default CSS3 Buttons [support thread]

    This add-on has just been submitted to the "Free Software Add-ons"; it replaces Zen-Cart's default CSS button functionality with some CSS3 styling, based on the initial output provided by http://www.cssbuttongenerator.com/. The buttons produced have rounded corners in the more recent browsers and "fall back" to squared corners on non-CSS3 aware browsers.

  2. #2
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,401
    Plugin Contributions
    87

    Default Re: CSS3 Buttons [support thread]

    I just realized that the installation instructions missed the "enabling" step! You'll need to make sure that your admin's

    Configuration->Layout Settings->CSS Buttons

    is set to "Yes". I'll update the readme once the initial release "hits".

  3. #3
    Join Date
    Mar 2011
    Location
    Ireland
    Posts
    286
    Plugin Contributions
    0

    Default Re: CSS3 Buttons [support thread]

    Hi installed this but it doesn't render itself in IE which is a pity as it works really well. Although wasn't sure exactly what to replace in the
    css when it came to the submit_button div

  4. #4
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,401
    Plugin Contributions
    87

    Default Re: CSS3 Buttons [support thread]

    jagall, what version of IE? I'll grant that the submit_button hover color is "challenged" in IE and will see what I can do to improve.

  5. #5
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,401
    Plugin Contributions
    87

    Default Re: CSS3 Buttons [support thread]

    I've submitted v1.0.1 to the Plugins; I believe that I've corrected the hover issue on IE.

  6. #6
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,401
    Plugin Contributions
    87

    Default Re: CSS3 Buttons [support thread]

    Here's the updated zenCssButton function:

    Code:
    /**
     * generate CSS buttons in the current language
     * concept from contributions by Seb Rouleau and paulm, subsequently adapted to Zen Cart
     * note: any hard-coded buttons will not be able to use this function
    **/
      function zenCssButton($image = '', $text, $type, $sec_class = '', $parameters = '') {
       global $css_button_text, $css_button_opts, $template, $current_page_base, $language;
       
       $button_name = basename($image, '.gif');
       
        // automatic width setting depending on the number of characters
    //    $min_width = 80; // this is the minimum button width, change the value as you like
    //    $character_width = 6.5; // change this value depending on font size!
        // end settings
        // added html_entity_decode function to prevent html special chars to be counted as multiple characters (like &)
    //    $width = strlen(html_entity_decode($text)) * $character_width;
    //    $width = (int)$width;
    //    if ($width < $min_width) $width = $min_width;
    //    $style = ' style="width: ' . $width . 'px;"';
        // if no secondary class is set use the image name for the sec_class
        if (empty($sec_class)) $sec_class = $button_name;
        if(!empty($sec_class)) $sec_class = ' ' . $sec_class;
        if(!empty($parameters))$parameters = ' ' . $parameters;
        $mouse_out_class  = 'cssButton ' . $sec_class . (($type == 'submit') ? ' submit_button button' : '');
        $mouse_over_class = 'cssButtonHover ' . $sec_class . $sec_class . 'Hover';
        // javascript to set different classes on mouseover and mouseout: enables hover effect on the buttons
        // (pure css hovers on non link elements do work work in every browser)
        $css_button_js .=  'onmouseover="this.className=\''. $mouse_over_class . '\'" onmouseout="this.className=\'' . $mouse_out_class . '\'"';
        
        if (CSS_BUTTON_POPUPS_IS_ARRAY == 'true') {
          $popuptext = (!empty($css_button_text[$button_name])) ? $css_button_text[$button_name] : ($button_name . CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT);
          $tooltip = ' title="' . $popuptext . '"';
        } else {
          $tooltip = '';
        }
    
        if ($type == 'submit'){
    // form input button
          $css_button = '<input class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" value="' .$text . '"' . $tooltip . $parameters . ' />';
        }
    
        if ($type=='button'){
    // link button
          $css_button .= '<span class="normal_button button"><span class="' . $mouse_out_class . '" ' . $css_button_js . $tooltip . ' >&nbsp;' . $text . '&nbsp;</span></span>'; 
        }
        return $css_button;
      }
    and the updated stylesheet_css_buttons.css

    Code:
    /* This imageless css button is based on the button that was generated by CSSButtonGenerator.com */
    .buttonRow a {
      text-decoration: none;
    }
    .button, input.button, input.cssButtonHover {
      -moz-box-shadow:inset 0px 1px 0px 0px #dbd8c0;
      -webkit-box-shadow:inset 0px 1px 0px 0px #dbd8c0;
      box-shadow:inset 0px 1px 0px 0px #dbd8c0;
      -moz-border-radius:6px;
      -webkit-border-radius:6px;
      border-radius:6px;
      display:inline-block;
      font-family:Verdana;
      font-size:13px;
      font-weight:bold;
      margin: 0;
      padding:3px 8px;
      text-decoration:none;
    }
    input.submit_button {
      background-color:#fee8b9;  /* Submit button background color */
      border: 1px solid #638263;  /* Submit button border color */
      font-size: 13px;
      font-weight: bold;
      display: inline-block;
      margin: 0;
      padding: 3px 8px;
      color: #404040;  /* Text color for submit buttons */
    }
    input.submit_button:hover, input.cssButtonHover {
      background-color:#ffdc9c;  /* Hover color for the submit buttons */
      border: 1px solid #638263;  /* Submit button border color */
      cursor: pointer;
    }
    span.normal_button {
      background-color:#ced79c;  /* Link button background color */
      border:1px solid #638263;  /* Link button border color */
      color:#404040;  /* Text color for link-related buttons */
    }
    span.normal_button:hover {
      background-color:#b4bc8b;  /* Hover color for link-related buttons */
    }
    span.normal_button:active, span.submit_button:active, span.submit_button:active input {
      position:relative;
      top:1px;
    }
    These changes correct the IE submit button hover problem.

  7. #7
    Join Date
    Mar 2014
    Location
    USA
    Posts
    10
    Plugin Contributions
    0

    Default Re: CSS3 Buttons [support thread]

    I am not sure if this is possible: I want my website store to look simple like http://thetruelightministry.org/dEMO/store.html . So far I have designed the store ( www.thetruelightministry.org/store ) with some tough coding but now I am not able to:

    1. change top nav fonts
    2. remove the sidebox space
    3. make my footer bar background to be like the demo website.
    4. make products inside the category to be same like the category grid (3 items per column)

    I would really appreciate if anyone would provide some hints, links, or suggestion.

    Thank you so so much in advance!!!

  8. #8
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,401
    Plugin Contributions
    87

    Default Re: CSS3 Buttons [support thread]

    Quote Originally Posted by refinerztouch View Post
    I am not sure if this is possible: I want my website store to look simple like http://thetruelightministry.org/dEMO/store.html . So far I have designed the store ( www.thetruelightministry.org/store ) with some tough coding but now I am not able to:

    1. change top nav fonts
    2. remove the sidebox space
    3. make my footer bar background to be like the demo website.
    4. make products inside the category to be same like the category grid (3 items per column)

    I would really appreciate if anyone would provide some hints, links, or suggestion.

    Thank you so so much in advance!!!
    You might get better luck posting this in the general "Templates, Stylesheets, Page Layouts" area; your questions have nothing to do with the CSS3 Buttons plugin.

  9. #9
    Join Date
    Feb 2010
    Location
    Syracuse, NY
    Posts
    2,159
    Plugin Contributions
    17

    Default Re: CSS3 Buttons [support thread]

    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
    Website - Github. Like the ZCA Bootstrap 4 Template? Donations Welcome. Bootstrap Plugins?

  10. #10
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,401
    Plugin Contributions
    87

    Default Re: CSS3 Buttons [support thread]

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

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. Hebrew Support - latest release [Support Thread]
    By eranariel in forum Addon Language Packs
    Replies: 19
    Last Post: 23 Jan 2023, 08:04 AM
  2. SysCheck [support thread]
    By swguy in forum All Other Contributions/Addons
    Replies: 36
    Last Post: 24 Oct 2020, 05:28 AM
  3. v150 CSS Buttons for Admin [Support Thread]
    By lat9 in forum All Other Contributions/Addons
    Replies: 19
    Last Post: 24 Dec 2015, 09:13 PM
  4. goMobile Support Thread
    By steveyork136 in forum Addon Templates
    Replies: 29
    Last Post: 26 Aug 2015, 11:56 AM
  5. Wordpress On ZC [Support Thread]
    By hira in forum All Other Contributions/Addons
    Replies: 1858
    Last Post: 17 Jan 2014, 01:24 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR