The Basics
Action
|
Code
|
Example
|
Code Applied
|
Link
|
|
Css For You
|
|
|
Bold
|
|
Css for you.
|
|
|
Strike
|
|
Css for you.
|
|
|
Italicized
|
|
Css for you.
|
|
|
Center text
|
|
Css for you.
|
|
|
Left text
|
|
Css for you.
|
|
|
Right text
|
|
Css for you.
|
|
|
*Justify text
|
|
Css for you.
|
|
|
Break
|
|
Css for you
from me.
|
|
|
Paragraph
|
|
1st paragraph
2nd paragraph
|
|
*NOTE:
Justify can't really be previewed in the table above. Basically, it just makes it so your text all lines up in the end of each line creating a much more clean and organized look.
Difference between HTML and CSS - in short.
This is just a small explanation on the differences between HTML and CSS, as they are two different ways to code, and knowing the difference between the two is important before you move further.
HTML: stands for Hyper Text Markup Language.
CSS: stands for Cascading Style Sheets.
Both are widely used and accepted languages for web design.
In simple terms, HTML determines the outline/construction of a page, whereas CSS is used for styling. It does not really create anything, instead it decorates. In other words; HTML defines and structures content, and CSS styles said content.
CSS is NOT a replacement for HTML, it's simply an addition.
In-depth HTML explanation | In-depth CSS definition
Advanced - Font Size, Color & Face
Font size 1Font size 2Font size 3Font size 4Font size 5
Change the "3" to the font size you want. The higher the number the bigger the text. "1" is the smallest font size using this method of changing font size. Remember to choose a font size that is not too small for people to read.
Css For YouCss For YouCss For YouCss For You
To change the color of text replace the "#35c0e2", known as a hex code, with the hex code of your color. A hex code is just a line of number/letters that form the action of a color. Ex. #35c0e2 is a light blue. Some colors can be used by simply just typing there name in. Such as "red". Always make sure the color is light/dark enough for people can actually read it without straining their eyes.
Css For You.Css For You.Css For You.Css For You.
To change to a different font face, replace "Georgia" with the font face of your choice. Three of the most common used font faces are Georgia, arial, and century gothic. If a person does not have a certain font downloaded on their computer then they will not see it. So when choosing a font face try and choose default fonts. Also keep in mind whether the font is legible or not.
Css For You Css For You Css For You
You can mix and match font sizes, colors and faces as you please. Just add the action after the word "font". Do not forget to use quote marks and equals. Also remember before every hex code you have a "#.
Top of page
Advanced - Style Tags
From here on out some codes may need to be placed in "style tags". The style tag is used to define style information. In the style element you specify how HTML elements should render in a browser.
Remember to match the tags. For every opening style there must be a closing. Typically you will only have one set of style tags.
Top of page
Uploading, Linking & Adding Borders
Uploading
1. Go to a hosting site such as tinypic, phototbucket, or image shack. (I personally use tinypic)
2. Click the "Browse" button
3. Click on the image you want to upload
4. 4 codes will show up copy the "direct Link for Layouts" (4th one down if you are using tinypic)
5. Paste the copied code in between the quotation marks in the code below.
6. Paste on profile and you're done.
EX.
Linking
To link an image copy and paste the URL of where you want the page to link to and paste it where it says URL HERE in the code below. Remember to replace my direct link with the direct link to your image.
*A quick shortcut when linking text, images, navigation, etc, you don't need the full URL code for Neopets. i.e. "/~demioxy". You may simply put whatever comes after http://www.neopets.com, whether it's a petpage, userlookup, etc, and it will still work.
EX.
Adding a Border
To add a border you need to add border="#. Replace the # with how thick you want the border. 1 being the thinnest.
EX.
Styling your border using CSS
You know now how to make a simple border, now let's move a little further. You may change the color and style of your border, as well, using CSS.
img src="url here" style=" border: 2px dashed #8c2060;" for example. First is your border size, then your style (you may use solid, dotted, dashed, etc), then your color.
EX.
More border effects demonstrated below, hover over the image for the name of the effect.
padding and borders
Adding the padding attribute to an image with a border gives the appearance of the border being farther away from the image. padding:4px; for example. The higher the number, the more space in between the image and the border.
EX.
Defining terms
This section will explain box terms. (ie. Padding, border, and margin)
The above is a diagram. It shows your content, your padding, your border, and your margin.
Content: This is where all your text and/or images go. Self-explanatory - it's your content.
Padding: This sets an area around the content box. It appears before a border, and allows your text and/or images to appear farther away from the border, depending on your padding setting. 'padding:4px;' is an example.
Border: This is also quite self explanatory. The line that sits around the content and the padding. 'border: 1px solid #000000;' is a standard code.
Margin: This lies on the outside of your border. It clears any amount of space around the border, depending on your code. The margin is transparent, it cannot have a background color. 'margin: 5px;' is a standard margin code.
Top of page
Advanced - Mouse
To change the way your mouse appears, you have to make (or find) the image you want to replace your mouse with.
This code goes in style tags.
Action
|
Start Code
|
End Code
|
Example
|
Code Shown
|
Mouse one
|
|
|
|
|
|
Mouse Two
|
|
|
|
|
Put the URL of the image you want between the parentheses.
Top of page
Advanced - Link Decorating
That is the code for a normal link. Change URL HERE to the url of the page you want to link to and change the "link name" to what ever you want the link to be called.
EX.
Neopets.com
The link will style however you have it styled in the style tags. If you do not have anything in the tags it will become the default blue link.
Different link style examples:
- color: #96e24b
- font-family: arial
- font-size: 9pt
- letter-spacing: 0px
- font-weight: normal
- text-transform: uppercase
- background-color: transparent
Most are self explanatory such as font-size or letter-spacing. Others may be more difficult to figure out their purpose. Here's a quick explanation of a few trick ones:
font-weight: Font weight tells whether or not the link will be bolded. By putting "normal" or "none" the link will have none of those traits.
*
font-style: Font style tells whether or not the link will be italicized.
*
text-decoration: Text decoration is used for underline effects, along with other effects such as "line-through" and "blink
text-transform: This is to tell weather you want the links to be all "uppercase" or all "lowercase" if you simply just want normal text you can either delete it or put "none".
padding: Padding has 5 different styles:
- padding-left:
- padding-right:
- padding-top:
- padding-bottom:
- padding:
Padding causes an indent on the text only unlike margin which moves everything.
margin: Margin will make an indent with the whole link, background and everything. Like padding, margin has the same 5 styles.
display: block display: block will make it so that your links sit on top of each other (ie. like blocks)
The best way to get used to and learn link styles is just endearment. Change codes see what happens when you change an attribute or add one.
To style a link you plan to use multiple times you would put this in your style tags:
linkHoverand post this code where you need the link to show up:
For something more specific like a navigation you would place this in between style tags:
linkHover
See the "nav" at the beginning? you can change that to whatever you like as long as you stay consistent. So if you change "nav" to "link1" then you would have to change nav on the hover code and to link1.
This is the link you would use with the code above:
Top of page
Advanced - List
|
Bulletin
|
- bullet one
- bullet two
- bullet three
|
|
|
Number
|
- point one
- point two
- point three
|
|
Lists are very easy. Just copy and paste that code to where you want the list and fill in your information.
Top of page
Z-index
Ever use Microsoft Word and have the option of 'bring to front', 'bring to back', etc? Well, that's what z-index does, only for CSS. The z-index property specifies the stack order of an element. An element with a high z-index is always in front of an element with a lower z-index.
z-index:100; When applied to a tag, this would make the element in front of everything.
z-index:-100; When applied to a tag, this would make the element in behind of everything.
* high numbers are not needed to place an element in front of in behind, simply making the number the highest or lowest will work.
Top of page
Text areas
A text area is a code that allows you to enter an unlimited number of characters into a box, where the code you put in has no effect. The only thing you can't put in a text area is another text area.
Changing the appearance of your text area
A regular text area will look like this:
A bit ugly, right?
To change the look of your text area, you can use a simple CSS code.
textarea {
width: ##px;
height: ##px;
}
This will change the size of your text area. Some more properties you can add are:
background-color: Change the color of the background.
background:url(img url); Use an image as the background.
border: Add a border. More explanation on borders here.
color: Change the color of the text inside the text area.
overflow:hidden; To hide the scrollbar.
Top of page
Advanced - page anchors
The navigation system links on this page are all page anchors. Anchors are links within one page, transferring you to a particular place in that page. You click on the title of the chapter at the top of the page, and you immediately go to that chapter without having to scroll down the page. This can be very handy in long petpages for example.
Anchors are also links, so the coding for those is very familiar to the coding of a link.
Where you want the link to the particular place on the page to be (in our case, the navigation system), you put the following:
You also need to put an HTML code at the place the link directs to. This code should have the same codeword as the link has, that way they are connected. Where you want the link to direct to you, put the following code:
You can replace 'CODEWORD' with anything you like, as long as the codeword in the link is he same as the codeword in the code at the place the link directs to. If your codeword isn't the same, your link will not work.
Top of page
Advanced - Background
All these codes go between style tags.
If you want to make your background fixed, no repeat, and in the bottom right hand corner then you would take the background code you are adjusting, in our case we will adjust body {background:url(URL);}, and you add background-attachment:fixed; , background-repeat:no-repeat; , and background-position: bottom right; to the code so it now looks like this:
body {background:url(URL);background-attachment:fixed; background-repeat:no-repeat;background-position: bottom right;}
background-repeat:repeat-y; will render the background to repeat, but only vertically.
background-repeat:repeat-x; will render the background to repeat, but only horizontally.
You can do things like this to any code that involves backgrounds. Here are some other things you can change:
Code
|
Example
|
Values |
Explanation |
|
background-attachment: VALUE;
|
background-attachment: fixed;
|
scroll, fixed
|
Makes your bg fixed so that info scrolls over it, or makes it so it scrolls with your page
|
|
background-position: VALUE;
|
background-position: top center;
|
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right
|
Sets the position of your bg
|
|
background-repeat: VALUE;
|
background-repeat: no-repeat;
|
repeat, repeat-x, repeat-y, no-repeat
|
Changes how your background repeats
|
|
background-image: VALUE;
|
background-color: pink;
|
Any color, be sure to add the # in front of the hexcodes if you use them, so like #FFFFFF instead of just FFFFFF
|
Changes the background color
|
Top of page
Advanced - Scrollbars
All these codes go between style tags.
Just place your hex color codes to coordinate with how you want it the scrollbar to look. Remember that scrollbar customizations only apply in Internet Explorer.
BODY{
scrollbar-face-color: #2DBEE8;
scrollbar-shadow-color: #2DBEE8;
scrollbar-highlight-color: #2DBEE8;
scrollbar-3dlight-color: #2DBEE8;
scrollbar-darkshadow-color: #2DBEE8;
scrollbar-track-color: #2DBEE8;
scrollbar-arrow-color: #1C1C1C
}
Code
Overflow Options
These attributes will tell weather or not the scroll box will actually scroll or not.
visible
Default Content is not clipped and scroll bars are not added.
scroll
Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.
hidden
Content that exceeds the dimensions of the object is not shown.
auto
Content is clipped and scrolling is added only when necessary.
So your code would look like this:
overflow: auto;
You would put it with the other commands for that DIV. For example:
#aboutme {
background-color:transparent;
width: 470px;
position:absolute;
margin-top:350px;
margin-left:-330;
text-align:justify;
font-size: 8pt;
overflow: auto;}
Scrollbars can be at the bottom of the object, scrolling horizontally, or at the right of the object, scrolling vertically.
The two scrollbars act like an axis, and are coded as such, a y-axis (vertical) and an x-axis (horizontal).
overflow-x: is the scrollbar at the bottom. Overflowing this, or hiding this affects only the horizontal scrolling.
overflow-y: is the scrollbar at the right. Overflowing or hiding this affects only the vertical scrolling.
Top of page
Advanced - DIV Boxes
There are two different ways you can create a DIV box. As of now (
Oct. 11, 2009) the word position is not being allowed. So we can no longer use Cascading Style Sheets for now, but we can use Inline Styles to get the word position past the filters. We will talk about Inline Style Tags first.
Inline Style Tags
Inline styles are where, instead of putting your specifications in the style sheet, you put them in the body.
style
#aboutme {
left:330px;
top:205px;
height:300px;
color:#fff;
}
/style
div id="aboutme" style="postion:absolute;"
This would be your about me. C:
/div
You don't have to move any of the allowed style words you have for "aboutme in your style sheet. They can stay right where they are, since you still have id="aboutme" in there.
Definitions of position tags;
position:absolute; Absolute positioning is what's most commonly used with position codes. It's placed based on the left, right, top and bottom properties. Where this code is placed in your coding does not matter, it will position where your properties tell it to.
position:relative; This code is similar to absolute positioning, it uses left, right, top and bottom properties to position itself. Edit these properties to determine where the element will be positioned
/relative/ to where it is placed.
position:fixed; This code positions an object on your page, and keeps it there. As the page scrolls, the object stays on the screen at all times.
Cascading Style Sheets
Cascading Style Sheets are what is most commonly used in coding anything. They are more organized and easier to edit and read, but thanks to TNT new filter at this time we can not use them. But just incase we can use them again one day I will explain how they work.
style
#aboutme {
left:330px;
top:205px;
widht:300px;
height:300px;
color:#fff;
postion:absolute;
}
/style
div id="aboutme"
This would be your about me. C:
/div
See how the "postion:absolute;" is in the style tags instead of in the DIV tag? That's really the only difference. If you code layouts or websites for another site other than neopets it is better to use this method instead of the above one.
Changing the look
To change the look and position of a DIV you do very similar codes to how you
link decorate. Here is an example of what it might look like:
#aboutme {
background-color:transparent;
width: 470px;
height: 500px;
top:350px;
text-align:justify;
font-size: 8pt;
overflow: auto;
}
Many people would rather the DIV not scroll. To do this set the overflow to auto (
overflow: auto;) and the height to auto (
height: auto;) What this does is allows the div's height to change, depending on the amount of text you have inside. The div will grow in height as you are typing.
Remember that the "aboutme" can be changed to whatever you would like the DIV to be called. They have to match up though. EX:
#
goals {
background-color:transparent;
width: 470px;
height: 500px;
top:350px;
text-align:justify;
font-size: 8pt;
overflow: auto;
}
text text text
Top of page
Advanced - Image Resizing
Sometimes your images just wont fit where you want them to. Be it a scrollbox or a div, it's a hassle to resize the image in an image program right? Well here's a simple code that will do it for you:
replace "http://pets.neopets.com/cp/rnw3jtg8/1/4.png" with your own image url
It's perfect because it will make this large picture:
Icon size!
You can change the dimensions in the code to get the picture just the way you need it.
When the image is dragged to the URL bar, it will return to its original size.
* To size an image to be the exact width or height as a div or a page, add "width:100%" or "height:100%" to the code.
Top of page
Advanced - Wrap Text Around Image
Wrap around text can be useful when you have just a little image you want to put up, but don't want to break your body of text up. This trick is great for stories, about me's, and any other instance where you have a large body of text. Example:
So as you can see the all the text will go to the right of the image, in which case the icon. Could this be the product of black magic? No my fine friends 'tis simple HTML. Oh, yes I know this may startle and
amaze some, but I assure you what is happening here is purely natural, and you need not be frightened. Lulz, remind me to never type like that again. Kthxbye. So as you can see the all the text will go to the right of the image, in which case the icon. Could this be the product of black magic? No my fine friends 'tis simple HTML. Oh, yes I know this may startle and amaze some, but I assure you what is happening here is purely natural, and you need not be frightened. Lulz, remind me to never type like that again. Kthxbye.
So as you can see the all the text will go to the right of the image, in which case the icon. Could this be the product of black magic? No my fine friends 'tis simple HTML. Oh, yes I know this may startle and amaze some, but I assure you what is happening here is purely natural, and you need not be frightened. Lulz, remind me to never type like that again. Kthxbye. So as you can see the all the text will go to the right of the image, in which case the icon. Could this be the product of black magic? No my fine friends 'tis simple HTML. Oh, yes I know this may startle and amaze some, but I assure you what is happening here is purely natural, and you need not be frightened. Lulz, remind me to never type like that again. Kthxbye.
Left:
Right:
*Replace my Hugh Laurie icon with your image URL.
You'll also notice that the text doesn't touch the images' sides as it's being wrapped. This is due to padding. "padding: 5px;" will render the image to be more separated from the text.
Top of page
Advanced - Wrap Text Around DIV
This is helpful when you need to put in quotes you want to stand out, or for putting description under an image you want to be wrapped in text. Among many other things.
Oh yes, here it is again. Thy text of the filler kind. Once more I will show you things that may shock and amaze your simple little mind. I beg of you to not stone me to death nor charge me of witch craft for this is a common and simple code that will aide in the making of your domain. Uhhhh....yeah.
Ohh, look it's my dreamie.
Oh yes, here it is again. Thy text of the filler kind. Once more I will show you things that may shock and amaze your simple little mind. I beg of you to not stone me to death nor charge me of witch craft for this is a common and simple code that will aide in the making of your domain. Uhhhh....yeah. Oh yes, here it is again. Thy text of the filler kind. Once more I will show you things that may shock and amaze your simple little mind. I beg of you to not stone me to death nor charge me of witch craft for this is a common and simple code that will aide in the making of your domain. Uhhhh....yeah. Oh yes, here it is again. Thy text of the filler kind. Once more I will show you things that may shock and amaze your simple little mind. I beg of you to not stone me to death nor charge me of witch craft for this is a common and simple code that will aide in the making of your domain. Uhhhh....yeah. Oh yes, here it is again. Thy text of the filler kind. Once more I will show you things that may shock and amaze your simple little mind. I beg of you to not stone me to death nor charge me of witch craft for this is a common and simple code that will aide in the making of your domain. Uhhhh....yeah.
Put this in between your style tags:
Put this in your body of text:
Suggestions
Now you can dress up the code how ever you want. This is just a very simple version. These things are really very handy. (I think that's such a cute phrase "handy") Some suggestions are:
-
Justify the text so it looks more clean.
- Add a border around the image (if using one)
- Change text to be different from you main body text
- Use Image Resizing to size down any large images
- Try to keep them small. 200px200px is a good size.
Top of page
Advanced - Side by Side DIVs
This is a very common question I see/get on here: "How do I have two DIVs placed side by side?". All you have to do is add the property
float:left; to the DIV id. Simple eh? Example:
Oh gee! Could it be? The wonderful mystery of the side by side DIV! Oh yes it's true! The only rhyme word I can think of is poo. So with that I'll pet my cat and say good day to you.
Whoa.
Oh gee! Could it be? The wonderful mystery of the side by side DIV! Oh yes it's true! The only rhyme word I can think of is poo. So with that I'll pet my cat and say good day to you.
Whoa.
Code:
Note:
The above is just a sample DIV box. You can edit it how ever you like just be sure to have
float:left; in there somewhere. You can change "left" to "right" if need be.
Top of page
Advanced - Image Rollovers
Here's how to do a simple image link rollover. Ex:
Alright, first we're gonna need the images you're going to use. Image1 will be the actual image link, and Image2 will be image you see when you hover over Image1. Here are the images I will use:
Image1:
Image2:
Remember that you'll need to know the exact height and width of these images. You'll have to put them into the style tags along with the image urls. Now let's to make the style tags. This will be all the coding neccessary for the image hover:
The "go" part can be changed to any name, just make sure that they match each other. For instance, you can change it to "link" but you must also change "go:hover" to "link:hover." The bolded text will tell you what you need to put there. Be sure to input put the correct information or the image hover will not work.
Finally, let's make the image hover link:
Again, remember that the "go" part of the link must match up with the coding. Simply place this link where you want the image hover to show up and done!
Incorporating an Image Hover Into a Design
Now image hovers are not the best things to use on user lookups due to the limit of codes so if I were you I would keep them strictly to petpages, unless you don't intend to have a massive about me on you lookie.
If all you links go in a straight line and you don't mind them being close together you can just place the image links (the second code given above) side by side, but if you want your codes to be spaced through the page or in a specific way you will have to section off each link into there own DIV and position them separately.
Image links seem complicated, but they are really easy and give a dramatic effect to any site. Make them as simple or complex as your heart desires.
Top of page
Neopets - Hide Codes
All these codes go between style tags.
Remove the header section
This will remove the top header part. Remember if you do this you must provide some form of navigation somewhere else on your page.
|
|
|
Get rid of the inner neo section, only have the outer
Add in your bg url where it says URLHERE, change the color after color: to the color you want your bg to be while it waits to load your image bg. Or add no BG image at all. This will give you just one constant background, now "inner" or "outer"
|
|
|
Remove the footer section
This will remove the footer section.
|
|
|
Get rid of section background and border
This will get rid of the white inner background and the black border it has.
|
|
|
Blank user lookup.
This will remove your header, footer, and the main area stuff, and only leave your neo info on the page.
|
|
|
Remove the horizontal scrollbar
This removes the horizontal rules that neo automatically has in some places in your lookup and your gallery.
|
|
|
Remove the banners.
This will remove the top and bottom banners that you have in your shop, gallery, guild, etc.
|
|
|
Remove shop.
This will hide your shop on your lookup.
|
|
|
Remove pet images
This will remove your pet's image from your lookup
|
|
|
Remove User Collections
This will remove your "User Collections" section
|
|
|
Remove User Info
This will remove your "User Info" section
|
|
|
Remove trophies.
This will remove your trophies from your lookup
|
|
|
Top of page
Neopets - Lookup Sections
All these codes go between style tags.
Change color of headers
This will change the color of headers that are on your lookup sections.
Change where it says COLOR to change the background color and then the text color of the header.
|
|
|
Change color of the table borders
This will change the color of table border that is around the lookup sections.
Change where it says COLOR to change color, you can also change the border width and type..
|
|
|
Change color of the outer gray table border.
This will change the color of table border that is around the lookup sections.
Change where it says COLOR to change color, you can also change the border width and type.
|
|
|
Put a background in the lookup sections.
This will put in a bg for each of the lookup sections.
Put in the URL of the background you want to add, where it says URLHERE.
|
|
|
Change color of the lookup sections background.
This will put in a bg for each of the lookup sections.
Put in the color you want the background to be where it says COLOR.
|
|
|
Top of page
Neopets - Fonts/Links
All these codes go between style tags.
Change the main body font
This code will change the color of your whole pages font.
|
|
Change your link colors
This will change the color of all the links on the page.
|
|
Change the color of the bolded fonts
This will change the color of all the bolded fonts on your page.
|
|
Change the color of the bolded links
This will change the color of the things that are both bolded and links, but leave the things that are only links the color you have your links set at.
|
|
Change the color of the text in the footer
This will change the color of all the text in the footer. Like the Copyright info and the search bar/language select text.
|
|
Change the color of your Neoclock
This will change the color of your neoclock text.
|
|
Change the color of the top user stats text
This will change the color of the top user stats text, like Welcome, np, etc.
|
|
Change the color of links when you hover
This will change the color of when you hover over your links. You can use this with any of the above codes that have an "a" in them, so that you can make each part different. You just add the :hover after the "a", of whatever special area you want to make have a different hover color.
|
|
Change the color of links that have been visited
This will change the color of links that have been visited. You can use this with any of the above codes that have an "a" in them, so that you can make each part different. You just add the :visited after the "a", of whatever special area you want to make have a different visited color.
|
|
Other things you can adjust
There are lots of other things you can add into the base codes to adjust certain things in the codes.
For example, if you want to change the font-size of your links and make them bold, then after the #main a {color:COLOR;}, you would add in the code font-size:14pt; and font-weight:bold;, so your code would now look like:
#main a {color:COLOR; font-size:14pt; font-weight:bold;}
You can do this to any of the above font/link codes.
Top of page
Neopets - Graphics/Images
All these codes go between style tags.
Put in your own header
This code will let you put in your own header image for the neo header background.
You need to put in your url where is says URL. Then you need to change the ## after height to the height of your header.
|
|
|
Put in your own footer
This code will let you put in your own footer image for the neo footer background.
You need to put in your url where is says URL. Then you need to change the ## after height to the height of your footer.
|
|
|
Add your own Shield
This will put a shield in the general area of where your shield goes.
You need to put in your url where is says URL.
** The image size is 100px width and 150px height**
|
|
|
Resize Pet Images
This will change the size of the images of your pets on your lookup.
The width is how long it will be and the height is how tall it will be.
|
|
|
Top of page
Neopets - Editing Content Modules
All these codes go between style tags.
This will show you how you would edit size, background color, text color, etc. of the content modules on your lookup.
Here's an example. Lets say I wanted a smaller user collections (module that contains avatar, stamp, site theme count):
#usertrophies{
width:250px;
height:autopx}
That is what it would look like. The "height:autopx" indicates that there will be no set height, but the module will only be 250px wide. You change the "250" to your desired module width.
All Module Names
#userneopets
#usertrophies
#usercollections
#usershop
#userinfo td.medText
Now if you wanted to hide any of these modules you would simply put {display:none;} after it.
Top of page
Neopets - Simple Custom Nav
All codes go between style tags
In this section I will be showing you how to insert a custom navigation.Though putting in a header is very similar it is different. I will cover how to do a header later on.
EX.
Drag to address bar
This is just a quick example, obliviously. You can make your as extravagant as you want. ;D
Code:
Template:
Drag to address bar
You can use this to help position the words on your nav.
Code Breakdown:
.contentModule,#header{border:none}
.nav_image img{
display:inline!important;
filter:alpha(opacity=0);
Makes it so the opacity is 0 meaning invisible
opacity:0
You can change this to control the opacity, though in this case it has to be 0
}
#header{
background:URL('http://i48.tinypic.com/312kcpi.jpg') center center no-repeat;
This is where you input the navigation URL click here if you don't know what that is
height:100px;
This controls the height of the image. You can use this to help position your nav so the links match up.
}
More on positioning:
For this kind of simple nav the positing is relatively simple. (lol) Both my image background and content background is white, so the white is just obviously going to blend. If you were to have a nav image on something other than a solid color background you may run into trouble. If possible try and have the background of the nav image transparent. Meaning save your image without a background, just the text and what not. Make sure to save it as
.png. NOTE: You
can not save images as transparent in Paint. I am not sure about gimp.
The thicker the nave image the more
height:; You will have. Increase/decrease the height untill when you hover over the links the nav shows uo in the place you want it.
I want to point out that the images are not actually linked, the original neopet nav is just invisible.
Top of page
Grab and Go
Changing Link Color, Font Type, & Size
|
|
|
- Cursors
Question Mark Cursor When on Links
|
|
|
Crosshair w/ Arrows Cursor
|
|
|
- Changing Text
- Transparency
Adding Transparency to Stats Images
|
|
|
Adding Transparency to Stats
|
|
|
- Adjusting Sizes
Size of Your Shop Keeper Image
|
|
|
Size of Your Neopets' Images
|
|
|
Size of Your Trophy Images
|
|
|
- Headers
- Userinfo
Remove Trades, Auctions, Wishlist ect.
|
|
|
Adjusting the Size of Your Userinfo
|
|
|
- Pets
Adjusting Size of Your Neopets Box
|
|
|
Add Border Around Neopets
|
|
|
- Petpage
Removing Banner at Top of Page
|
|
|
Removing Copyright on Bottom of Page
|
|
|
- Shop & Gallery
Removing Nickelodeon White Ad Bar
|
|
|
Removing Header & Footer Images
|
|
|
Top of page
Other - Neopets HTML Guide
Yes, neopets.com has it's own official help page that little people know about/link to in reference. While the page only covers the most basic of the basic I still would recommend any newbies read through it. I promise it will help you in the long run. So get to clickin'.
Neopets HTML Guide
Top of page
Other - Source Code
I believe a good way to learn how to use HTML/CSS in a more dynamic way it to see first hand how others are using it. A way to do this wold be to peek at their source code.
I DO NOT how ever condone in anyway the stealing of codes using the source code method. I simply think seeing first hand how a code looks helps people learn and remember how to code themselves. Please use this responsibly.
Microsoft Internet Explorer users
To view the source code of a web page in Microsoft Internet Explorer, follow the below steps.
- Open Internet Explorer
- Click View
- From the drop-down-menu click "Source
Once the above steps have been completed a new window will open displaying the source code.
Mozilla Firefox and Netscape users
To view the source code of a web page in Mozilla Firefox or Netscape, follow the below steps.
- Open Mozilla Firefox or Netscape
- Click View
- From the drop-down-menu click "Page Source
or
- Press CTRL+
Once the above steps have been completed a new window will open displaying the source code.
Tip: In Firefox you can highlight the portion of a web page you want to view the source code of and then right-click that highlighted section and click View Selection Source.
Opera users
To view the source code of a web page in Opera, follow the below steps.
- Open Opera
- Click View
- From the drop-down-menu click "Source
or
- Press CTRL+F3
Once the above steps have been completed a new window will open displaying the source code.
Top of page
Other - HTML Definition
HTML (Hyper Text Markup Language) is a widely accepted web-design language.
HTML is responsible for the construction, and the total output, of a page.
There are three "sections" of a decent HTML document source: Inline, Internal, and External.
Inline markup goes in the body tag, and defines the webpage's base layout. It structures the output of a webpage, such as creating tables and divisions (And the data in them), forms and buttons, links (And anchors), or even just normal text and images (And videos, flash documents, etc). Inline markup is not generally used to decorate the page with colors and borders, as these methods are usually deprecated. HTML should be used to create the structure of a webpage - Not decorate it with borders, lines, and colors (Although it's possible).
Internal markup goes in the head tag (Excluding DtD's, which go in the first line of a document, etc). Most of the time, users do not directly see anything in internal markup (With the exception of something such as the title of a page). Internal markup can declare some special things about a page that the user won't notice, such as the Character Set Declaration, the Document Type Declaration, and keywords (For search engine purposes) to that webpage.
Multi-web-language documents need to use Internal markup to link the multiple languages together (Like CSS), so in a way, Internal markup is also used for decorating, aligning (etc), and making dynamic things, out of Inline markup.
External markup is markup (Of any language) not contained in the HTML document, but in a different file. The contents of this file, to retrieve the markup, can usually be called by Internal Markup. External markup could effect the webpage in vast variety of ways.
Top of page
Other - CSS Definition
CSS (Cascading Style Sheets) is another widely-accepted web-design language.
Unlike HTML, CSS does not "create" anything. Instead, it decorates, aligns, and positions (etc) elements in HTML. In a nutshell, CSS takes the normal HTML output and adds a few rules to how it's actually displayed.
CSS can edit things such as element width and height, background color, border, alignment, and actual visibility, for starters. HTML is capable of doing some of these things, but as mentioned earlier, the methods are usually deprecated, or are soon to be deprecated.
Top of page
Other - Hex Codes
Hex codes are a set of 6 numbers/letters used to represent color. Each set of numbers has a different color attached. There is an uncountable amount of hex codes, and the easiest way of getting hex codes are to use programs such as photoshop or one of the many online hex code generators, but if you are looking for a good array of colors then this chart should suffice.
Drag and drop to adress bar!
Top of page
Neoboards - Remove Siggy Line
Removing that annoying siggy line is easier than you might think (or aye it's just as easy who knows)
All you do is put a
[ at the end of the NeoHTML box and a
] at the end of the NeoSignature box.
Click here if you are still not sure what you are doing.
Top of page
Neoboards - Breaks/Text Aliment
Adding a breaks in your sig will help people decipher whats your post and what isn't. You can either center your text or have it to the left.
To make it so that the lines are right on top, or separated, in other words, you would use
[br]. This is the same as in HTML, it will leave one line break. Using
[p] will make a paragraph break.
Click here if you are still not sure what you are doing.
[center] STUFF HERE
[/center] is how you would center something. Not having a center tag will automatically align your text to the left.
Aligning text to the right
In HTML and CSS, this is possible. But in Neosignatures? It is not. The only way to align your text to the right would be to use a lot of spacing before your text. But even then, after each new line, it would be aligned back to normal.
Top of page
Neoboards - Siggy Walk Through
Signatures are very easy once you get the hang of them. And it isn't hard to get the hang of them.
Drag and drop the images to the address bar for a better view
Signatures use a markup language called BBcode, which stands for Bulletin Board Code. It's a code used as a type of HTML in message boards, such as the Neoboards.
neoHTML
All neo signatures must have neoHTML in them. Where ever you place the neoHTML is where your text will show up when you post.
Center Text
Centering your text is very simple. Just as you would on a petpage or a lookup you use center tags, but instead you use brackets ([).
Color/Size/Font Face
To change how the text will look you change the font face just as you would any other text. The color uses hex codes as normal too, and the sizing of the text is 1-5. 1 being the smallest and 5 being the biggest.
To save on chars (charters) if you want anything the default look delete it from the code.
EX: Since I want my font color to be black I can delete the "c=#000
[fontf=arials=1]neoHTML[/font]* Keep in mind that if you delete the color code, your font will not show up the same in all browsers. It will show up as black in Firefox, and pink or red in IE and Chrome. If this is an issue, keep the color code in your font.
The default font size is 2 and the default font face is something close to arial (sorry I am not sure what it is, but I prefer arial over it)
Breaks
Breaks, just like they do everywhere else, cause line breaks thus adding a space between whatever they are in the middle of.
Non-neoHTML and Text Decoration
Adding text that is non-neoHTML is just the same, and to bold, underline, ect. you just do what you would normally do just use brackets instead!
Get Rid of the Siggy Line
To get rid of a siggy line you add a [ at the end of the top bar and a ] at the beginning of the bottom:
Now Finish Up!
Just keep on experimenting with the codes you learned to create your very own custom siggy!
Top of page
Neoboards - Examples
Here are a few sigs that are free for you to use/change without credit. They may
not be redistributed. Just remember these are just outlines. They are not colored or complicated. That's your job to make them so they are. ^_~
Dicanary:
Sincerely:
BLAH . BLAH . BLAH:
Nerdy:
Celling:
Top of page
Neoboards - Rules and Etiquette
There are some offical rules when it comes to siggies and also some things you should try to avoid.
- Do not make your neoHTML white - reportable
- Make your ntoHTML a readable font face/color (no very bright colors or script fonts) - common courtesy
- Do not make a sig that will stretch the boards horizontally - reportable
- Do not make a sig that will stretch the boards vertically - common courtesy
- Do not rip off other peoples siggs - common courtesy
NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2010 | Used With Permission
