1)First, take a screen shot of the normal bar your layout has, and open up your photo program. I'm using Photoshop Elements, but anything will work. (To take a screen shot press the Print Screen button which is next to f12.)
2) Use your program to recolor, redo, or jack with the buttons however you want. Don't worry about dividing them up just yet. It should look something like this.
3) Now it's time to divide up the buttons. Copy and paste each button into a few window. Here's how I seperated them.
You should end up buttons like these: (These don't center right since they're in a post)
Remeber to make a offline one as well:
Then just use the code:
#bar
{
background: none top left no-repeat;
}
#bar #onlineButton
{
background: transparent url(http://img.photobucket.com/albums/v28/Sors_X/redwhite/online.gif)
color: transparent;
}
#bar #offlineButton
{
background: transparent url(http://img.photobucket.com/albums/v28/Sors_X/redwhite/offline.gif) no-repeat;
color: transparent;
}
#bar #hiddenButton
{
background: transparent url(http://img.photobucket.com/albums/v28/Sors_X/redwhite/hidden.gif) no-repeat;
color: transparennt;
}
#bar #addButton
{
background: transparent url(http://img.photobucket.com/albums/v28/Sors_X/redwhite/add.gif) no-repeat;
}
#bar #msgButton
{
background: transparent url(http://img.photobucket.com/albums/v28/Sors_X/redwhite/pm.gif) no-repeat;
}
#bar #tradeButton
{
background: transparent url(http://img.photobucket.com/albums/v28/Sors_X/redwhite/trade.gif) no-repeat;
}
#bar #ignoreButton
{
background: transparent url(http://img.photobucket.com/albums/v28/Sors_X/redwhite/ignore.gif) no-repeat;
}
#bar a
{
filter: alpha(opacity=0)
opacity:0;
}
#bar a:hover
{
filter: alpha(opacity=0)
opacity:0;
}
#bar a {display: block; height: 0; padding-top: 22px; color: #000; overflow: hidden;}
And you'll have created a nice little online/offline bar for your profile.
surprised
