Lookup Coding
Introduction Lookup Concepts Dissection Explanations header Modules .contentStuff userinfo usercollections usershop userneopets usertrophies userneohome habitarium ncmall footer body #main Extra bits Icons Navigation Text Background Other Centered Layout Example Site

Hello there guest. It's a pleasure to have you here. I'll introduce myself - I'm moondust_ and I'm a big fan of coding and I just love making userlookups. Thanks to Kitty's coding guide I was able to learn how to make userlookups and now I'd love to pass on my knowledge so that you too can make the userlookup that you've always wanted to make but didn't quite know how. I also own a guild coding guide on /~guildcoding if you wanted to check that out.

I would like to emphasize on the fact that this is not a CSS tutorial. There's plently of guides on CSS so there's no point in offering it, really! Instead I will concentrate on userlookup specific stuff, such as how to move the modules and editing the modules. All that fun stuff!

I hope you will learn a thing or two, and I'm always open to neomails if you need help with something.

This section of the tutorial will give you all the tools you need to code userlookups. The first section is the "dissection" in which I have an image labelled with all the different sections of a userlookup. The Explantions is the next part which has a thorough discussion of each and every section that was labelled in the dissection. The last section is any extra tid bits that didn't fit the explanation section but would be useful to know.

Quick HTML/CSS tutorial

This is a quick review of the syntax for CSS! I constantly use the terms throughout the guide, so it's good idea to know what they mean, if you don't already.

CSS stands for Cascading Stylesheets. It styles the HTML which is the structure. The CSS syntax is,
selector {
property: value;
}

Where the selector is something like body, #main, #textbox, or h1.
Property is something like font-size, font-family, color, display, or margin.
Value is something like 20px, none, hidden, or visible.
CSS codes go inside the style tags. They won't do anything if they are not between a pair of style tags. Also, you only need ONE pair of style tags. It's messy and unnecessary to have more than pair of style tags.

If something has identical propety and values, then you can seperate the different selectors with commas. For example if you had,
.contentModule {
border: none;
background: none;
}
.contentModuleContent {
border: none;
background: none;
}

You could instead do,
.contentModule, .contentModuleContent {
border: none;
background: none;
}
Make sure you don't put an extra comma after the last selector or else all your coding after that point won't work.

This is what the HTML looks like,
This part of the coding is connected to the CSS and it is the structure of layout. You can have HTML without CSS but you can't have CSS without HTML.

For reference, coderef is a really good resource that has a conveniant list of CSS selectors/properties/values.

Userlookup Dissection



TNT created the #ncmall module after I made this part, so I just added the module manually, hope it doesn't look too strange. lol

1. #header



This is the header! It includes the navigation with the drop down menu, and also the welcome bar with your username, neopets, NC and the logout link. #header has a background which can be changed or removed. #header can be removed, however you must have another form of navigation somewhere else on the page, even text links are fine, and it has to be easy to see and find. This section goes indepth on how to customize navigation if you don't have the header.

Included in the header is the NST time, and the username/neopets/NC/logout part. The CSS selectors are:
#nst and .user

To completely remove something: the property and value used is display: none; This means to remove the #header, all you need to do is,
#header {
display: none;
}

If you want just the navigation bar with the black wording then you'll want to make just the background of #header disappear and remove the user bar and the #nst part. This is done with,
#header {
background: none;
}
.user, #nst {
display: none;
}

You could even change the background of #header to your own background with,
#header {
background: url('IMAGE URL');
}

These are some other selectors related to the black wording and dropdown menus
#template_nav - controls the black wording on the nagivation. You can use margins to move them around.
li.nav_image - changes how close the black words are to each other
ul.dropdown - changes the background colour of the drop down menu, and also change the font and give it a border
li:hover ul.dropdown a - changes the colour of the links in the drop down menu
li:hover ul.dropdown a:hover - changes the colour of the links when you hover over them in the drop down menu

It is very important to note that even though I've been calling it "the black wording" it is not necessarily black for everyone. Both the Return of Doctor Sloth and the Faeries Ruin site themes actually have white wording! Make sure you don't make the background for the header white, otherwise some people will be unable to see your navigation.

modules

Modules are the individual boxes that userlookups have; which contain your stats, pets, trophies etc. They can all be easily controlled using CSS with their selectors to do what you'd like it to do and look exactly how you want it to look like.

There are a total of seven modules, and each of them have a name relating the modules. With the names you can control the modules! You should memorize all the modules name as you will be using them constantly.

Note: it is necessary to put .contentModuleTable after the module names. Why? It will not work properly in some browsers if you do not include it.

#userinfo .contentModuleTable
#usercollections .contentModuleTable
#usershop .contentModuleTable
#userneopets .contentModuleTable
#usertrophies .contentModuleTable *
#userneohome .contentModuleTable
#habitarium

* #usertrophies is kind of a weird module, and it will explained later in the guide.

An important thing to know is how to position the modules. It's very simple! There are five important components to positioning the modules and each and every part is necessary.

MODULENAME .contentModuleTable {
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 200px;
}

The first part is to put the name of the module that you would like to position.

Position allows you to position elements on a page. absolute is just one of of the many types of positioning. There is absolute positioning, relative positioning, and fixed positioning. Absolute positioning allows you position something anywhere on a page and it doesn't matter if something else is in the same spot. Relative positioning doesn't allow you to do that, and it positions things relative to something else. Fixed positioning, although very useful as it allows something to stay in the same spot no matter how much your scroll, doesn't work in Internet Explorer.

The top value lets you choose how far away you want the module from the very top of the page.
The left value lets you choose how far away you wan the module from the very left of the page.
Bottom and right also exist and you may want to use them depending on what kind of userlookup you're making, but it is best to use top and left because top and left does not differ based on your screen resolution, whereas everyone's bottom and right values differ depending on how big their screen is.

The width is how wide the module is.
The height is how long the module is.
It is very important to include the width and height of the module. You might not think it's necessary but module positioning will not work properly in some broswers if you don't include these two very essential parts.

.contentModule, .contentModuleTable, .contentModuleContent

There are three parts to a module, each seperated by a thin and hard to see border. The names of each part is: .contentModule, .contentModuleTable, .contentModuleContent. Since it's difficult to differentiate between them, I've coloured the borders so that you can easily see the difference between each of them with the picture to your right.

The blue border is the outermost border, and it's called .contentModule.
.contentModule {
border: 10px solid blue;
}
The green border is the one in the middle and it's called .contentModuleTable.
.contentModuleTable {
border: 10px solid green;
}
The red border is the innermost border and it's called .contentModuleContent.
.contentModuleContent {
border: 10px solid red;
}

So with these three names you can control both the border and background of the modules! For example to remove the borders use,
.contentModule, .contentModuleTable, .contentModuleContent {
border: none;
}

The shorthand for borders is the following:
border: WIDTH TYPE COLOUR;
Width: How thick the border is such as 2px or 10px
Type: The style of border: none, dotted, dashed, solid, double, groove, ridge, inset, outset.
Colour: The colour of the border, the hex code such as #ffffff or #000000

Now if you would like to give all the modules a background then all you need to do is give a background to .contentModule and .contentModuleContent. .contentModule fills the bottom part of the userinfo and usershop modules, while the .contentModuleContent fills the rest of the module for all the modules. .contentModuleTable doesn't appear to do anything.
.contentModule, .contentModuleContent {
background: #ffffff url('IMAGE URL');
}

To remove the background of the modules you can do that easily with,
.contentModule, .contentModuleTable, .contentModuleContent {
background: none;
}

Remember this applies to all the modules. If you would like to make certain modules different, then you use their specific name. Such as #userinfo .contentModuleTable. So that means you could give each module a different border and background for example using #userinfo .contentModuleContent {border: 20px solid #ffffff;} and #usercollections .contentModuleContent {border: 10px solid #000000;}

Now for the really fun stuff! Here's details on all seven modules.

2. #userinfo .contentModuleTable

This module can not be removed for any reason.

Shield: is allowed to replaced with a custom one. This is the code to change it,
#userinfo .contentModuleContent{
background: url('IMAGE URL') top right no-repeat;
}

#userinfo .medText img {
visibility: hidden;
}

#userinfo .medText table table img {
visibility: visible;
}

.contentModuleHeader is the name on this modules's header. Adding styles to this selector will affect only the userinfo box's header.

Click here to learn how to change the icons to your own images.

To change the font in only the userinfo module, simply add .medText after the module name. (capitalization is important)
#userinfo .medText {
font-size: 8pt;
color: red;
font-family: arial;
}

To remove the line above the icons, simply add
table {
border-top: 0px !important;
}

3. #usercollections .contentModuleTable

This module can not be removed for any reason.

Click here to learn how to change the icons to your own images.

.contentModuleHeaderAlt is the name of this modules's header. Adding styles to this selector affects all headers except the #userinfo header.

To change the font in only the #usercollections module, simply add .medText after the module name. (capitalization is important)
#usercollections .medText {
font-size: 8pt;
color: red;
font-family: arial;
}

To change the size of the images in the #usercollections module, add img after the module name.
#usercollections img {
width: 50px;
height: 50px;
}

4. #usershop .contentModuleTable

I think the general consensus is that this module may be removed, however a link must be provided to both your shop and gallery.

Remember you need to actually have a shop or gallery for this module to appear, which both cost neopoints to make.

Click here to learn how to change the icons to your own images. (just change #userinfo to #usershop)

.contentModuleHeaderAlt is the name of this modules's header. Adding styles to this selector affects all headers except the #userinfo header.

To change the font in only the #usershop module, simply add .medText after the module name. (capitalization is important)
#usershop .medText {
font-size: 8pt;
color: red;
font-family: arial;
}

To change the size of the images in the #usershop module, add img after the module name.
#usershop img {
width: 50px;
height: 50px;
}

5. #userneopets .contentModuleTable

This module can not be removed for any reason.

Pets go in alphabetical order. You can't change the order, other than making them go in the opposite direction with,
#userneopets {
direction: rtl;
}

.contentModuleHeaderAlt is the name of this modules's header. Adding styles to this selector affects all headers except the #userinfo header.

To change the font in only the #userneopets module, simply add .medText after the module name. (capitalization is important)
#userneopets .medText {
font-size: 8pt;
color: red;
font-family: arial;
}

To change the size of the images in the #userneopets module, add img after the module name.
#userneopets img {
width: 50px;
height: 50px;
}

6. #usertrophies .contentModuleTable

This module can not be removed for any reason.

.contentModuleHeaderAlt is the name of this modules's header. Adding styles to this selector affects all headers except the #userinfo header.

To change the font in only the #usertrophies module, simply add .medText after the module name. (capitalization is important)
#usertrophies .medText {
font-size: 8pt;
color: red;
font-family: arial;
}

To change the size of the images in the #usertrophies module, add img after the module name.
#usertrophies img {
width: 50px;
height: 50px;
}

* As I said in the modules section, #usertrophies is a weird module. It's very huge because of the large trophy images and the large text inside of it. So if you make the width 400px, it might not become 400px because of the images and text inside of it. To make the trophy module smaller in size, you need to make the images and text inside much smaller!

A neat thing you could also do with this module is make it scroll! This is very handy because the trophy module tends to be so big.

Although I said it is necessary to include .contentModuleTable for this module I don't think you need to if you make it scroll. So remove the .contentModuleTable after the #usertrophies part. After that, give the module a width, a height (with !important;) and then add overflow: auto; which will make the module scroll.
#usertrophies {
width: 300px;
height: 200px !important;
overflow: auto;
}

7. #userneohome .contentModuleTable

You seem to be allowed to remove this module. Provide a link to access the neohome if you do remove it.

.contentModuleHeaderAlt is the name of this modules's header. Adding styles to this selector affects all headers except the #userinfo header.

To change the font in only the #usertrophies module, simply add .medText after the module name. (capitalization is important)
#userneohome .medText {
font-size: 8pt;
color: red;
font-family: arial;
}

To change the size of the images in the #usertrophies module, add img after the module name.
#userneohome img {
width: 50px;
height: 50px;
}

If you want to remove it completely simply use,
#userneohome {
display: none;
}

8. #habitarium

You are allowed to remove this module.

.contentModuleHeaderAlt is the name of this modules's header. Adding styles to this selector affects all headers except the #userinfo header.

To change the font in only the #habitarium module, simply add .medText after the module name. (capitalization is important)
#habitarium .medText {
font-size: 8pt;
color: red;
font-family: arial;
}

To change the size of the images in the #habitarium module, add img after the module name.
#habitarium img {
width: 50px;
height: 50px;
}

If you want to remove it completely simply use,
#habitarium {
display: none;
}

12. #ncmall

You are allowed to remove this module.

.contentModuleHeaderAlt is the name of this modules's header. Adding styles to this selector affects all headers except the #userinfo header.

To change the font in only the #ncmall module, simply add .medText after the module name. (capitalization is important)
#ncmall .medText {
font-size: 8pt;
color: red;
font-family: arial;
}

To change the size of the images in the #habitarium module, add img after the module name.
#ncmall img {
width: 50px;
height: 50px;
}

If you want to remove it completely simply use,
#ncmall {
display: none;
}

9. #footer


This is the footer!

You can remove it with,
#footer {
display: none;
}

You could also use your own background,
#footer {
background: url('IMAGE URL');
}

10. body

Body is the grey background of the neopet layout. It is what appears on the sides of the neopets layout if you have a resolution larger than one that is 1027px in width. If you don't see it, just remember that it's there.
When you're adding a background: setting a background to body will only affect the grey portion. So if you don't see the grey part, you won't see the background at all, and if you do see the grey part it will only cover the grey part. If you would like it to cover the entire background, you need to remove #main (in the next section)

You can give it a background colour and image like this,
body {
background: #000000 url('IMAGE URL');
}





11. #main

#main the the white background part the layout. It also has a border on the left and right of it.

If you would like to give it a background colour and image then use:
#main {
background: #000000 url('IMAGE URL');
}

To change the borders use
#main {
border: 10px solid #000000;
}

As I said before, if you want your background to cover the entire lookup you need to remove #main. You can't actually use #main {display: none;} because that will make everything disappear so you simply need to make the background and border to disappear! This is the code to remove it,
#main {
background: none;
border: none;
}

That's it for the modules!

We are now finished with the important details about the modules. Go on to the next section, or take a look at the extra bits sections: it has some useful things you just might want to know!

Now logically I should end this paragraph now, but you see my layout does not appear to work properly if I do not put a whole lot of space under like I did below. Whatever works, right? D:


















changing default icons

The default icons images in the #userinfo and #usercollections module will sometimes really not match your layout. There is a method to change them to whatever you want! It's not so hard that it is time consuming. It's a little hard to explain the method I use but I'm going to give it a shot; let me know if you don't get it!

What you want to do is create a transparent image with your custom icons conveniantly in the correct positions. Then you hide the #userinfo/#usercollections images (but the original links will still be there, it's just the images that don't appear anymore). After that, you set your newly created image as a background for the module. This will make it so when you hover of the images, it seems like you can click them because the original links are still there!

1. The first step is to obtain the correct dimensions of the .contentModuleContent part of the module for #userinfo/#usercollections. I do this by temporarily changing the background colour of #userinfo/#usercollections module to a bright red colour. Remember this is simply to obtain the size of the module! (change #userinfo to #usercollections if you're doing it for the #usercollections module)
#userinfo .contentModuleContent {
background: red;
}
Take out the code immediatly after! Then take a screenshot of the #userinfo/#usercollection module with the red background. (the print screen button on window computers). Open up a program with layers, such as Photoshop or GIMP. Go to edit - paste (photoshop) or press CTRL-V on your keyboard to paste the screenshot into your graphics program.

2. The second step is to crop out everything in the screenshot EXCEPT for the red background.

3. The third step is place your custom icon images in the EXACT same places of the icons in the red part of the screenshot. Do this on a different layer directly above the screenshot. Don't forget to choose an image for your shield!

4. The forth step is to hide the screenshot layer. This is that all your have left are your custom images.

5. The image you have created is a perfectly sized image that fits your #userinfo .contentModuleContent and/or #usercollections .contentModuleContent. The fifth step is to find an image hosting website and upload your image. Make sure to take the direct link that the image host offers.

6. The sixth step is to make the original icons in the module disappear! This is done by setting the images to visibility: none;. After that you need to set your newly created image as the background for #userinfo .contentModuleContent and/or #usercollections .contentModuleContent. This is the code,
#userinfo img {
visibility: none;
}
#userinfo .contentModuleContent {
background: url('IMAGE URL');
}

Or if you're doing it for the collections module, it would instead be
#usercollections img {
visibility: none;
}
#usercollections .contentModuleContent {
background: url('IMAGE URL');
}

