Results 1 to 5 of 5

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

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

    Acid (04-11-2012),bagel (07-27-2015),Bailey (01-28-2012),Evelsaint (01-27-2012),Infamous Joe (01-28-2012),Kristin (01-28-2012),maxxine (01-28-2012),The Black North (02-25-2015),Zarza (08-17-2017)

  3. #2
    Evelsaint's Avatar
    Join Date
    Dec 2011
    Gender
    Location
    NYC
    Posts
    1,984
    Thanks
    261
    Thanked 345 Times in 246 Posts


    Downloads
    89
    Uploads
    0
    Mentioned
    201 Post(s)
    Time Online
    7 h 1 m
    Avg. Time Online
    N/A
    Rep Power
    8
    Excellent Guide, I'm sick of copying and pasting premade userlook ups.

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

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

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

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
  •