Results 1 to 8 of 8

Thread: ★ [Guide] HTML & CSS - Basic Neopets Userlookup

  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] HTML & CSS - Basic Neopets Userlookup




    Procrastination aside, I've finally gotten around to creating part 3 of this guide. Sections 1 and 2 covered the very basics along with common HTML and CSS codes, while this part will cover the specific codes required for a Neopets Userlookup. These are just basic codes -- more complex codes will be discussed in a separate guide.


    Modules

    Modules, simply put, are what Neopets call the little boxes which contain your user information, collections and such. There are five module names that I will be referring to in this guide -- four of which can be found in the rather messy example below.





    I've used colours in order to make understanding the modules easier.
    ContentModuleHeader is what we use in order to change the black bar with "User Info" inside it. With this code, we can change the font family, the size, the colour, and the background. We're also able to add underlines, and even remove it entirely. Let's take a look at what the following example does:


    .contentModuleHeader{background-color:#d80000}





    Keep in mind however, that the contentModuleHeader code only changes the features for the userinfo header -- it will not change the features for the collections, Neopets, trophies etc modules. A separate code is used for those, known as contentModuleHeaderAlt.



    .contentModuleHeaderAlt {background-color: #fdd01b;}





    The next code we'll be looking at is the regular contentModule code. This is often used either to add a background to your module, or add a border. We'll take a look at what the following code does:



    .contentModule {border: 2px solid #30fd1b;}




    Personally I use this code to remove all borders around my modules, but it's up to you. I'll add an example of a lookup without any borders at the bottom of this guide.

    The issue here is the fact that there's a thin grey border on the inside of the modules, which is especially visible in the User Info module. What we can now do is use the following code to get rid of it:



    .contentModuleTable {border: none;}







    Looking good! <3


    Backgrounds

    These codes are used to edit certain parts of the lookup behind the modules. Some parts of these codes need to be removed in order to get a full page layout actually visible, otherwise you'll end up with a big, white block covering everything.

    By using the following code, I was able to remove a lot of the white background behind the modules, along with the border:



    #main {position:absolute;background: none;border: none;}


    The code produced the following result:





    What a mess.

    In order to remove the white from inside the modules, you'll be required to use the following code:



    .contentModuleContent{background:none}





    Still somewhat messy due to the white around the images, but I'll show you how to change that another time
    Now, you can actually get a nice, visible background without any interference from missing codes. You should have learned how to use a basic background code in the last guide, but here's a reminder:


    body{background:#daffd5}





    Awful choice of colours, but not bad for an example.
    You can also change the colours of each individual module separately by assigning a background code to the specific module table. Sounds confusing, but here's an example of what I mean:


    #userinfo .contentModuleTable{background:#8ee5fe}
    #usercollections .contentModuleTable{background:#feb88e}


    Note: the result will give you a User Info module with the default background colour along the bottom. To fix this, simply add contentModule to your userinfo code:


    #userinfo .contentModuleTable, .contentModule{background:#8ee5fe}

    Your result should look like this:





    Colourful ^_^


    Removals

    Often, the navigation bar and other features can ruin a really great lookup. There are several codes you'll need to use in order to get rid of all potential interferences from the navigation etc.

    Removing the site theme:

    #header{display:none;}
    #footer{display:none;}

    Removing any advertisement sections:

    .adBox,.adBox2, .ad_wrapper_fixed, #ban, #ban_bottom, .footOverlay{display:none;}

    Removing your shop & gallery/NeoHome/Habitarium/NC Mall modules:

    #usershop .contentModuleTable{display:none}

    #userneohome .contentModuleTable{display:none}

    #habitarium .contentModuleTable{display:none}

    #ncmall .contentModuleTable{display:none}


    Resizing

    I always find that the modules are a bit too big if I leave them as their default size. You can use the following to modify the size of each module:

    #userinfo .contentModuleTable{width:200px;height:200px}


    The modules can end up looking too far apart if you resize them, so use the following code to bring them closer together -- of course, you can add the height, top, left, position attributes as well:

    #content{position:absolute;width:600px}

    Margins

    There are times when the position:absolute code doesn't work, and so moving the #main code around can be difficult. This is where margins come in.

    #main{margin-top:100px}

    By using that code, it will be as though you're using the default top:## code with position:absolute. You can also add a dash (minus) in front of your number to move everything up rather than down.

    *

    The above can result in a messy lookup, but it's impossible to learn how to make a decent lookup if you don't know what each basic code does. Tweak what codes you've learned throughout these guides, and take a look at the following userlookup code if you need a hand



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

    Aase (02-20-2020),Acid (04-11-2012),ailunbee (01-09-2018),Antonio (05-24-2020),bagel (07-27-2015),Bailey (01-28-2012),Bobsburgers22 (01-06-2024),Evelsaint (01-27-2012),fireheart (01-09-2024),Geras (01-09-2024),Goxar (09-18-2020),infestedvirus (01-11-2024),j03 (01-28-2012),juliamps (01-09-2024),Kaguya (12-26-2023),Kristin (01-28-2012),maxxine (01-28-2012),Mr. 49 (12-01-2019),♥ Munna ♥ (02-03-2024),Oshun (04-22-2020),saleminute (10-01-2019),Siebenschlaefer (03-21-2022),teletubby (01-24-2020),The Black North (02-25-2015),Zarza (08-17-2017),Zenitsu (01-09-2024)

  3. #2
    Evelsaint's Avatar
    Joined
    Dec 2011
    Posts
    1,983
    Userbars
    6
    Thanks
    261
    Thanked
    345/246
    DL/UL
    89/0
    Mentioned
    201 times
    Time Online
    7h 1m
    Avg. Time Online
    N/A
    Excellent Guide, I'm sick of copying and pasting premade userlook ups.

  4. #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
    I'm glad it's of use to you! ^_^

    I have a ton of guides to post still, but I'll leave those for another time...I feel like I'm spamming ~_~

  5. #4

    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
    Nice indepth Guide.
    +Thanks & rep.

  6. #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
    Thank you :3

    I have a guide on changing userinfo icons as well, if you're interested. Always a nice lookup feature.

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

    Bobsburgers22 (01-06-2024)

  8. #6

    Joined
    Aug 2019
    Posts
    32
    Userbars
    0
    Thanks
    16
    Thanked
    29/10
    DL/UL
    22/0
    Mentioned
    1 time
    Time Online
    9d 1h 18m
    Avg. Time Online
    7m
    So I'm trying to get rid of my neohome on my userlookup. I assume there is more to it than just putting #userneohome .contentModuleTable{display:none}, because when I do that, that doesn't do anything. What am I missing? Please and thank you.

  9. #7

    Joined
    Jan 2024
    Posts
    1
    Userbars
    0
    Thanks
    2
    Thanked
    0/0
    Mentioned
    Never
    Time Online
    49m
    Avg. Time Online
    N/A
    Oh my gosh this was amazingly helpful and I was able to explore and tweak with things a little! Going to check out your other guides! Tysm!(:

  10. #8

    Joined
    Oct 2023
    Posts
    36
    Pronouns
    she/her
    Userbars
    2
    Thanks
    17
    Thanked
    13/9
    DL/UL
    1/0
    Mentioned
    1 time
    Time Online
    13d 12h 21m
    Avg. Time Online
    1h 59m
    Thanks! I hope we get a tutorial for petlookups eventually. I'm a front-end dev and I can't get around the new rules, everything is a mess and I can't seem to make my petlookups work like they did before. I need a petlookup-css-for-dummies.

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
  •