Figmint designs goodly designs for the average tasteful chap

make a userlookup

This tutorial will not require much coding skill. The outcome will be a userlookup displaying your userstats, neopets, and a space for writing about yourself. Here's the template we're going to use.

First, copy and paste the image above into a program like photoshop (or the lowly MS Paint, if you have nothing else). Then, edit it to your liking. The white boxes show where the different parts of the layout will be, so don't move those. You can change their color though, and remove the text.

Here's my finished image. Save it as a gif, png, or jpeg, and upload it to the internet with a website like tinypic or imageshack.

When you upload an image with those sites, they give you an obnoxiously large number of urls to chose from. We're going to use the one called "Direct Link" or "Direct Link for Layouts".

Now we're going to begin coding our layout. Go to the page where you edit your userinfo (here). Scroll down to the bottom and type this into the description box.

<style >

That says that we're going to be writing in the language CSS. Next, add these lines. (Feel free to copy and paste.)

.contentModuleContent, #main {background: none;}
.contentModuleTable, .contentModule, #main{border:none;}
#footer, #header, hr, #usercollections, #usershop, #userneohome, #usertrophies {display:none;}

Different parts of a webpage are given different names. For example, in the first line ".contentModuleContent" is the name for the boxes that contain your shop collections, neopets, trophies and other information. "#main" is another one of these names. Its the centered area of a neopets webpage where all the page content is, and on either side is a dark grey border.

The above lines of codes give us a clean slate to work with. The first line says that .contentModuleCont and #main should have no background color. The second line says that some other parts of the page shouldn't have a border, and the last line hides parts of the layout we don't want to see, like the drop down menu at the top, and the userlookup information we don't have a place for.

Add:

< style />

to the very end, and that closes the <style > from before. Now you can click the Preview Lookup link and watch the layout coming along.

The next important thing to do is positon the user stats (#userinfo) section, the neopets section (#userneopets) and the about you section. That one doesn't exist yet, but in the code below I've created it and named it #about.

Paste this code in before the < style />. If you're wondering, the "#userneopets img" part makes the pictures of your pets smaller so they fit in the foolishly small box I made on the template.

#userinfo{
position:absolute; 
top:385px; 
left:350px; 
width:500px; 
max-height:480px; 
overflow:hidden; 
z-index:1;
}

#userneopets{
position:absolute; 
top:150px; 
left:350px; 
width:500px; 
height:200px;
}

#userneopets img{
width:100px;
height:100px;
}

#about{
position:absolute; 
top:142px; 
left:35px; 
width:295px; 
height:724px; 
overflow:auto; 
text-align:left;
}

You may be wondering, what became of our image? The next piece of code deals with that. First, it positions the image in the top left corner of the page. Then it says its length and width, and finally sets the image as the background of the element "#image". This is so it won't cover up the text parts of the page.

To make your image appear, paste in the url (yes, that "Direct Link" thing from way back when) where it says HERE, in the code below. (Delete the HERE.)

#image{
position:absolute;
top:0px;
left:0px;
width:900px;
height:900px;
background:url('HERE');
}

Now, in a normal layout, this style stuff would go at the beginning, and the place where you type your about me things would come after. However, neopets has some stupid filters, as I'm sure you are aware, and they do not allow such correct behaviour, so we're going to the top of the description box now, before even our opening style tag!

By the way, if you want to make sure you haven't messed up, here's what you should have so far.

<style >

.contentModuleContent, #main {background: none;}
.contentModuleTable,.contentModule, #main{border:none;}
#footer,#header,hr, #usercollections,#usershop,#userneohome,#usertrophies{display:none;}


#userinfo{
position:absolute;
top:385px;
left:350px;
width:500px;
max-height:480px;
overflow:hidden;
z-index:1;
}

#userneopets{
position:absolute;
top:150px;
left:350px;
width:500px;
height:200px;
}

#about{
position:absolute;
top:142px;
left:35px;
width:295px;
height:724px;
overflow:auto;
text-align:left;
}

#userneopets img{
width:100px;
height:100px;
}

#image{
position:absolute;
top:0px;
left:0px;
width:900px;
height:900px;
background:url('http://figmint.zzl.org/images/tut/image.png');
}


< style />

Wow! If you don't know how to code, you must be feeling really smart right now (or really confused)!

So, back to the top with ye. The code below is the final piece. It will make your image appear, and it gives you a place to write stuff.

<div id="image">
<div id="about">


Write here.


</div>

Heh heh heh. We're not done yet though. If you preview the layout, its certainly not spiffy enough for my standards. Here's what mine looks like.

