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

Thread: ★ [Guide] Changing your User Info icons

  1. #1
    Trinket's Avatar
    Join Date
    Jan 2012
    Gender
    Location
    UK
    Posts
    662
    Thanks
    699
    Thanked 777 Times in 309 Posts


    Downloads
    8
    Uploads
    0
    Mentioned
    236 Post(s)
    Time Online
    11 d 17 h 36 m
    Avg. Time Online
    8 m
    Rep Power
    9

    ★ [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:



    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:



    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.



    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.



    This is the code used to remove the default icons. Simple.



    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.



    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 9 Users Say Thank You to Trinket For This Useful Post:

    Cody. (05-04-2012),Kahpow (06-25-2012),Meercat (05-04-2012),Mint (12-05-2013),Skins (05-05-2012),Slasher (05-05-2012),Storme (07-07-2012),yamakracker (05-04-2012),zxzero (05-04-2012)

  3. #2
    Banned
    Join Date
    Dec 2011
    Gender
    Location
    The Konoha
    Posts
    1,611
    Thanks
    412
    Thanked 1,062 Times in 607 Posts


    Downloads
    68
    Uploads
    0
    Mentioned
    582 Post(s)
    Time Online
    N/A
    Avg. Time Online
    N/A
    Rep Power
    0
    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
    Join Date
    Jan 2012
    Gender
    Location
    UK
    Posts
    662
    Thanks
    699
    Thanked 777 Times in 309 Posts


    Downloads
    8
    Uploads
    0
    Mentioned
    236 Post(s)
    Time Online
    11 d 17 h 36 m
    Avg. Time Online
    8 m
    Rep Power
    9
    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
    Join Date
    Apr 2012
    Gender
    Location
    Antarctica
    Age
    27
    Posts
    276
    Thanks
    85
    Thanked 147 Times in 71 Posts


    Downloads
    14
    Uploads
    0
    Mentioned
    34 Post(s)
    Time Online
    4 h 57 m
    Avg. Time Online
    N/A
    Rep Power
    6
    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
    Join Date
    Jan 2012
    Gender
    Location
    UK
    Posts
    662
    Thanks
    699
    Thanked 777 Times in 309 Posts


    Downloads
    8
    Uploads
    0
    Mentioned
    236 Post(s)
    Time Online
    11 d 17 h 36 m
    Avg. Time Online
    8 m
    Rep Power
    9
    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
    Join Date
    Apr 2012
    Gender
    Posts
    912
    Thanks
    1,254
    Thanked 499 Times in 330 Posts


    Downloads
    112
    Uploads
    0
    Mentioned
    203 Post(s)
    Time Online
    12 d 2 h 24 m
    Avg. Time Online
    9 m
    Rep Power
    7
    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
    Join Date
    Dec 2011
    Gender
    Location
    01100111 01110101 01100101 01110011 01110011
    Posts
    2,146
    Thanks
    1,494
    Thanked 954 Times in 457 Posts


    Downloads
    167
    Uploads
    0
    Mentioned
    273 Post(s)
    Time Online
    56 d 4 h 26 m
    Avg. Time Online
    42 m
    Rep Power
    11
    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

    Join Date
    Jan 2012
    Gender
    Location
    Atlanta
    Age
    25
    Posts
    136
    Thanks
    1,372
    Thanked 1,399 Times in 817 Posts


    Downloads
    85
    Uploads
    4
    Mentioned
    628 Post(s)
    Time Online
    14 d 7 h 24 m
    Avg. Time Online
    10 m
    Rep Power
    6
    I did this on my lookup with a different method. Are yours clickable?

  14. #9
    Trinket's Avatar
    Join Date
    Jan 2012
    Gender
    Location
    UK
    Posts
    662
    Thanks
    699
    Thanked 777 Times in 309 Posts


    Downloads
    8
    Uploads
    0
    Mentioned
    236 Post(s)
    Time Online
    11 d 17 h 36 m
    Avg. Time Online
    8 m
    Rep Power
    9
    The modules, you mean? Yeah, I just click and drag them xD

  15. #10

    Join Date
    Jan 2012
    Gender
    Location
    Atlanta
    Age
    25
    Posts
    136
    Thanks
    1,372
    Thanked 1,399 Times in 817 Posts


    Downloads
    85
    Uploads
    4
    Mentioned
    628 Post(s)
    Time Online
    14 d 7 h 24 m
    Avg. Time Online
    10 m
    Rep Power
    6
    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.

Page 1 of 2 12 LastLast

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
  •