1

I'm trying to create some custom jqueryui buttons relying on the answers to How do I add a custom icon to a standard jQuery UI theme? , especially the answer of Matthew/Panayiotis, to create some custom jqueryUI buttons here:

http://nie-wieder.net/metronom/test.html

As you can see, the button is not shown and ... in short terms, I don't know what's wrong.

I created a button located here: http://nie-wieder.net/metronom/img/plus-normal.png (there are 2 other files, plus-hover.png and plus-active.png) and considering firebug's not freaking around, the Files are loaded, but... as you can see, the buttons are not there :(

css file is here: http://nie-wieder.net/metronom/css/style.css (scroll down, the phil-plus-classes)

I'm out of ideas, it would be great if you could help me!

Best regards, Dominik

Community
  • 1
  • 1
Dominik
  • 2,801
  • 2
  • 33
  • 45

2 Answers2

3

I think the key thing to understand when it comes to using custom icons with the jQuery UI button is that icons, custom or not, are added to the ui-button.

Thus, your blue-square-with-a-plus icon is being displayed on a silver rectangle because you're likely using the default jQuery UI theme, which makes the button background this silvery-gray color.

To solve what you want to do here, I think you'll want to embrace Theme Roller to help you.

On that page, change the background colors for Clickable: default state, Clickable: hover state, and Clickable: active state to colors that closely match your images (which, yes, I realize they're fancier than just a solid color, but bear with me here).

The color changes will ensure that the button onto which an icon is added uses colors of your choice, rather than the default.

From there, you'll need to decide how best to execute the custom icons.

Keep in mind, from what we've seen already, that if a 30x30 icon is added to a ui-button, that button will have additional of padding on either side, by default.

If you want to dig a bit deeper, open your jquery-ui CSS file (default or custom, either one), and search for Interaction states.

There are seven lines of classes under this heading, and this is where the background, and other, colors for the ui-state-default classes are declared.

Also in that CSS file, search for button text element.

The third line under that heading starts with .ui-button-icon-only, and the styles associated with the elements on this line include padding: .4em; This is what's causing the button to be wider than intended!

[Side note: In looking at the two lines that follow that there are classes named ui-button-icon-primary and ui-button-icon-secondary, so ui-button-icon-only is not for declaring that the button only contains an icon, but instead to declare that the button is using the only button style rather than declaring that one button is primary and another is secondary.]

Hopefully, this gives you enough to create your buttons to your satisfaction, but let me know if you have any questions.

jimmym715
  • 1,512
  • 1
  • 16
  • 25
1

not sure which button you're talking about, but none of your <button> elements have any text inside them. you have your spans styled with a width and height, for your background images, but spans are inline elements that cannot be given width or height (or padding or margin). Setting your display value to inline-block on the ui-icon span makes your image show up.

Thomas Jones
  • 4,892
  • 26
  • 34
  • First of all thank you very much, that seems to be exactly what I needed. The "button" should be just the plus-icon, as it is shown now. But now there's a really big light/grey background showing... I don't know where it's coming from... I should get some css books fast, I know and will do, but perhaps you could help me another time with that follow-up problem? Or am I doing something very wrong here, and is there another much easier approach for what I want (just my custom button as is, with hover/active-effect, on the background)? – Dominik Apr 29 '12 at 17:19
  • @Dominik check out jimmym715's answer, as its much more detailed than mine to fix your issue. The general idea is that while you're building a 'button', you dont need a ` – Thomas Jones Apr 29 '12 at 21:55