Trinket
05-03-2012, 09:59 PM
This effect can be a little tricky at first, but it becomes so much easier after you've gotten the actual icon part finished. This is the effect we're aiming for.
[Only registered and activated users can see links]
Firstly, you're going to need to find the appropriate height and width for your user info. You don't want it too big, nor do you want it too small -- but it's okay if your image is a little out of proportion. I began with a 300 x 260 sized canvas in Photoshop.
In order to make sure I had the icons fall in place where the default icons should be, I took a screenshot of my lookup after resizing the userinfo box to 300 x 260. To make things easier, I set a clear background colour. This can be very easily done in Photoshop or Paint Shop pro by using layers -- if you don't have these programs, there's a template I've made at the bottom of this guide that you're welcome to use.
[Only registered and activated users can see links]
I moved the icons around a bit to make sure they're in proportion -- as you can see, the icon above "neofriend" is a bit too much to the left. Once you're done, delete the layer with the default icons and save your image (JPEG is best, because a lot of browsers are fussy with PNG files when they're set as background images). If you like, change the colours of your icons. Remember that you can use any images you like for this =]
Things get easier from this point on. Now comes the coding.
Most of your coding will be removal type CSS. First things first, if you haven't already, resize your userinfo. This is the code I used:
#userinfo .contentModuleTable {
width: 300px;
height: 170px;
position: absolute;
overflow: auto;
background: none;
}
As you can see, I scaled my height down from 260 to 170 -- the reason being that the userinfo box looked a bit plain because it was so long. Another code you can include:
.contentModule, .contentModuleTable, .contentModuleContent {
border: none;
background: none;
}
.contentModuleHeader, .contentModuleHeaderAlt {
display: none;
}
These aren't actually necessary, but your userinfo section will look much neater like this. The first code will remove the ugly border around your userinfo, and also the default white background. The second code will remove the header along the top of the module.
Now come the codes for actually inserting your custom icons.
#userinfo .contentModuleContent {
background-image: url("[Only registered and activated users can see links]");
background-repeat: no-repeat;
background-position: bottom right;
}
This is the code for the image itself. Make sure that you have the position set to bottom right, because if you decide to shrink the size of your userinfo, it won't cut off the bottom of your icons.
#userinfo .medText table table img {
visibility: hidden;
}
This is the code used to remove the default icons. Simple.
#userinfo .medText table table tr td a {
font-size: 50px;
}
Occasionally, you'll notice that some lookups with custom icons render the icons almost unclickable -- meaning you have to click a pixel or two from the bottom for the icons to actually work. The code above will ensure that the whole icon is clickable.
#userinfo .medText img {
visibility: hidden;
}
That last code is optional -- it will remove the shield from your userinfo section. I think the section looks neater without a shield, but leave it there if you like it =]
That's all there is to it! If you have any questions or comments, feel free to let me know.
Template -- just erase the little tip I've included:
[Only registered and activated users can see links]
[Only registered and activated users can see links]
Firstly, you're going to need to find the appropriate height and width for your user info. You don't want it too big, nor do you want it too small -- but it's okay if your image is a little out of proportion. I began with a 300 x 260 sized canvas in Photoshop.
In order to make sure I had the icons fall in place where the default icons should be, I took a screenshot of my lookup after resizing the userinfo box to 300 x 260. To make things easier, I set a clear background colour. This can be very easily done in Photoshop or Paint Shop pro by using layers -- if you don't have these programs, there's a template I've made at the bottom of this guide that you're welcome to use.
[Only registered and activated users can see links]
I moved the icons around a bit to make sure they're in proportion -- as you can see, the icon above "neofriend" is a bit too much to the left. Once you're done, delete the layer with the default icons and save your image (JPEG is best, because a lot of browsers are fussy with PNG files when they're set as background images). If you like, change the colours of your icons. Remember that you can use any images you like for this =]
Things get easier from this point on. Now comes the coding.
Most of your coding will be removal type CSS. First things first, if you haven't already, resize your userinfo. This is the code I used:
#userinfo .contentModuleTable {
width: 300px;
height: 170px;
position: absolute;
overflow: auto;
background: none;
}
As you can see, I scaled my height down from 260 to 170 -- the reason being that the userinfo box looked a bit plain because it was so long. Another code you can include:
.contentModule, .contentModuleTable, .contentModuleContent {
border: none;
background: none;
}
.contentModuleHeader, .contentModuleHeaderAlt {
display: none;
}
These aren't actually necessary, but your userinfo section will look much neater like this. The first code will remove the ugly border around your userinfo, and also the default white background. The second code will remove the header along the top of the module.
Now come the codes for actually inserting your custom icons.
#userinfo .contentModuleContent {
background-image: url("[Only registered and activated users can see links]");
background-repeat: no-repeat;
background-position: bottom right;
}
This is the code for the image itself. Make sure that you have the position set to bottom right, because if you decide to shrink the size of your userinfo, it won't cut off the bottom of your icons.
#userinfo .medText table table img {
visibility: hidden;
}
This is the code used to remove the default icons. Simple.
#userinfo .medText table table tr td a {
font-size: 50px;
}
Occasionally, you'll notice that some lookups with custom icons render the icons almost unclickable -- meaning you have to click a pixel or two from the bottom for the icons to actually work. The code above will ensure that the whole icon is clickable.
#userinfo .medText img {
visibility: hidden;
}
That last code is optional -- it will remove the shield from your userinfo section. I think the section looks neater without a shield, but leave it there if you like it =]
That's all there is to it! If you have any questions or comments, feel free to let me know.
Template -- just erase the little tip I've included:
[Only registered and activated users can see links]