Forums / Addon Templates / adding a class to button element - CSS button addon

adding a class to button element - CSS button addon

Locked

Started by australican on 24 May 2010, 4:11 AM · Views: 13,378

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
24 May 2010, 4:11 AM
#1
australican avatar

australican

Zen Follower

Join Date:
Jan 2009
Location:
Victoria Australia
Posts:
100
Plugin Contributions:
0

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)

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

24 May 2010, 4:22 AM
#2
australican avatar

australican

Zen Follower

Join Date:
Jan 2009
Location:
Victoria Australia
Posts:
100
Plugin Contributions:
0

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

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:

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

<button value="submit" class="submitBtn"><span>Submit</span></button>

Hope that explains what I'm trying to do better.
David

25 May 2010, 5:00 AM
#3
australican avatar

australican

Zen Follower

Join Date:
Jan 2009
Location:
Victoria Australia
Posts:
100
Plugin Contributions:
0

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

26 May 2010, 7:53 AM
#4
australican avatar

australican

Zen Follower

Join Date:
Jan 2009
Location:
Victoria Australia
Posts:
100
Plugin Contributions:
0

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

    //$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