New button help

brandofamily

I am trying to adjust the new button style in my galleries...
but I'm stuck... I'm looking at these vertical lists of characters
http://www.brandolinoimaging.com/img/buttons/bg/white_gradientdkgray.gif

and backgrounds
http://www.brandolinoimaging.com/img/buttons/buttongroup_sprite.png

and I can't figure out how the code determines which character or background to use for the button...
I'd like to change the button background on my galleries to a gradient from brown/tan to black... I know I'd create it in PS, but how does this list of backgrounds work.

jfriend

brandofamily wrote:

I am trying to adjust the new button style in my galleries...
but I'm stuck... I'm looking at these vertical lists of characters
http://www.brandolinoimaging.com/img/buttons/bg/white_gradientdkgray.gif

and backgrounds
http://www.brandolinoimaging.com/img/buttons/buttongroup_sprite.png

and I can't figure out how the code determines which character or background to use for the button...
I'd like to change the button background on my galleries to a gradient from brown/tan to black... I know I'd create it in PS, but how does this list of backgrounds work.

If you look at the Smugmug CSS for each button that Smugmug has in the new style, you will see something like this:

.glyphButton .first-child, .yui-menu-button button {
background-image: url(http://cdn.smugmug.com/img/buttons/bg/white_gradientdkgray.gif);
background-repeat: no-repeat;
cursor: pointer;
}

.shareButton .first-child {
background-position: 10px -100px;
}

The .glyphButton rule gives the button a background image from which it gets the glyph. The background-position selects which glyph is going to show in the button. This particular gif image has glyphs every 50 pixels so each button is using a different background position -50, -100, -150, -200 ...

Each button has a unique class and is styled with a unique background position to select the right glyph. This is really just for their convenience and site performance as the browser only loads one GIF image and the same image is used for all their buttons. You wouldn't have to do it this way. You could just make the right size single image and specify it as the background-image. If you were going to do several of these, then you might as well do it the way they did it and put all the glyphs in one image.

Is this making any sense?

brandofamily

jfriend wrote:

If you look at the Smugmug CSS for each button that Smugmug has in the new style, you will see something like this:

.glyphButton .first-child, .yui-menu-button button {
background-image: url(http://cdn.smugmug.com/img/buttons/bg/white_gradientdkgray.gif);
background-repeat: no-repeat;
cursor: pointer;
}

.shareButton .first-child {
background-position: 10px -100px;
}

The .glyphButton rule gives the button a background image from which it gets the glyph. The background-position selects which glyph is going to show in the button. This particular gif image has glyphs every 50 pixels so each button is using a different background position -50, -100, -150, -200 ...

Each button has a unique class and is styled with a unique background position to select the right glyph. This is really just for their convenience and site performance as the browser only loads one GIF image and the same image is used for all their buttons. You wouldn't have to do it this way. You could just make the right size single image and specify it as the background-image. If you were going to do several of these, then you might as well do it the way they did it and put all the glyphs in one image.

Is this making any sense?

Yes thank you that makes perfect sense. But If I wish to make that string of gifs... where do I get the initial images?
I'm sure I can figure out the dimensions using PS, but I'd need the tiny images to start...

jfriend

brandofamily wrote:

Yes thank you that makes perfect sense. But If I wish to make that string of gifs... where do I get the initial images?
I'm sure I can figure out the dimensions using PS, but I'd need the tiny images to start...

They are up to your own design/creativity in Photoshop. If you don't need to have original images, you can just use some of the existing Smugmug glyphs in your own buttons. For example, if you want to use the same image as the share button, just give you button an additional class of "shareButton" and everything will be taken care of for you automatically.

Or, you can start with the GIF file from Smugmug, change glyphs and/or colors, save to a GIF, upload to your site and link the background of the button to that image and position with the CSS rules.

brandofamily

jfriend wrote:

They are up to your own design/creativity in Photoshop. If you don't need to have original images, you can just use some of the existing Smugmug glyphs in your own buttons. For example, if you want to use the same image as the share button, just give you button an additional class of "shareButton" and everything will be taken care of for you automatically.

Or, you can start with the GIF file from Smugmug, change glyphs and/or colors, save to a GIF, upload to your site and link the background of the button to that image and position with the CSS rules.

Thanks