Results 1 to 4 of 4
  1. #1
    Join Date
    Jan 2009
    Location
    Victoria Australia
    Posts
    100
    Plugin Contributions
    0

    Default adding a class to button element - CSS button addon

    Hi all, I'm trying to convert my shop buttons to css sliding door/sprites. I'm using the ccs buttons addon.

    I managed it with link buttons by adding <a class="button".... to the appropriate template file. Need being to have a nested span tag inside the element. (hope I'm using all the right terminology here)

    My problem is trying to get it to work with non-link buttons, like 'add to cart.' I'm getting close by hacking at my css_buttons.php file, like this... (buttonnub being where my second image will be)

    Code:
    // replaced <input />s by <button></button>s
        //$css_button = '<input' . $class . ' type="submit" value="' .$text . '"' . $parameters . ' />';
        $css_button = '<buttonnub' . $class .'>'.'<button' . $class . ' type="submit" value="' .$text . '"' . $parameters . '>' . $text . '</button>'.'</buttonnub>';
      }
    I'm sure anyone with php knowledge can see the problems with that, I can see that it adds the second image in a deformed way, but unsure how to get it to work as a second styleable entity. It also throws a lot of invalid errors at me.

    I think I'm barking up the right tree here as this does handle all the non-link buttons at once, but unsure if this method will be doable.

    If anyone has accomplished this, or knows how I might manage it, I'd appreciate a few hints.

    Thanks,
    David

    http://countrytothecore.net
    Last edited by australican; 24 May 2010 at 05:13 AM. Reason: more info

  2. #2
    Join Date
    Jan 2009
    Location
    Victoria Australia
    Posts
    100
    Plugin Contributions
    0

    Default Re: adding a class to button element

    This might help, this is the suggested html and some text from two different tutorial sites...

    Our button will be a basic <a> tag with a nested <span>, each containing a different slice of the background image. Here's what the HTML looks like:
    Code:
    <a class="button" href="#"><span>Bring world peace</span></a>
    and

    "And last but not least, we assigned a class to the button element to apply our design; in this case, "submitBtn." Styles for the span tag are assigned with descendant selectors."
    Code:
    <button value="submit" class="submitBtn"><span>Submit</span></button>
    Hope that explains what I'm trying to do better.
    David

  3. #3
    Join Date
    Jan 2009
    Location
    Victoria Australia
    Posts
    100
    Plugin Contributions
    0

    Default Re: adding a class to button element - CSS button addon

    Hello all, If anyone has time to look at this for me, I'm leaving a few examples on my site. The product info pages are the best examples.
    I've switched to the option of "use image buttons when found", so my site won't look so broken.

    As mentioned I have a few of them working; prev, return to product list, next, and shopping cart are all well.

    Examples of still not working buttons; the search and tell a friend, both on the side boxes, will show the problem.

    Thanks, David

    http://countrytothecore.net

  4. #4
    Join Date
    Jan 2009
    Location
    Victoria Australia
    Posts
    100
    Plugin Contributions
    0

    Default Re: adding a class to button element - CSS button addon

    Hi all, I've made some progress, I changed my modification to the css_buttons.php file mentioned in my first post to...

    Code:
        //$css_button = '<input' . $class . ' type="submit" value="' .$text . '"' . $parameters . ' />';
        $css_button = '<a class="button">' . '<button' . $class . ' type="submit" value="' .$text . '"' . $parameters . '>' . $text . '</button>' . '</a>';
      }
    This works, (alongside a lot of extra css) without errors, but with a lot of warnings.

    I'd still like some advice on a better way do do this if anyone has any ideas.

    Thanks,
    David

 

 

Similar Threads

  1. v151 How to change the button width that in the INPUT element when the css button is used?
    By su35 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 9 Jun 2013, 04:34 PM
  2. v150 Ultimate-SEO addon conflicting with CSS-Button addon
    By Rony in forum All Other Contributions/Addons
    Replies: 0
    Last Post: 16 Jan 2013, 08:06 PM
  3. How can I make the Header Search button be a CSS button?
    By makehveli in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 26 Aug 2011, 03:01 AM
  4. Adding a more info button alongside buy now button
    By jwburnside in forum General Questions
    Replies: 5
    Last Post: 6 Nov 2010, 01:36 PM
  5. CSS Element for Add to Cart CSS button?
    By modernm in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 20 Jan 2008, 04:54 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
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR