Anime*Eternity Userlookup Tutorial!


Mr. Hutch says, "Jay and I will teach you all about CSS!"

Welcome to the Anime*Eternity CSS Tutorial! Here you can learn all the CSS required to make a great userlookup that you can enter in the Contest! Below I have placed codes that you may copy and customize, along with instructions on how to do so! If I get lots of questions, I will put up a FAQ page, so don't be afraid to neomail me and ask!

Backgrounds

Here's the code for putting in a background.

To customize this code, it's very simple. Take out the text "SOLID BG COLOR," and put in whatever color you want the solid background color of your lookup to be. This is the color that goes behind the image, if you place one.

Then remove the text "BACKGROUND URL HERE," keeping the parenthesis! Then you can place the address of your image you want to use there! This is the hardest part of making a lookup, finding a godd image that can be linked, but don't worry, you should be able to find something!

Next, the "fixed" text in the code makes the background stationary, so it doesn't scroll when you scroll up and down through the page. If you don't want that, just remove the word "fixed" from the code.

So now the text "no-repeat" makes it so there is one image on the page. If you want you image to be tiled, remove this word.

The word "center" represents the alignment of the image. It is only relevant if you are using the "no-repeat" code. If you want your image to be on the left side of the screen, change "center" to "left", and "right" if you want it to be on the right side of the screen.

That's all for Backgrounds!

Background Code:
Mouse-Over Links Decoration
Mouse-Over Link Decoration: This is the code that makes the font/color of a link change when you put the mouse pointer over it.

I have just recently learned this code, and I know that there is more that can be done with it, but for our purposes here this will be fine.

First, fill in the "BACKGROUND URL HERE" and "SOLID BG COLOR" fields the same as you did for the background code.

Next, you change both "TEXT WHEN MOUSE OVER" texts to the color you want the link color to be when you scroll your mouse over it. Then you change "FONT SIZE" to the size you want it to be when the mouse goes over it. This is in points, like on a word processor, that is what the "pt" after "FONT SIZE" means, and that has to be left in, do not take that out, or your font will be the default text.

For "FONT NAME," you have the option of changing your font type. Just put in the name of the font you want to use. I think it is easier to just leave the font face the Neopets default by taking out "FONT NAME."

Image Filters
This code makes your images transparent, but I am not sure how to edit it yet, but it works with any lookup, so you can include it if you want. Image Filter Code:
Scrollbar Colors
Scrollbar Color Code:
Scrollbar coloring is very easy. All you have to do for this is to change the word "COLOR" to any color you would like that part of the scrollbar to be! The code is very straightforward and shouldn't require me to explain any more! Just play with colors until you get a nice bar!
Table Color and Transparency
This puts in a transparent colored background on your user information.

First thing, where it says "BORDER WIDTH," you can change the size of the border around your user info. Common settings are 0px to 2px (px means pixels, and must be included). I usually set mine to 1px, depending on the border type you use.

For border type, there are two that I know of, dashed and solid. If you want a dashed table border, edit "DASHED OR SOLID" so it reads "dashed". Samed thing for solid line border, edit it so it says "solid".

Next is "BORDER COLOR," set it to whatever color you want your border to be. Simple enough, right?

Lastly, we have "TABLE BGCOLOR." This will set the color of your table background. Just change it to the color you want to use.

Table Code:
Basic Font
Font Code:
This code is basically the same as the Mouse-Over code, with respect to font.

Change "COLOR" to the color you want your basic font to be. This will be the color of regular text and the color of the links before you put the mouse over it.

For "FONT SIZE," it is the same as in the Mouse-Over code, it works nicest to set your font settings to the same values in both codes, same thing goes for FONT NAME.

Now, this is the only thing that is different. "ALIGNMENT" is the text alignment, like you would find in a word processor. Generally, the only alignments you would use for this are "center" and "left". Just change the word "ALIGNMENT" to the alignment you would like to use.

Want to Insert a Return?
Do you want to insert a Paragraph break in your personal information? This is how you do it!

First, you paste the top code on the right into the very top of the About Me section of your User Info page.

Then add the second code in between the text you want to have a return in between. Simple as that!

Add this to the top of "About Me"

Add this wherever you want to insert a return

All of these codes work together to make a great user lookup! Remember, if you have any questions at all about using these codes, feel free to neomail me!

My Lookup!




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