Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: ★ [Guide] Changing your User Info icons

  1. #1
    Trinket's Avatar
    Joined
    Jan 2012
    Posts
    678
    Userbars
    5
    Thanks
    725
    Thanked
    860/323
    DL/UL
    10/0
    Mentioned
    240 times
    Time Online
    12d 20m
    Avg. Time Online
    4m

    ★ [Guide] Changing your User Info icons

    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.



    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.



    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:

    Code:
    #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:

    Code:
    .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.

    Code:
    #userinfo .contentModuleContent {
        background-image: url("http://i.imgur.com/3Uhi8.jpg");
        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.

    Code:
    #userinfo .medText table table img {
        visibility: hidden;
    }
    This is the code used to remove the default icons. Simple.

    Code:
    #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.

    Code:
    #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:

  2. The Following 11 Users Say Thank You to Trinket For This Useful Post:

    Cody. (05-04-2012),DarkSkies (01-06-2024),Kahpow (06-25-2012),Maki (12-05-2013),Meercat (05-04-2012),Siebenschlaefer (03-21-2022),Skins (05-05-2012),Slasher (05-05-2012),Storme (07-07-2012),yamakracker (05-04-2012),zxzero (05-04-2012)

  3. #2

    Joined
    Dec 2011
    Posts
    1,610
    Thanks
    412
    Thanked
    1,065/607
    DL/UL
    68/0
    Mentioned
    582 times
    Time Online
    N/A
    Avg. Time Online
    N/A
    You must spread some Reputation around before giving it to Trinket again.


    But I love your guides. (:

  4. The Following 2 Users Say Thank You to maxxine For This Useful Post:

    Meercat (05-04-2012),Trinket (05-03-2012)

  5. #3
    Trinket's Avatar
    Joined
    Jan 2012
    Posts
    678
    Userbars
    5
    Thanks
    725
    Thanked
    860/323
    DL/UL
    10/0
    Mentioned
    240 times
    Time Online
    12d 20m
    Avg. Time Online
    4m
    Thank you, I'm glad!

    I have...29 guides in total to post. This will be a long day >_>

  6. #4
    Sneaky Sneakz Sneakz's Avatar
    Joined
    Apr 2012
    Posts
    275
    Userbars
    2
    Thanks
    85
    Thanked
    147/71
    DL/UL
    14/0
    Mentioned
    34 times
    Time Online
    4h 57m
    Avg. Time Online
    N/A
    Thanks for the guide! Such a cute idea

  7. The Following User Says Thank You to Sneakz For This Useful Post:

    Trinket (05-03-2012)

  8. #5
    Trinket's Avatar
    Joined
    Jan 2012
    Posts
    678
    Userbars
    5
    Thanks
    725
    Thanked
    860/323
    DL/UL
    10/0
    Mentioned
    240 times
    Time Online
    12d 20m
    Avg. Time Online
    4m
    It works great for themed lookups x) plus you can easily get rid of the ugly white bit around the default icons

  9. #6
    Cody.'s Avatar
    Joined
    Apr 2012
    Posts
    911
    Userbars
    3
    Thanks
    1,290
    Thanked
    499/330
    DL/UL
    116/0
    Mentioned
    204 times
    Time Online
    14d 9h 13m
    Avg. Time Online
    4m
    It is such a nice effect to a lookup.

    great guide.
    +rep.

  10. The Following User Says Thank You to Cody. For This Useful Post:

    Trinket (05-04-2012)

  11. #7
    zxzero's Avatar
    Joined
    Dec 2011
    Posts
    29
    Userbars
    2
    Thanks
    1,490
    Thanked
    1,020/472
    DL/UL
    169/0
    Mentioned
    273 times
    Time Online
    56d 5h 29m
    Avg. Time Online
    19m
    Thanks, maybe now I can finish up my user look-up without bugging milly. xD

  12. The Following User Says Thank You to zxzero For This Useful Post:

    Trinket (05-04-2012)

  13. #8
    Ryan~'s Avatar
    Joined
    Jan 2012
    Posts
    123
    Userbars
    5
    Thanks
    1,380
    Thanked
    1,424/827
    DL/UL
    103/4
    Mentioned
    640 times
    Time Online
    15d 12h 13m
    Avg. Time Online
    5m
    I did this on my lookup with a different method. Are yours clickable?

  14. #9
    Trinket's Avatar
    Joined
    Jan 2012
    Posts
    678
    Userbars
    5
    Thanks
    725
    Thanked
    860/323
    DL/UL
    10/0
    Mentioned
    240 times
    Time Online
    12d 20m
    Avg. Time Online
    4m
    The modules, you mean? Yeah, I just click and drag them xD

  15. #10
    Ryan~'s Avatar
    Joined
    Jan 2012
    Posts
    123
    Userbars
    5
    Thanks
    1,380
    Thanked
    1,424/827
    DL/UL
    103/4
    Mentioned
    640 times
    Time Online
    15d 12h 13m
    Avg. Time Online
    5m
    Nvm, I see the code in yours that makes it work

    #userinfo .medText table table tr td a {
    font-size: 50px;
    }
    Nvm Didn't work.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •