Home Help Affilates Site Poll Updates The Owner
Help Top Of Page Neopets
css for you

Welcome to Css for you, a CSS guide with the

goal to help you create your own unique pages. Hope I can be

of some help. My neomail is always open for questions.
Welcome & Updates.
Welcome,

Welcome to CSS for you, a page that doesn't remotely cover everything about coding, but covers what you should know about coding on Neopets.

If you are looking for something specific that is not in the Navigation, try CTRL+F (Mac: Command+F) and searching a word or phrase. If you have looked through this page and have not found the answer to your coding question, or are still stumped on something, feel free to mail me.

NOTE: TNT changed the filters again and some people are having problems their userlookups and petpages. Look through your coding and remove all the -blocked- from your CSS.

Happy coding! : )

Neopets Hide Codes Lookup Sections Fonts/Links Graphics/Images Editing Content Modules Simple Custom Nav Grab and go Changing Links Cursor Changing All Text Transparency Adjusting Sizes Headers Userlookup Pets Petpage Shop & Gallery Neoboards Remove Siggy Line Breaks/Text Aliment Siggy Walk Through Examples Rules and Etiquette Other Font Size, Color & Face Style Tags Images Box terms Z-index Text areas Page Anchors Scroll bar DIV Boxes Side by Side DIVs Image Rollovers Mouse Link Decorating List Background Image Resizing Wrap text Around DIV Wrap Text Around Image Neopets HTML Guide Source Code HTML Definition CSS Definition Hex Codes

The Basics



*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 1
Font size 2
Font size 3
Font size 4
Font 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 You
Css For You
Css For You
Css 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. Css {For:You;}

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.

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: 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 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:

link

Hover


and 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:

link

Hover


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



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:

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:

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.

Top of page


Neopets - Lookup Sections



All these codes go between style tags.

Top of page


Neopets - Fonts/Links



All these codes go between style tags.

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.

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



- Cursors
- Changing Text
- Transparency
- Adjusting Sizes
- Headers
- Userinfo
- Pets
- Petpage
- Shop & Gallery

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.
  1. Open Internet Explorer
  2. Click View
  3. 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.
  1. Open Mozilla Firefox or Netscape
  2. Click View
  3. From the drop-down-menu click "Page Source
or
  1. 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.
  1. Open Opera
  2. Click View
  3. From the drop-down-menu click "Source
or
  1. 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.



NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2010 | Used With Permission









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