Now you have finished creating your custom icons! Hooray! You can also do this trick with the other modules. It would be particularly useful for the shop/gallery module where you can pick a shopkeeper that matches your layout just right. In that case, do the exact same steps and just use #usershop instead of #userinfo or #usercollections. Now I don't know if this is the best way to change icons, but it's the way that makes the most sense to me and I use it all the time, even though it's a little time consuming!







Navigation

For the average link, this is how you can edit the style of it in the CSS,
a:link - the link before you click/hover it
a:active - the link as you're clicking it
a:visited - the link after you've already click on it
a:hover - the link when you hover over it

For example if I wanted to have all my links look the same, except on hover, I could do
a:link, a:active, a:visited {
color: black;
font-size: 6pt;
text-decoration: none;
}
a:hover {
color: white;
font-size: 4pt;
text-decoration: underline;
}

If you get rid of the nagivation links, you have to have text links to all the links in the navigation instead. This is the basic link:
You need to link to everything in the navigation bar. Here you go if you don't feel like doing it yourself:


To customize the links, you need to give the links a class, and from that you will be able to edit it in the CSS. For example, in the HTML goes:

Then in the CSS to style it, you would use a.NAME and then put in whatever you want.


Customizing Text

If you would like to edit ALL the text on the userlookup, you could do,
.medText, body, td {
color: #ffffff;
font-size: 9pt;
font-family: georgia;
}
Where color is the colour of the text, font-size is the text, and font-family is the font type. These are just a few of the many properties and values that you can use to edit the text!

Background

Knowing how to code backgrounds is something very useful to know! Backgrounds for the whole page should be given to body, but it could also be given to anything else such as the modules #main, or divs. For my examples I'm just going to use body!

Since I'm doing it for body, I'm going to hide #main with: #main {background: none; border: none;}

This is every single background property you can have. I'm going to go through them and explain them all!

background-color: This allows you to select a background colour for the page. You can either use a color name like red or blue (no need for a number sign then) or you can use a hex code such as #da83e4 or #73ea5f. Even if you have a background image set, it's a good idea to set a background color so your viewer will see a nice background colour while the image is loading!

background-image: This allows you to set a background image for the page. The rest of the properties control how the image works!

background-position: top bottom center left and right are your choices. Choose the position of the background with the combination of two of the choices: Here are all the different combinations you could use: top left, top right, bottom left, bottom left, bottom right, top center, and bottom center.

background-repeat: repeat, repeat-x, repeat-y, and no-repeat are your possibilities. repeat means that the background repeats, and it does that by default. repeat-x means the background repeats along the x-axis so think horizon/horizontal. repeat-y means the background repeats on the y-axis so think vertical. no-repeat means that the background will not repeat.

background-attachment: scroll and fixed are your two options. By default its scroll so you don't need to set it to that. fixed is a very handy thing that lets the background scroll down with you as you go down the page.

Here is an example of something you can do. You obviously don't need to include every single part.



Now you might be thinking what a pain it is to have to write ALL that code! How many useful character space is being used up just doing the simple background! Then you'll be happy to know of something called shorthand. We can cut down all the background coding to just one line! Here's how it goes,

So with the above example, I could shorten it to,

Other stuff

!important; is something you saw in the #usertrophies section. According to W3 Schools, it is something "which overrides the corresponding declaration in the author's style sheet." It is my understanding that when you add !important; to something it means that property takes precedence over the default neopet coding. It's useful in some situations! Here is an example of where it's used,
#usertrophies {
width: 500px;
height: 400px !important;
overflow: auto;
}

Opacity doesn't work anymore because of the filter change on userlookups. /cry

The nicklodean bar only appears on the preview page. It's not on your actual lookup. If it bugs you while you're coding your userlookup, you can use this to remove it,
.brand-mamabar {
display: none;
}

If a part of the neopets layout suddenly appears at the top of the userlookup, you need to remove it with
#ban {
display: none;
}
#main {
margin-top: 0px;
}
I believe it has something to do with the ads, and you might not see it if you have adblock. The margin will stop the userlookup from shifting up.

Making Centered Userlookups

In my example in the next section, my layout is aligned to the left of the screen. I thought it would be appropriate to mention how to properly make a centered layout if you wanted to make your userlookup centered, instead of left aligned.

First, take a look at your layout image, and then look at its width and height. For example my layout is is 900px in width and 1255px in height. What you have to do is set your layout image as a background for #main, and give #main the same width and height as your layout image just like this:

