Welcome
Hello, welcome guest! This site has coding and graphics for you :D
If you want to learn HTML or CSS then have a look. There are also graphics for you to use.
Updates
29th October 08
+ Another Pet page layout added.
28th October 08
+ Added an icon.
* Changed the image locations. So please update wherever you put one of your icons as it will have a broken link.
* Edited the coding sections. Adjusted my explanations and added a screenshot for the userlookup help.
+ Added colour palettes.
+ NEW! Pet page layouts!
Graphics
RULES:
- Credit me back.
- Do not copy, steal or redistribute as your own.
- I've included a link back to this page in the codes. You may remove it if you put a link back somewhere visible on your page.
- Please don't use outside neopets!
Icons/avatars 100x100
|
|
|
Coding
Aha! It seems you have found my not so wonderful guide to coding!
I will try and be as clear as I can but I am hopeless at explaining things so please bear with me.
And if my guide is still to confusing please feel free to contact me by Neomail.
HTML
You want to learn how to make a petpage? Well, just read what's ahead!
Let's start with the basics.
These are the most basic thing needed for a petpage.
Because of the Neopets word filters I'm going to use numbers to explain.
1 - You put your stylesheet/CSS here.
(2) - You put your main content here.
Also, if you wanted to know, HTML means HyperText Markup Language.
Tags
Tags are the things that make up HTML. They are inside the .
There are of course lots of tags but there are some that don't work on neopets so I won't mention them.
I will just be saying some commonly used tags. You can edit the look of these tags by using CSS.
Basic CSS
Firstly some of you might like to know that CSS stands for Cascading Style Sheet.
Right, so I am just going to teach you the basics here and then teach you some useful selectors.
This is the basic tag you use for an embedded stylesheet.
For the CSS syntax you must have a selector, a property and a value.
A CSS syntax should look like this:
But you will change the selector, property and value according to what you want it to be.
For example:
The selector is p.
The property is font-family.
The value is arial.
By the way, remember to put semi-colons (;) after each value. Or else it won't work.
Commonly used selectors
There are lots of properties and it would take forever listing all of them so I'll just name the most commonly used.
p { font-family: verdana, arial, sans-serif; font-size: 11px; color: #000000; padding: 5px; } h1 { font-family: verdana, arial, sans-serif; color: #aaa; } b, i, u { color: blue; } a:link { font: 11px verdana, arial, sans-serif; color: pink; } a:visited, a:active { font: 11px verdana, arial, sans-serif; color: violet; } a:hover { font: 11px verdana, arial, sans-serif; color: red; }The properties I have included are just the ones I usually use. You can change them if you want (You should).
Also, you might of noticed that I've put b,i,u together. Well you can group selectors together to save some space and time.
You group them together when you want them to have the same properties and values.
Hover
Now that you know CSS (Well... I hope you do). I will just make this section about how to change things when your cursor hovers over something.
Okay, so lets get straight to the code.
.test { border: 1px #000000 solid; padding: 5px; background: white; } .test:hover { border: 1px #000000 solid; padding: 5px; background: gray; }
I have underlined the key part to the hover.
I am using a class as the selector. To make a class you just put a period (.) before the name of the class you want to make.
I think the :hover will work with any selector. You just add it after the selector, e.g. test.
Here is an example:
Note: It doesn't seem to work in Internet Explorer? Please send me a neomail if it doesn't work.
User Lookup Help
I'm going to put down some helpful codes so you can make your userlookup look decent with the neopets layout.
You put the code above in between the style tags.
I've put down the CSS for some parts you might want to change of the Userlookup.
Just replace "properties and values here" with your properties and values (obvious, no?)
Here is a screenshot to help you know which classes are which parts.
Drag the image to the address bar to make it larger.
Colour Palettes
Here are some nice colours that I've picked out. Feel free to use them.
I've put their hex colour code in their box.
| Purple | #a200f5 | #7d0ab8 | #460667 | #2d113c |
| Warm | #ffdb48 | #ffae00 | #d4cd07 | #f07d18 |
| Cold/Dull | #7fbfd4 | #6b9ea0 | #38a6df | #115e86 |
Pet Page Layouts
Here are some layouts you can use for your pet page.
My layouts don't bypass the filtered words.
RULES:
- Do not remove the link back to this page in the codes.
- You can edit the page but still credit me for the base.
- Don't claim the layouts as your own!
Drag the image to the address bar to make it larger.
NOTE
To have a header image, change the background url which is imagehere.png in the #header section of the stylesheet to the url of your image. You also need to change the height to fit the image in.
I'm not sure what it would look like if your image was larger than 800px. Please neomail me if you do have a header image wider than 800px and tell me the results.
New! Click here for previews! It does not work a well as I wanted. But it still does XD
Summer days
Code:
Blue skies
Code:
To add another box just copy this code and paste it where you want it: