Added by Jimmy Thompson, last edited by Jimmy Thompson on Jul 14, 2009  (view change)

Labels:

glyphs glyphs Delete
buttons buttons Delete
Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.

July 2009 update: the glyph files have been updated with the new Style glyph.

Our brand new buttons are in fact YUI buttons:
http://developer.yahoo.com/yui/button/

Great care has been taken to make sure that all themes have been updated so that the buttons (and their glyphs) match the themes perfectly. Should you want to customize the buttons further, we have a PSD file that contains the button glyphs as well as CSS for you to use.   Don't have Photoshop?  Here's a layered tiff file.

.sm-button {
    border-top: solid 1px #5e3707;
    border-bottom: solid 1px #5e3707;
    background: #9cc2ca url(PATHTOIMAGE) 0 0 repeat-x;
}
.glyphButton .first-child, .yui-menu-button button {
    background-image: url(PATHTOIMAGE);
}
.sm-button button, .sm-button a {
    color: #5e3707;
}
.sm-button {
    border-left: solid 1px #5e3707;
    border-right: solid 1px #5e3707;
    _border-left: none;
    _border-right: none;
    ~border-left: none;
    ~border-right: none;
}
.sm-button .first-child {
    border: none;
    _border-left: solid 1px #5e3707;
    ~border-left: solid 1px #5e3707;
    _border-right: solid 1px #5e3707;
    ~border-right: solid 1px #5e3707;
}

Gotchas:

Are your buttons too big? You may need to add this to your css in order to reset their size:

#altViews, #cartButtonsWrapper, #toggleAlbumComment   {
    font: 13px !important;
}

Got questions?  Ask 'em on Dgrin's Customizing forum and our experts and the community will help!

Comments  (Hide Comments)

I don't see any changes on my site.  Do I have CSS code that may be blocking the new stuff?

www.thepupil.ca

Ryan

Posted by Anonymous at Sep 20, 2008 13:56

Hey Ryan, the changes to the buttons have not gone live yet - so you won't see the new buttons. This post is a heads up on how to customize your buttons once the code does go live (or if you want to get a head start and do it before the new buttons roll out).

Posted by Jimmy Thompson at Sep 21, 2008 22:42

Hi - most popular 'customization' for the buttons is changing the slideshow button.

Here is the slideshow button css for www.jakigoodphotography.com (my most popular customized site + Jaki's photography is outstanding!)

.play_slideshow {
    width: 80px;
    height: 19px;
    vertical-align: bottom;
    background: url(http://jakigood.smugmug.com/photos/366910835_R9XmJ-O.jpg) no-repeat;
    margin: 2px 0 0 5px;
    font-size: 0px;
}

Posted by Anonymous at Sep 23, 2008 04:01

Hi - most popular 'customization' for the buttons is changing the slideshow button.

Here is the slideshow button css for www.jakigoodphotography.com (my most popular customized site + Jaki's photography is outstanding!)

.play_slideshow {
    width: 80px;
    height: 19px;
    vertical-align: bottom;
    background: url(http://jakigood.smugmug.com/photos/366910835_R9XmJ-O.jpg) no-repeat;
    margin: 2px 0 0 5px;
    font-size: 0px;
}

- jerryr

www.jrphotosandwebdesign.com

Posted by Anonymous at Sep 23, 2008 04:01

Wow Thanks to smugmug to direct me here......I am anxious to change my blue buttons

That i am not favoring that much...is this active now ? Thanks

Posted by Anonymous at Oct 28, 2008 08:27

christian laboutin christian laboutin christian laboutin street lighting christian louboutin discount christian louboutin discount

Posted by Anonymous at Oct 08, 2009 20:11