You can see we need a background color, and we might want to fix up the headers. First, to change the background color, we use this code:

body{
background-color:black;
}

My background color is going to be black, but for your layout it can be whatever you want. Just replace the word "black" with a different color (or even a hexidecimal value like #F0F0F0, if you know what those are). As usual, paste this in between the style tags.

Next, we're going to make the headers look spiffy. Neopets has created a few different kinds of headers, and they have different names. One a normal webpage, a header's name would be "h1". Here on neopets you can still use h1, but there are also ".contentModuleHeader", ".contentModuleHeaderAlt", and ".header". With the code below, you can change different aspects of the headers.

.contentModuleHeader, .contentModuleHeaderAlt, .header, h1{
background-color:black;
color:white;
font-size:20px;
line-height:22px;
font-weight:bold;
padding:2px;
font-family:georgia;
}

Change the values in the code above to whatever you want. (Values are the words and numbers between the : and ;).

• Background-color is self explanatory, and color is the font color.
• Font-weight can be changed to "normal" if you don't want the headers to be bold.
• Font size is the size of the font, and the line-height affects the space between each line of text.
• Padding I would leave alone since its the space between the text and the edge of it's background color, and 2 pixels is a good amount.
• Font-family is asking for the name of the font you want the headers to have. Above it is georgia, but you can change that to any font name.

If you know more CSS, feel free to spiff it up even more, but thats all I'm going to do through with the headers.

Now, to make a header appear in your about me section, just use the following code. Replace Title with whatever you want the header to say.

<h1>Title</h1>

Remember, that bit of code goes where you write about youself, not between the style tags.

You might want to change the font of the regular text, and if so include this, and edit the values like you did for the headers.

#about, #userneopets, #userinfo, body{
color:white;
font-size:12px;
line-height:15px;
font-family:georgia;
}

You might not be able to edit all the properties of your userinfo or userneopets, but that's just neopets' problem. In any case, you can still make the layout look really cool! Here's my finished layout with it's code. If you found this tutorial helpful, why not link back to figmint?

<div id="image">
<div id="about">

<h1>Header</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec massa nulla, non aliquet diam. Integer id lectus vel leo sodales facilisis sit amet et mi. Vivamus tempor nisl sed nunc bibendum ac commodo dolor blandit. Curabitur turpis purus, imperdiet vitae pellentesque sit amet, lobortis eu urna. Suspendisse fringilla erat venenatis lectus tempus dictum. Pellentesque sollicitudin lacus eu nibh congue in facilisis justo euismod. 


<p>Aliquam quis eros urna. Vestibulum eu posuere metus. Morbi magna magna, volutpat a mattis vitae, tempor nec erat. Duis molestie cursus dui, vitae adipiscing justo pulvinar dictum. Phasellus fringilla aliquet lacus, eget dapibus mauris pellentesque vitae. Pellentesque et semper odio. Ut a risus sapien.

<p>Phasellus sed felis tempus tellus lacinia sagittis ut eget arcu. Morbi gravida, eros eu viverra ornare, nisi erat iaculis sem, et dignissim risus turpis ut velit. Pellentesque non purus magna. Quisque eget tortor libero. Donec molestie purus non risus suscipit laoreet. Sed egestas facilisis odio, id congue massa ullamcorper feugiat.


</div>

<style >

.contentModuleContent, #main {background: none;}
.contentModuleTable,.contentModule, #main{border:none;}
#footer,#header,hr, #usercollections,#usershop,#userneohome,#usertrophies{display:none;}
#userinfo img { display:none; }
.contentModule, .contentModuleTable, .medText { border:0px; }
#userinfo .medText .medText .medText { display:none;}


#userinfo{
position:absolute;
top:385px;
left:350px;
width:500px;
max-height:480px;
overflow:hidden;
z-index:1;
}

#userneopets{
position:absolute;
top:150px;
left:350px;
width:500px;
height:200px;
}

#userneopets img{
width:100px;
height:100px;
}

body{
background-color:#000000;
}

#about, #userneopets, #userinfo, body{
font-size:11px;
line-height:15px;
}

#about{
position:absolute;
top:142px;
left:35px;
width:295px;
height:724px;
overflow:auto;
text-align:left;
}

#image{
position:absolute;
top:0px;
left:0px;
width:900px;
height:900px;
background:url('http://figmint.zzl.org/images/tut/image.png');
}

.contentModuleHeader, .contentModuleHeaderAlt, .header, h1{
background-color:#000000;color:#56D7F4;font-size:20px;font-weight:bold;line-height:22px;
padding:2px;
}

< style />

Latest News:

ChatBox

Partners

Affiliates

Links

Change Skins