It is as simple as that! Do not create a div for image, because we're just going to take advantage of the fact that #main is already centered and the fact that modules are absolute positioned based on the top left corner of #main which is in the center. If you do create a div instead of using this #main background trick, then there might be an horizontal sidescroll at the bottom of the screen, and no one likes that. :c

If you came here from the example section to learn how to do centered layouts, simply click here to go on to the next step and learn how to move around modules!

End

Now that you've learned the concepts, it's time to put your new knowledge to good use. Make your layout in a graphics program, and then code away. The next section has some graphic tutorials for photoshop, and the section after that is where I go through a userlookup and show you how my brain works when I code a userlookup. Keep in mind that my goal is not to teach you how to make a specific type of layout, but give you general knowledge so you can make whatever you want!

Acknowledgements

Coding Help by Kitty: The amazing site where I first learned to code lookups! Since that is where I learned everything I know, I'm sure you can find countless similarities, however I did not copy anything directly!
Amy's CSS tutorial: I referenced it heavily for the navigation and background sections, because that's where I learned it and wasn't quite sure how to explain it without some help!
Joan: For kindly allowing me to use her lookup for my tutorial + for all the support. :D
Rosina: Thanks for your opinions when I needed them! :D

Back to top






In this section I was going to put a graphic tutorial but after doing it three times and not being satisfied and realizing how useless it really was I decided against it. Instead I will have a few general graphic tutorials that people tend to be interested in.

Feathering
Using textures
Downloading and using brushes
Gradients
Outlining
Scanlines
Overlays/Layer Styles
Selective Colouring/contrast/stuff

The next step, after creating a layout, is to code it. This section will show you how my mind works when I code userlookups, such as how I do things and what order I do them in. To show you this, I've created a very basic userlookup with some boxes to postion the modules in, and you can see I go about coding it.

1. Style tags

My first step is to write the opening and closing style tags. This creates a stylesheet which can control all the elements on a userlookup. The CSS codes from the Lookup Concepts section will go between these two tags. There's no reason to alter the style tags since nothing important (like position) is blocked any longer. HTML codes will be placed right after the closing style tag. It's important to note, you only need to have one pair of style tags.



2. Removal of certain elements

I look at a userlookup and think to myself, what should I keep and what do I want to remove?
I think about it, and decide what I want in the end is just the modules and the header. This means that I have to get rid of every thing else.
Immediatly the footer and the nickolodeon bar comes to mind. From experience I know I have to remove the #ban so I do it now. This will cause the #main to shift up, which will be solved later with a quick margin code. Next I like to remove the unappealing lines in all the modules.
I'll keep the neopets navigation because it'll be part of my layout, but if want to remove #header, include it in the list yourself.


3. Dealing with #main

The next part I would like to remove is the white part called #main. Because we can not use #main {display: none;} to remove (as it will just remove absolutely everything) you need to make seem like it's not there. You can do this easily by removing the white background, and the borders from #main,


What's next is to deal with the positioning of #main. You have to understand that #main is a centered column that is 1027px in width. The modules are positioned in terms of the very top left corner of #main. Even if you set the top and left value of a module to 0px, it will only be the top corner of #main which will still be somewhere in the center. What I like to do is make it so #main is positioned to the very left and very top of the screen, so that all the modules will positioned in terms of the left and right of the screen.

Note!: If you want to make your layout centered, IGNORE this following part and also the next section about inserting the image and instead read the centered section. But if you don't want it centered, let's continue!

It's also important to set #main to margin-top: 0px; because earlier when I removed #ban that made #main shift up, and setting it to this will make it go back to normal.

You could also leave #main centered by not including margin-left: 0px; to it so that your whole userlookup is centered which is always nice! For the example though, I'll be positioning it to the left.


4. Removing of other elements

Next I ask myself again, what else do I want to remove? Well in the #header, all I want is the navigation and drop down menus. This means I will remove the background from #header, and the .user bar and the #nst time. After that, I think to myself how I don't like the white backgrounds and all the borders arond the mdoules. I will easily remove them all in one go. Each of the modules have a header with its name, I decide I don't want it because I already have titles for the modules on my layout image.


5. Inserting the image

Now I'm satisfied; I've removed the main bulk of the neopets layout. It's time to insert the layout image on to the userlookup. What I do is place the image code inside of a div which I absolute position with CSS. This will require a combination of both HTML and CSS.

