About

Hi. (: This is a css references page. This means that there will be codes that you can use to modify your css, including adding a background or adding borders. This is not an intro guide to css. It won't help you at all if you don't have a clue on what css is.

I'm going to make sure that all these codes are usable in the newest stable version of major browsers - IE7, Firefox 2, Opera 9, and Safari 3 (okay, this is beta for Windows). If the browser doesn't support the code, but there's an alternate version for it, then I'll post it here. And for CSS3, I'll just ignore IE.

This page will also be about which codes work on neopets. Neopets has their filter that restricts many things, and sadly some useful and harmless things. I won't include those here. Also, most codes will cover what you can do in lookups, not any other part of neopets.

Notes on codes on the bottom:
- if something has [default] in it, it means that it will be useless to add it to your css since it's already applied.
- in the use part of every attribute, every option/value is separated by a comma (as in don't copy all of that. Edit it.

Updates

3/30 Finished everything except for search. Oh, and since neopets is annoying, all greater and less than signs are images now.

3/5 Finished basic html section.

3/1 Was bored. Therefore, version 1.1: neon.

3/1 Added html, b/i/u, and a.

2/23 Added this section. (I knew I forgot something. XD) Added outline subsection in the customization section. Finished all the CSS sections.

Customization

background

Use: background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position] Note that not all of these properties have to be included in background.

Backgrounds are very important. They're the color behind everything. It's especially important if your page has nothing on it because all you would see on your page is your background. So use this or your background will probably be gray (/grey) or white. And that's bland, boring, and stupid. All the values for background are explained below. (Don't individually use the properties below. Just use the shortcut above.)

background-color

Use: background-color:#hexcode, colorname, transparent

