Intervener got their homepage at Neopets.com

Welcome

TULT was made by Mouze (mjohan7) for the use of more advanced CSS/HTML users. If you're new to Cascading Style Sheets and HyperText Markup Language, this site isn't for you. I advise you to go here.

Having trouble reading the font? press control + !

link back

affies

This is the lookups section!

coding rules

1. You can not remove/hide/replace any of the content modules except the neohome module. *
2. Never make your layout wider than 1000px :)
3. Brush up on colour scheming. We don't want your viewers eyes to burn, now do we?
4. Don't space out your content modules too far apart. More scrolling = impatience.
5. Try not to make your divs too small. Overflow on the X axis is disliked, unless the layout was designed for that. 6 Try not to use page anchors, TNT seems to randomly crack down on this type of layout.

Rules marked with a * are rules made by TNT.

basics

First, click here to learn the basics of CSS. :)

Note, if you don't know the basics of CSS, you will not be able to understand the following!

This is the base code that we're going to use. :) Of course, you will be putting this in style tags, yes?
Base Code:

#header, #footer { display:none;}
#main { border:0px; background:none;}

body {
background-image: url();
background-color: #FFF;
background-repeat: repeat;

font:11px Tahoma;
color:#000;
line-height:13px;
}

Now that you have that, I'll explain it some.

#header, #footer { display:none;}	This is for getting rid of the top and bottom default Neopets bars
#main { border:0px; background:none;}	This is for making the center box (the white box in between the default bars) have no background so the main body background shows and have no border.
body {	starts the body info
background-image: url();	gives you the choice of having an image for your background
background-color: #FFF;	changes the colour of the background
background-repeat: ;	gives you a choice of making the background image repeat, to make it repeat vertically, you enter repeat-y. For a horizontal repeat, repeat-x. For a whole page repeat, repeat. For no repeat, no-repeat.
}	ends
font:11px Tahoma;	changes the font size and face
color:#000;	changes the font's colour
line-height:13px;	changes the spacing between the lines (includes the height of the type itself)
}	ends

Below is a chart of important ids/classes, meanings, and usages

Name	Meaning	Usages
.contentModule	one of the outside borders of each module	border:none; gets rid of one of the borders around each module
.contentModuleContent	-	-
.contentModuleTable	same	border:none; gets rid of one of the borders around each module background:none; gets rid of the white background
#userinfo	the user info table	use absolute, fixed, or relative positioning to move around on page
#usercollections	the collections table	use absolute, fixed, or relative positioning to move around on page
#usershop	the shop&gallery table	use absolute, fixed, or relative positioning to move around on page
#userneopets	the pets table	use absolute, fixed, or relative positioning to move around on page
#userneohome	the neohome table	use absolute, fixed, or relative positioning to move around on page
#usertrophies	the trophies table	use absolute, fixed, or relative positioning to move around on page
.contentModuleHeader	the user info header	edit background, border, font, etc.
.contentModuleHeaderAlt	every header EXCEPT the user info header	same
#userneopets img	the image in the neopets table	change height, width, border, etc.
.content	the text inside the main div	change background, font, font colour, etc.
#main	the white box between the top and bottom neopets bars.	change border, background, width, etc.
.brand-mamabar,.brand-mamabar-wrapper,.brand-mamabar-list	the Nickelodeon bar at the top	display:none; to remove - you have to use all three selectors
#bar	If you remove this, it will get rid of the ad at the top.	Remove with display:none; Make sure to add margin-top:0px; to the #main div if you do, or margin:0px; (if the layout is using absolute positioning.

Add your own navigation with this:

This, of course is the petpage section. :)

coding rules

1. There is a minor rule that you are not allowed to hide/remove the top default neopets bar. Take note. *
2. Make sure your content is well organized.
3. Similar rules that apply on lookups should apply on petpages as well. Although petpages have a lot more flexibility in design.

basics

To learn a bit about coding, click here, here, and here!

Try to organize your coding and styling when you make your layout. You have plenty of character space, no worries. :)
Example of GOOD organization:

#first_box {
position: abolute;
top: 25px;
left: 52px;
width: 420px;
height: 250px;
overflow: auto;
}

#bob {
font: 51px Georgia;
background-color: #545454;
}

.air {
font: 25px Century;
border-bottom: 1px solid #FFF;
color: #000;
display: block;
}

BAD organization:

#nom{width:23px;height:54px overflow:auto;}#haha{position:fixed;} #eatu {width:980px;top:54px; }

You just can't read that! :O

this is the FAQ section.

User Lookups FAQ

Basics

This is the lookups section!

graphic rules

1.
2.
3.
4.
5.

vs.

coming soon

This, of course is the petpage section. :)

graphic rules

coming soon

basics

coming soon

This is the lookups section!

graphic rules

1.
2.
3.
4.
5.

vs.

coming soon

This, of course is the pet lookup section. :)

graphic rules

coming soon

basics

coming soon