INTRO

Welcome to my premade templates page! All the layouts you see on this page are all CSS based, in a grayscale palette & works with all browsers (for the most part). With templates, you have the freedom to change colors/fonts/backgrounds to whatever you want! As far as the credit I put on the premades, I won't go crazy on you if you remove it but it would be nice if you left it. I just want people to leave some kind of link back to this page so that those looking at your awesomely edited template can do the same by coming here.

And one more thing: I highly encourage people to make "add-on" pages (I can't think of the right word at the moment)! Meaning you can take these templates, edit them however you like and then create a premades page. As long as you leave a link back to this page, I'm all for it. Let me know if you do make one, so that I can create a link on this page.

TUTORIAL

  1. Be creative!
  2. Please leave credit.
  3. Link back so others can enjoy too.
  4. If you are unfamiliar with the code, try not to mess with margin/padding/positioning.
  5. Most definitely mess with background/borders/color/font!
  6. Neomail me if you have any questions.

Changing Colors

In the provided codes you will quickly notice that everything is gray. Why? Because it just makes things easier when editing templates :3 Every color is assigned a hexcode with 6 numbers. For example, black is #000000, blue is #0000ff, red is #ff0000, etc. All image editing programs have some sort of color picker to find the right hexcode for the color you want. If you don't have an image editor, there are many resources online that proved hexcodes for you.

Font

You see what I did up there with the colors? With individual things like that I would just use HTML to edit them.

If you want to change the font of a whole section or a whole page, you would use style codes to change them. Cool, huh? Lets say we want the font to be 18pt and bold, the color to be green and the font family to be "Georgia". This is what it would like in extended CSS form:

Wow thats a lot of code for just font. Well for efficient CSS we can shorten that code a bit to:

Much better! Keep in mind that you have to have at least the font size AND the font family for the code to work. If you want to change the color of the font, just add "color: #000000;" to the specific style tag.

Backgrounds

Background CSS can also be shortened! The order for backgrounds is color, image, repeat, position.

Body" refers to the entire page, but you can also change the background of specific sections by replacing the body selector. (selector is the section you are styling usually positioned in front of the "{" and declaration is each style you add to it like color: #000000)

Border

Now to my favorite part: BORDERS! It might seem boring to some, but I think borders add a little something to the design of some layouts. Let's start with the shorthand order: width, color, style.

Yeah, out of habit I tend to switch the color and style, but it works either way so I leave that up to you. ;) The different border styles are: solid, double, dotted, dashed, groove, ridge, inset, & outset. Have fun experimenting with different border styles, colors and sizes!

These are just basics that will get you started on the following templates. If you want more, check out these guides:

Neopets HTML Guide
Al's HTML/CSS
CSS For You

LOOKUP TEMPLATES

Template 1

Template 2

Template 3

Template 4

PETPAGE TEMPLATES

Template 1

Template 2 (Incomplete)

Template 3 (Incomplete)

Template 4 (Incomplete)

PetLookup Templates

Template 1

Template 2

Template 4 (Incomplete)

SHOP TEMPLATES

Template 1 (Incomplete)

Template 2 (Incomplete)

Template 3 (Incomplete)

Template 4 (Incomplete)

GUILD TEMPLATES

Template 1

Template 2 (Incomplete)

Template 3 (Incomplete)

Template 4 (Incomplete)

LINK BACK

Simple Link

Can's Premade Templates

Button




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