The color of your background (obviously.) Use a color hex code (or a color name...which would be annoying. I mean, there's colors like moccasin, mistyrose, navajowhite, and lemonchiffon. Seriously. Who named these things?) ^

background-image

Use: background-image:url(url)

Put a background image. Since this is neopets, the background would most likely be stripes. So put those. Just as long as you don't put those seizure backgrounds or backgrounds with 43290428 sparkles and ugly when repeated. ^

background-repeat

Use: background-repeat:repeat[default], repeat-x, repeat-y, no-repeat

Self explanatory. Again. Make the background repeat. Repeat is to repeat everywhere on your -blocked- Repeat-x is to repeat horizontally. Repeat-y is to repeat vertically. No-repeat is to not repeat (am I getting repetitive?) ^

background-attachment

Use: background-attachment: scroll[default], fixed

This one isn't as obvious as the other ones above. But it's not hard to understand. Scroll means that the background moves with your page, and fixed means that your background doesn't budge even if you're scrolling through the page and your text moves. By the way, just ignore this if you're using a background-color. You can't tell if your background is fixed or not with one single color. ^

background-position

Use: background-position: [top, center, bottom] [left, center, right] (top left is default), x[unit] y[unit]

Where your background is. It probably won't matter if your background is if you use repeat for background-repeat. If you're using no-repeat, then it does. Usually, it's on the corners, so either top left, top right, bottom left, or bottom right. Mostly, it's in bottom right. You can also use x[unit] y[unit] or x% y% to get it anywhere. You'll most likely have no use for this. ^

border/-left/-right/-top/-bottom

Use: border: [border-width] [border-style] [border-color]

Borders surround something and make an outline. (When I get to outline, I'll say the opposite. Don't worry.) By using border, you surround everything. As in all four sides. When using border, you can not set the borders for each side separately. Border-left is a border on the left, border-right is on right, border-top is on top, border-bottom is on bottom. ^

border-width

Use: border-width: thin/medium/thick, #[unit]

Border widths are how thick the border is. This is 1px. This is thick. ^

border-style

Use: border-style: solid, dashed, dotted, double, groove, ridge, inset, outset, hidden

Border styles are wild. Look.
Solid. Dashed. Dotted. Double Groove. Ridge. Inset. Outset. None.
And yes. Borders look uglier when bigger than 1px or so. ^

border-color

Use: border-color:#hex, colorname

Define color. ^

outline

Use: outline:[outline-color] [outline-style] [outline-width]

Outline is the exact same thing as border, but with two differences.
1. it's part of the box (...see below.)
2. you can't adjust it by sides (so nothing like outline-left, outline-top, etc.)
So outline's pretty useful. Except it's not supported in IE. Ha. D: ^

the box

Before we get into the box attributes, lets talk about the box. The box is a container. which is a box.

...okay. So that didn't help at all. Let's try again. A box is this invisible thing unless you add a border around it. It's basically a rectangle that you can move around and make bigger/smaller. Now I shall stop since I'd end up confusing everyone. Let's start the list.

position

Use: position: static[default], absolute, relative, fixed

Position is annoying. I remember reading the w3 css2 specification docs and it confused me so much with words like "regular flow". So. Whatever. Position means where the box is in a very general way. Let's start with static. Static is default. Basically, static means where something would be if you left it alone and didn't do anything with it. So it doesn't mean much. Now absolute. Position:absolute is possibly one of the most useful neopets lookup codes. It means that you can manually position the object with bottom/top/right/left (more on that later). The top left corner of the screen is top:0 and left:0 usually. There are some exceptions, but I haven't figured that out yet. Also, note that if something has position:absolute, it means that it won't affect any static elements. Position:relative is the most annoying thing ever. It is positioned with where it would be if it was static as top:0 and left:0. Position:fixed is a hybrid of position:absolute and background-position:fixed. It's just there and it's annoying. It's like the car parked in the front of your house that was stolen and just parked there, and won't move for weeks. So only use it if you know how. ^

bottom/top/right/left

Use: top/left/right/bottom: #[unit], auto

First, note that you can only use this if your position isn't static. For position:absolute, top counts from the top, left counts from the left, right counts from the right, bottom counts from the bottom up. For position:relative, top counts down from your starting point, and left counts right from your starting point. So basically, write the direction from with part of the screen you're going from and where you're going towards to. ^

width/height

Use: width:#[unit]; height:#[unit]

Self-explanatory. Width goes horizontal. Height goes vertical. The bigger the number, the wider/taller it is. Note: min/max-width/height doesn't work in neo, and I won't talk about it because I don't really understand it. I mean, I do, but I never tried so I don't care. ^

margin

Use: margin:[margin-top] [margin-right] [margin-bottom] [margin-left] (#[unit], auto)

Margins and padding confuse me a lot. I don't know what's what. So um. Time to explain. When you increase margin, you increase the space from outside the box. So the margin's everything outside the box that can also move the box. How nice. What's the point of this? If you have a border, margin makes the stuff outside the border not touch the border (or jump). Hopefully this makes sense. Once again, use percentage, a unit, or auto for finding out the margin. Margins can be combined into one number for all four sides, two numbers for top/right and bottom/left (not sure about this xD) or you can write the numbers for all four sides. But anyway. It's nicer than borders. ^

padding

Use: padding:[padding-top] [padding-right] [padding-bottom] [padding-left] (#[unit], auto)

Padding is like margin, except it's inside the box, not outside. So the stuff inside the box won't touch the border if you add padding. If you're confused, read above. If you're still confused, then...oops. ^

overflow

Use: overflow: visible[default], auto, hidden

Overflow sets what would happen if things in the box overflowed out of the box. Here are examples:

This is with overflow:visible. As you can see, text should overflow out from the box.
This is with overflow:auto. As you can see, text should have a scrollbar when it overflows.
This is with overflow:hidden. As you can see, text should not overflow out of the box.

z-index

Use: z-index: #

Z-index shows what should be under/over what. If you want something over something else, then use z-index to do it. It's kind of like how you have an t-shirt and a shirt under, and you put the t-shirt as z-index: 2 and the undershirt as z-index:1 because you want the t-shirt over the undershirt. (I know, now it feels like you're reading that ruby tutorial with all those comics with like monkeys and stuff. Yeah, I don't understand it. ;_;) ^

vertical-align

Use: vertical-align: baseline[default], sub, super, top, text-top, middle, bottom, text-bottom, #[unit]

I don't like vertical-align. It doesn't work for vertically centering a layout. Bleh. But I'll show you examples of how it works.
Baseline: -invalid_words- Sub: Super: Top: Text-top: Middle: Bottom: Text-bottom: ^

Text

font

Use: font: [font-weight] [font-style] [font-size][/line-height] [font-family] [font-variant]

Let's googledefine font! "In typography, a font is traditionally defined as a complete character set of a single size of a particular typeface. For example, all characters for 9 point Bulmer is a font, and the 10 point size would be another font." Whatever. Anyway, you can do stuff to fonts. Look down. ^

font-weight

Use: font-weight: normal[default], bold, bolder, lighter, [1-9]00

Font-weight is to see how bold your font is. Normal.Bold.Bolder.Lighter. You probably can't see much because of the small font. *shrug* ^

font-style

Use: font-style: normal[default], italic, oblique

Sets style of the font. I have no idea what oblique means. Let's see what happens! Oblique! Italics! Normal! Yay! ^

font-size

Use: font-size: [adjective (use a shirt size)], #[unit]

Font size is how big your font is. I think that this is kind of obvious. ^

line-height

Use: line-height: normal[default], #, #[unit]

How high each line is. If the line-height is small, then it's all bunched together. If it's big, then there's like a really big amount of space. Thinking of it like single spaced, double spaced, 1.5 spaced, whatever you have to do when you write an essay or report or whatever. ^

font-family

Use: font-family: [font name]

This page is in Arial. Neopets uses Verdana a lot. Headers here are using century gothic. Etc, etc. Have fun. ^

font-variant

Use: font-variant: normal[default], small-caps

Let's try it and see what happens. This is with small-caps. ^

color

Use: color: background-color:#hexcode, colorname, rgb(#,#,#)

See background-color I guess. And rgb is how much red, green, and blue there is. From 0 to 255. It's the same as hex code for the people that can't count in base 16. ^

letter-spacing

Use: letter-spacing: normal[default], #[unit]

Letter-spacing sets the spacing between letters. So this is the way you get those really scrunched up or spread out letters. This should be scrunched up (-1px). This should be spread out (1px). ^

text-align

Use: text-align:left[default], center, right

I think that this is self-explanatory enough. :|

Left
Center
Right ^

text-decoration

Use: text-decoration: none[default], underline[link default], overline, line-through, blink

Text-decoration doesn't really decorate your text. That's called border. But it kind of I guess. Basically, all it does is make a line near your text. Just so you know, you can stack these properties. Examples: Underline. Overline. Line-through (this should be renamed to strikethrough.) Blink. HA I'M FAMOUS I'M TAKING THE WHOLE SPOTLIGHT YAY. Underline overline (let's stack!) ^

text-indent

Use: text-indent: #[unit]

This should indent your text. Like how it's indented now. Yes. I'm serious. Those aren't just spaces, they're much more. Because um. Yeah. xP ^

text-transform

Use: text-transform:capitalize, uppercase, lowercase

This is for the lazy people. As in those people who want to look professional out of their code. Fake people use text-transform:capitalize because they think that they're professional by capitalizing every word. No. That's just wrong. This makes everything uppercase as if you're shouting at someone. When everything's lowercased, you seem very lazy. Seriously. ^

white-space

Use: white-space:normal[default], pre, nowrap

This kind of shows your form in your lookup. White-space is kind of confusing in a way. (Actually, it isn't. It just seems like it. I dunno.) So. Let's start with pre.

Pre means that what I'm tying will look like the code. I will now press the enter key twice without inserting any brs. Look! : D

Anyway. All nowrap does is that it doesn't wrap the text. It's pretty annoying actually. ^

word-spacing

Use: word-spacing: normal, #[unit]

This is pretty simple. It spaces out the words. Not the letters. Words now should be spaced 4px apart. I know, it can be annoying and look foreign. ^

Misc

Visibility

Use: visibility: visible[default], hidden, collapse

I should really start with display first, but display is such a pain. So what visibility does is the option to make your content visible or not. Simple, right? D: visibility:visible makes it visible. visibility:hidden makes this invisible. Ha. You can't see the text on the right. :P Collapse is used in tables. ^

display

Use: display: inline[default], none, block, list-item, inline-block, table, run-in, compact

Display is confusing. It's very important when making lookups though. So. Let's start with the three main ones: inline, block, and none. Inline is default. It means that elements are placed inline, so they can be like next to each other. Block is weird. It means that elements are placed on top of each other, kind of like paragraphs and headers. An example is the navigation of this page. None means that the element disappears. It's not just invisible - it's not there! The other one that's supported in all browsers is list-item which makes it a list (surprise!) Inline-block is compatible in all browsers except for firefox (which is weird), but you can use an alternate mozilla-only property for that: display:-moz-inline-box, which is basically the same thing but weirder for some reason. What this does is make it inline, but act like a block. Table makes the element like a table. Run-in and compact aren't very supported, so who cares. ^

float

Use: float: left, right, none [default]

See this image on the left? I floated it. When you float stuff, you're basically aligning it left or right and letting everything else wrap around it. It's pretty neat. Float is commonly used in website layouts. I don't know how though, so don't ask me. Now, I shall show you another way to use float.

Yes. Like the beginning of those fairytale stories with that really big "O" in once upon a time. So you use float to do this. By the way, I do realize how small the "Y" is. ^

clear

Use: clear: none[default], both, left, right,

Clear is important with the float property. Instead of using brs to make your text go down, use clear. Look at float above. I put "clear:left" on the "Yes" paragraph. Now this is what happens without the clear:

See this image on the left? I floated it. When you float stuff, you're basically aligning it left or right and letting everything else wrap around it. It's pretty neat. Float is commonly used in website layouts. I don't know how though, so don't ask me. Now, I shall show you another way to use float.

Yes. Like the beginning of those fairytale stories with that really big "O" in once upon a time. So you use float to do this. By the way, I do realize how small the "Y" is.

So. There's that small space there, and the yes paragraph isn't fully on the left. The clear property fixes this. What it means is that the property that's cleared is placed below the elements on the left side. ^

list-style

Use: list-style: [list-style-type] [list-style-position] [list-style-image]

This customizes your list. This is also the beginning of how to do navigation with lists (which is awesome. But confusing.) Look at the bottom three property explanations for me to be more in-depth. ^

list-style-type

Use: list-style-type: box, circle, decimal, decimal-leading-zero, disc, lower-alpha, lower-latin, lower-roman, lower-greek, upper-alpha, upper-latin, upper-roman, square, none, hebrew, georgian, armenian, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha

God. The "use" part of this is scary. Let's just look at all of these.

YES DONE. XD Btw, alpha and latin looks the same so I don't know what's different. Also, there are the international ones there, which aren't that supported. CSS3 also adds asterisks, binary (I WANT THIS), check, diamond, footnotes, hyphen, lower-norwegian, upper-norwegian, upper-greek, and octal, but these aren't supported. And some are weird. Why norwegian? Can't we have like, something less obscure first? (Same with like, armenian. Why is it supported in Opera too? o.O) ^

list-style-position

Use: list-style-position: inside, outside[default]

Where do you want your list icon things to be? That's what list-style-position asks. Outside is default, and it means outside the box. Inside means...inside the box. ^

list-style-image

Use: list-style-image: none[default], url(url)

This sets an image as your list-style icon. So yeah. You don't have to wait for browsers to support octal in CSS3 - just make your own! Right. D: ^

units

Use: #[px, pt, em, %, in, cm, mm]

Okay. So I listed the important ones above. Units are important on the interwebs too. Too bad. So the first one is px which means pixels. This means a dot. Simple. pt is bigger than px. It's 1/72 inch. Usually, you use pt for writing stuff and printing them out. em scales the font to what the browser wants. 1 em means how big the default size for the browser is. This depends on really what the person browsing your site is using. This is useful for many sites with a big large varied audience (as in not neopets). % is percent, and should be self explanatory. in, cm, and mm are real-life measurements, but they also work for css. OOH. O: ^

selectors

Use: selector { property:value }

Selectors are, well, the most important thing. It's what you select to be edited. So um. This part is like technical stuff so you don't really have to read it. Lets start with type selectors. Type selectors select an html element, like b, i, or u, and you can then modify it. Descendant selectors are selectors that are descendants of another selector, or grouped in another one. So if we have divb/b/div , then we can see that b is inside div. Descendant selectors don't target everything, but just some. Child selectors are first not compatible with neopets. It's the same thing as descendant selectors, but it only selects the elements that are one step down from what you have before. For example, div b will only select bold if it isn't inside another element inside the div. Adjacent sibling selectors aren't very useful. It selects two elements that follow each other in the code. Not inside, but following each other. An example would be h2 + b, since if you look at my code, the bolds are after h2s, but not grouped inside. The last one is the universal selector, which selects everything. It's used with an asterisk (*).

Now we're past the part which is basically useless. Time to talk about class and id selectors. Class selectors are denoted by a dot. They select things that have a class. Classes can be put on many many html elements, and are very useful. Id selectors are denoted by a #. They're the same thing as classes, except you can only use ids once. These two things are very useful, and often used with divs and anchors. ^

pseudo-classes/elements

Use: selector:[active, focus, hover, link, visited, first-child, lang, first-letter, first-line, before, after]

pseudo-classes are like classes connected to selectors and classes and stuff. So they're pseudo? Whatever. Anyway. The most popular ones are :link, :visited, :active, :hover, and they're most often used with anchors (a ). :link styles unvisited links, while :visited styles visited ones. :active styles an active link (when clicking on), and :hover styles a hovered link. Note that :active must come after :hover, which must come after the other two pseudo-classes. :focus is also commonly used with anchors, but it doesn't work with IE. It's used when focusing something. This is kind of confusing. Focus is kind of between hover and active, since it's when you're not hovering it, but you're selecting it. Yeah. Weird. Focus state happens when you click on something, but then drag it away and stop clicking on something when you're away from the link.

The other two pseudo-classes are :first-child and :lang, which aren't supported in IE. It only affects the first child of something. Which means the first thing you see when you scroll down the code. Er. Lets ignore :lang.

The last ones are the pseudo-elements. :first-letter styles the first-letter in the text, :first-line styles the first line. :before adds something before what you select, and :after adds something after you select. ^

CSS3

Opacity

Use: opacity: [decimal#]; filter: alpha(opacity=[integer#]) (for IE)

Opacity measures the transparency of what you're selecting. This is in 0.5 opacity. Note that opacity only goes from 0 to 1. IE doesn't support opacity...but it has its own filter! w00t! It's the same thing, but you use integers from 0 to 1. Also, you must specify a width/height in order for it to work for some reason. ^

css3 selectors

Use: selector[ [att^=val], [att$=val], [att*=val] ]

Oh god. This is confusing. But it works for all browsers. : D BUT it doesn't work for neopets. :( So. Attribute selectors select something even more specific than what there should be. So if your selector is span[title^="ri"], then all span attributes that have title=ri____ would be affected by that selector. ^ means having a value with the text you're specifying in the selector in the beginning, $ means in the end, and * means anywhere. ^

css3 pseudo-classes

Use: selector:[nth-child(x), nth-last-child(x), nth-of-type(x), nth-last-of-type(x), last-child, first-of-type, only-child, only-of-type, root, empty, target, enabled, disabled, checked, not]

In CSS3 we have more child stuff. ;_; So. Start with the ones with the (x). The x can be a keyword, number, or a number -disallowed_word-with n as a variable). Wow. I know. It's only compatible with konqueror though. Now what it does? The same as first-child...but you get a number. O: And for the -type ones, it's for the type. Don't ask me what that means. Only ones means selecting the ones with only one child.

Yay. Now we're left with :root, :empty, :target, :enabled, :disabled, :checked, and :not. Wow. :root matches the root element...which means html. I don't get it too. It's supported in FF and Safari. :target matches the target in the url. Only supported in FF. :enabled matches the ones that you can do stuff to (click on, write on, etc.) and it's not supported in IE only. :disabled is the opposite of enabled. :checked matches checked psuedo-classes. :not matches elements that aren't matched. Haha. Only supported in FF and Safari though. (Btw, if you don't understand this whole section, it's okay. I honestly don't that much too. ^

overflow-x/-y

Use: overflow-x/overflow-y: auto, visible, hidden

Overflow-x and overflow-y are the same thing as overflow, but separates the axes. Which is awesome. Overflow-x sets horizontal overflow, overflow-y sets vertical. This is compatible in IE...because Microsoft started it. Amazing, yes? It works in IE, Firefox, but kind of but not really for Opera and Safari. ^

HTML

html, head, body

Use: htmlhead/headbody/body/html

These are the core html elements. Everything you write is inside the html property. The head property is basically invisible, but things like putting css and changing the title go there. The body property is the most important. Whenever you're adding html in neopets, it's already in the body brackets. The body is what you see on the page basically. Anything on this page can go in there, including style tags. So yeah. This section is very unimportant if all you care about is coding in neopets. ^

b, i, u

Use: b/b , i/i , u/u

b, i, and u stand for bold, italics, and underline respectively. Bold makes your font thicker. Italics makes it slanted. Underline makes it underline. You should know all this. Alternatives (and better ones) for b and i are strong and em. ^

a

Use: a href="url/anchor/a

The a tag is for making links. This tag is very important. So inside the quotation marks in a -disallowed_word- you can have a url or an anchor. You should know what url means. When you use a url without the http part, then the link will be added to the root of the site you're on. For example, you have a link on neopets, so you can just type "/neoboards" on your url. This will go instead to http://neopets.com/neoboards, not just /neoboards. Anchors are like linking to the ids and classes on your page. So if the link is "top" and my div with the class top is on the top of the page, then this happens: ^

p

Use: p/p

P means paragraph. It just organizes things to paragraph. xD Each chunk between ps are a paragraph. I'm using p for most of the text on this page. ^

img

Use: img src="imglink

The img tag inserts an image. It's really simple actually. Just replace imglink with an image url. ^

style

Use: style/style

This tag is really important on neopets (like every other tag here). Between the opening and closing tags, you put your css inside. Note that if you're organized in your code, you should only have one style tag in your code. Also, there are also these things called inline styles, where you just add style="css" inside any of the html opening codes (example: all the examples in this petpage. XP). Please don't do this. It's as annoying as the neopets coding. ^

div, span

Use: div/div , span/span

Div and span are the things that make the invisible boxes. These things are mostly used for styling things. The layout of this page is composed of divs that can be styled. Span is like div too, but for styling things instead. The difference between div and span is that div is a block-level element, so it's like it already has display:block for every div, and therefore, there's a line break for each one. Span, however, is an inline-level one, so you can use span on the same line you're typing these things. (Which is why I use span for all the examples on this page.) ^

Use: h#/h#

The h# things are headers. There are many headers on this page, as you can see. Basically, headers are text that are treated like a block, and are normally bigger. But you can style them, obviously. Also, the smaller the number, the bigger size the font.

h4.

h5.
h6.
Only h1 to h6 work. I styled h1 to h3 on this petpage, so I'm not going to show examples of it. ^

br

Use: br

Line break. Makes lines jump from one to another. Equivalent of an enter key. ^

hr

Use: hr

Horizontal line. Look at the one below.


^That's hr. ^

tables

Use: tabletrtd/td/tr/table

You know? I hate tables. I hate how neopets uses it. I mean, it makes neopets lookup coding 849032 times more annoying and less customizable. :| (Or maybe I'm just stupid?) Actually, no. I just hate how neopets doesn't assign an id to everything. Anyway. Tables are like the data table kind, not the kind your computer is on. So, to start a table, use the table tags. Then, inside, put tr, which stands for table row. So add as many trs you need. Next, you have the tds. ^

lists

Use: ulli/li/ul

Click here for an example of lists. So. To start a list, use ul. Then, for each item, put li around it. Lists are commonly used as navigation. ^

neopets

In this section, I'll mostly deal with user lookup terms. The screenie on the left (right click, view image to make it large enough, and open it in another window) will guide you on what is what.

#main, #content

Use: #main, #content {properties}

#main and #content are the selectors that surround the whole lookup (besides the sides). #main is with this color, while #content is with this color. #main contains everything. #content contains everything but the header and footer. Usually, the properties used with these are border:none and background:none because there's this ugly grey border on the left and right side and it's better to use body so that the whole background is the same. ^

#header

Use: #header {properties}

The header is, uhm, the top. This is the border color used in the screenie. Basically, it contains a link to neopets, a navigation, .user (explained below), and #nst (also below). When editing .user and #nst, #header can not have the "display:none" property ("visibility:hidden" works though). ^

.user

Use: .user {properties}

#user contains the "Welcome, pay | NP: 32,401 | Logout" part of the lookup. It's pretty annoying to edit this. This part also has .medText being present. The "pay", "32,401", and "Logout" parts are links, and the "|"s are spans. ^

#nst

Use: #nst {properties}

This is the clock. You know, the "11:56:45 pm NST"? It can be really awesome when customized, since it's like the only moving thing that isn't an image. #nst is already centered. ^

Use: #footer {properties}

You know? I can't believe that I'm explaining obvious things and putting it here. I would say that it's because I'm trying to be complete, but I'm probably missing like 75% of things. So. Haha. Border color on screenie: this. It has lawyerbot info, another link to neopets (how nice!), neopets search, and neopets language select. Oh, and a sign to show that you're on a kids site. (Yes, admit it.) ^

Use:

^

.content

Use: .content {properties}

Yes.. .content is basically the same as #content. Usually, it's used to remove the "User Lookup: username (?)" part. Otherwise, it's pretty useless. ^

module editing

These selectors all deal with modifying modules. What are modules? They're the boxed up individual things on your lookup and everywhere else on neopets. The point of these are to edit individually. ^

#user...

Use: #userinfo, #usercollections, #usershop, #userneopets, #userneohome, #usertrophies {properties}

These are kind of self explanatory. Each of these affect all the things below, but only for its own box. I think that you can figure out which selector matches with which module. ^

.contentModule

Use: .contentModule {properties}

Border color on screenie. .contentModule is the outside border/layer of the modules. It surrounds each module. In the screenie, you can see that it's pretty stupid. The thing it does is that it makes the heights even up. (But then there's the other selectors...¬_¬) ^

.contentModuleTable

Use: .contentModuleTable {properties}

Border color on screenie. This selector is the same thing as .contentModule except for two things. One thing is that it's inside .contentModule. The second thing is that it surrounds all the content more tightly.^

Use: .contentModuleHeader, .contentModuleHeaderAlt {properties}

Header.. Alt.. These things are the headers of all the modules. .contentModuleHeader only affects the #userinfo header, while .contentModuleHeaderAlt affects all the other headers. (I really don't see the point of this.) ^

.contentModuleContent

Use: .contentModuleContent {properties}

Screenie border color. .contentModule is .contentModuleTable excluding the header. That's basically all it is. ^

.medText

Use: .medText {properties}

To be honest, I don't understand .medText. All that .medText does is that it makes everything have a font size smaller than 8pt. So that makes sense so far. The problem though is that they put it on like EVERYTHING. If you edit .medText, then you basically edit all the neopets text. So, remember to include this when modifying fonts. ^

Things to Test Out (or add in nav)

- outline? - not compatible in ie
- direction?
- text-shadow

- ie/ff/opera/safari only codes

- search bar (haven't tried)

Credits

This page is hosted on this site, obviously.
Thanks to Kitty for her premade layout which I was using before that I liked so I copied like one thing from there. XD
Thanks to w3schools.com, quirksmode.org and css3.info where I got most of my info.
Ew at w3 for being so slow.



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-2014.
® 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