Page 1 of 10 123 ... LastLast
Results 1 to 10 of 97
  1. #1
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    3,500
    Plugin Contributions
    33

    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
    3,500
    Plugin Contributions
    33

    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
    258
    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
    3,500
    Plugin Contributions
    33

    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
    3,500
    Plugin Contributions
    33

    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
    3,500
    Plugin Contributions
    33

    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 2011
    Location
    Ireland
    Posts
    258
    Plugin Contributions
    0

    Default Re: CSS3 Buttons [support thread]

    wow thank you, I haven't had chance to try this out yet but let you know the results. thanks again

  8. #8
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    3,500
    Plugin Contributions
    33

    Default Re: CSS3 Buttons [support thread]

    The v1.0.1 update has hit the Plugins area, incorporating the changes in post #6 and updating the readme to indicate that you need to enable the CSS buttons function via your admin.

  9. #9
    Join Date
    Jan 2007
    Location
    Los Angeles, California, United States
    Posts
    8,927
    Plugin Contributions
    31

    Default Re: CSS3 Buttons [support thread]

    This is AWESOME and works PERFECTLY.. Does anyone have any advice on how to get CSS3 gradients to work with buttons.. the issue I have is that in IE the background color doesn't stay within the confines of the button..

    Code:
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffd3f7), color-stop(1, #fe8cd2) );
        background:-moz-linear-gradient( center top, #ffd3f7 5%, #fe8cd2 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd3f7', endColorstr='#fe8cd2');
    My Site
    I don't answer support questions via PM. Post add-on support questions in the support thread. The question & the answer will benefit others with similar issues.

  10. #10
    Join Date
    May 2005
    Location
    England
    Posts
    418
    Plugin Contributions
    0

    Default Re: CSS3 Buttons [support thread]

    Hello there,

    This is a fantastic mod, many thanks. With the 1.1 release, I noticed in all browsers that the 'Search' , 'Continue' (on checkout) and on login seem to have a greyed out image, then the yellow button appears only on rollover. Does anyone else have the same thing? I noticed they are all submit buttons, does that have any bearing at all?

    Thanks in advance.

 

 
Page 1 of 10 123 ... LastLast

Similar Threads

  1. v138a PO Box Ban 1.4 [support thread]
    By mvstudio in forum All Other Contributions/Addons
    Replies: 2
    Last Post: 5 Dec 2013, 06:09 PM
  2. CSS3 across browsers?
    By mojo13 in forum Templates, Stylesheets, Page Layout
    Replies: 16
    Last Post: 26 Jul 2011, 11:40 PM
  3. ZJ Black 2 support thread
    By Liamv in forum Addon Templates
    Replies: 1
    Last Post: 15 Feb 2010, 02:53 PM
  4. PO Box Ban [support thread]
    By Steven300 in forum Addon Shipping Modules
    Replies: 23
    Last Post: 28 Oct 2009, 11:58 PM

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
  •