Trinket
01-27-2012, 11:29 PM
[Only registered and activated users can see links]
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.
[Only registered and activated users can see links]
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}
[Only registered and activated users can see links]
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;}
[Only registered and activated users can see links]
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;}
[Only registered and activated users can see links]
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;}
[Only registered and activated users can see links]
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:
[Only registered and activated users can see links]
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}
[Only registered and activated users can see links]
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}
[Only registered and activated users can see links]
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:
[Only registered and activated users can see links]
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 :)
[Only registered and activated users can see links]
<style>
#header, #footer, .adBox,.adBox2, .ad_wrapper_fixed, #ban, #ban_bottom, .footOverlay{display:none;}
#usershop .contentModuleTable, #userneohome .contentModuleTable, #habitarium .contentModuleTable, #ncmall .contentModuleTable{display:none}
.contentModuleHeader, .contentModuleHeaderAlt {display: none;}
.contentModule, .contentModuleContent, .contentModuleTable {border: none;background: #ffffff;}
#content {width: 600px;position: absolute;}
#main {margin-left: 100px;margin-top: 100px;border: none;background: none;position: absolute;}
a:link, a:visited, a:hover, a:active {color: #187fe8;font-family: verdana;font-weight: bold;text-decoration: none;}
body, .medText {color: #18c3e8;font-size: 9px;font-family: verdana;text-decoration: none;}
body {background: #7ee7fe;}
</style>
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.
[Only registered and activated users can see links]
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}
[Only registered and activated users can see links]
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;}
[Only registered and activated users can see links]
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;}
[Only registered and activated users can see links]
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;}
[Only registered and activated users can see links]
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:
[Only registered and activated users can see links]
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}
[Only registered and activated users can see links]
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}
[Only registered and activated users can see links]
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:
[Only registered and activated users can see links]
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 :)
[Only registered and activated users can see links]
<style>
#header, #footer, .adBox,.adBox2, .ad_wrapper_fixed, #ban, #ban_bottom, .footOverlay{display:none;}
#usershop .contentModuleTable, #userneohome .contentModuleTable, #habitarium .contentModuleTable, #ncmall .contentModuleTable{display:none}
.contentModuleHeader, .contentModuleHeaderAlt {display: none;}
.contentModule, .contentModuleContent, .contentModuleTable {border: none;background: #ffffff;}
#content {width: 600px;position: absolute;}
#main {margin-left: 100px;margin-top: 100px;border: none;background: none;position: absolute;}
a:link, a:visited, a:hover, a:active {color: #187fe8;font-family: verdana;font-weight: bold;text-decoration: none;}
body, .medText {color: #18c3e8;font-size: 9px;font-family: verdana;text-decoration: none;}
body {background: #7ee7fe;}
</style>