This is the HTML component. Notice the word id. In the CSS world, an ID is something which has a name, and a number sign #. IDs are used to create layouts. Think of it like your personal identification. It a unique ID that only you have. This means that one ID will only appear once on a layout. This compares to div classes which have a name and a period in front of it. Think of those like "there are many people in a class". Classes are used multiple times on a layout.

For this example, logically we only want the image to appear once so we'll use a div id instead of a div class. After that, notice how I place the image code inside of the div.

Next is the CSS component which is connected to the HTML. This will go inside the style tags, unlike the HTML part. Notice the # and the word image will correspond to the HTML. I'm going to position the image right in the very top left corner.


6. Changing the position of the modules

Now comes the time to MOVE the MODULES around. This is a pretty tedious process. I'm going to be dealing with #userinfo, #usecollections, #usershop, #userneopets and #usertrophies. Keep in mind, I'm not removing the #neohome and #habitarium modules because I do not have them in the first place. If you have them and want to remove them, make sure you do so with #habitarium, #userneohome {display: none;}.

To figure out all the numbers and heights and widths and what not, you'll need to use trial and error. A graphics program like Photoshop can certainly quicken the process and make it easier to figure out the widths and heights of the modules.


7. Modules that don't quite fit.

Now whatever I do, I just can't make the #userneopets and #usertrophies module fit in the their boxes. Oh, despair. This will happen, either the layout boxes are twoo small, the modules are just too large, or maybe you just want the modules small.

What you have to do is play around with the size of the module images and the text inside of the modules. I could easily make the #userneopets module fit by decreasing the size of the images. I also made the size of the #usertrophies module smaller.

The #usertrophies still didn't want to fit. I thought about making the module scroll, so I went ahead and removed the .contentModuleTable part from the CSS code I already had from the last section. Then I added overflow: auto; to it and then added !important; next to height. This made the trophies module fit, and it scrolls now!


8. Inserting a textbox

I have an about me box, so I'm going to insert a textbox into that location. It is similar to how you inserted the image, but instead of having an image inside of the div, you'll have text. Again, we'll use an ID because there will only be on textbox about me on the page. I will also add a width, height, and overflow: auto; to the code because they are necessary for a scrolling textbox.
This is the HTML component. Notice it is an id called textbox. The text is called Lorem ipsum its just filler text. Remember if you don't have enough text, the textbox won't scroll.

This is the CSS component. Notice the # and the word textbox which corresponds to the HTML.

9. The navigation

Now I will deal with the navigation. I notice it isn't in the correct place so I move it. Then I notice how it still doesn't fit, so I squish it so it does fit into the box I made.

Next, I will change the colours of the navigation to better match my layout. The first part controls the background and border of the drop down menus. The next code controls the colour of the drop down menu links. Then the last code controls the link colours when you hover over them.

Obviously if you didn't keep the #header originally, this coding won't apply for you. However I had a section on navigation in the Lookup Concepts section, so take a look at it and make your own navigation. It will be coded in a similar way to the #textbox and #image but there will be links instead of text or image.


10. Background

After that, I will change the background to match the layout. In my case, I will use a repeating background on the x-axis along with a solid colour. I explained backgrounds in detail in the lookup concepts so take a look at it to review.


11. Changing the icons

The very last step I will do is change the icons to my own so they match better. My very last step is to change the icons so they match my grey layout better. This is also explained in the lookup concepts so take a look at it to understand how I'm doing this.

I then notice how the white line in the userinfo box looks real bad, so I will remove it with,




Hooray! I have finished coding my userlookup! This is the whole userlookup coding if you'd like to see it:

Acknowledgements

Coding Help by Kitty: The amazing site where I first learned to code lookups! Since that is where I learned everything I know, I'm sure you can find countless similarities, however I did not copy anything directly!
Amy's CSS tutorial: I referenced it heavily for the navigation and background sections, because that's where I learned it and wasn't quite sure how to explain it without some help!
Joan: For kindly allowing me to use her lookup for my tutorial + for all the support. :D
Rosina: Thanks for your opinions when I needed them! :D

Back to top

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

ROKUDO MUKORO
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Sensible coding written completely by moondust_
If you try to take it, I'm not sure if you'd understand it lol. reborn ftw.



Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2017.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions