Please note: This site now only offers Gallery/Shop codes and graphics.

Finally I've started work on a more advanced coding section.
This is for those who already know all the basics, but want to go a stage further with their layouts.These codes all you to move your images and items, create fancy navigation techniques, and many more codes will follow.

Including the codes needed to make your page like this one :D

The under construction images will remain until I have got a large portion of each finished, so make sure you check back later ^_^ You may even find the module sections has been completed.

Fixed Background - no repeat

To change the position replace the words "top center" with either of the following (dependant on where you wish it to go) :- top right - top left - top center - bottom right - bottom left - bottom center

Tiled Backgrounds

If using a small tiled image remember to put your items in a table or the page will look untidy and item names will be harder to read

Vertical Tiling

Vertical tiling is great for producing a single tiled image down the right hand side of your page :)

[BACK TO TOP]

With both div's and tables you can use either hex colours (eg. #ffffff) or the css colours such as white,black,red etc. Simply change where it states background-color:white.You can also change the width, set a height, how the text is aligned (right,left,center) and also the border colour,strength (1px being smallest) and style. This must go at the very bottom of your page.

Border Examples

Select which border type you wish to use and change where it says solid in the following codes.

dotted dashed solid double ridge groove inset

If you prefer not to use a border simply delete the border properties (ie. border:black 1px solid;)

Table with solid background colour

Table with background image

Table with border image

To change the border width change the cellpadding amount ( 1 = smallest )

Table with both border and background image

To change the border width change the cellpadding amount ( 1 = smallest )

Div (scroll box) with solid background

Div (scroll box) with background image

[BACK TO TOP]

Font Family Examples

Arial , Verdana , Georgia , Comic sans ms , Helvetica , Courier new , Impact , Tahoma , Times nr

Simply decide which font style you prefer and put the font name after where it says font-family: the following codes are set to arial.

Text-Decoration

underline , overline, underline overline

To use a text decoration, paste the name of the desired effect after where it says text-decoration:

Main Text

Links

Visited Links

Drop Down Links

This code is not only to change the links, but also the colour of the drop down menu's enabling you to match your theme.
The first colour option is for the standard link colour, the background colour is exactly that, and the hover colour is to select which colour to change to when scrolled over.
I'd suggest using a colour just lighter than your main font colour to make it kinder on the eyes.

Changing the Copyright Colour

Remember each theme has a different coloured footer font, so although it may look good in your chosen theme, it maybe unreadable in others. (This is also true of header links)

Changing A Single Line Of Text


using this you can change the colour, size or font family (face) of selected parts of text to make them stand out.handy for headers,or just to decorate.or even make text like this
Rai nbow

[BACK TO TOP]

Please note that scroll bar changes are only viewable in Internet Explorer.


This is a some what crude, yet explanitory image showing which part of the following code changes which colours. Obviously you should alter the colours accordingly to suit your own layout.

Basic Scrollbar Colour Change

This code will change all but your arrows to shades of purple. Try it for yourself :). Just change the HEX code to the colour of your choice.


Completely Customized ScrollBar This will change your scroll bar to match our UGLY! example. So please change the colours to your own suiting.
If you are unsure of Hex colours google and search the first few image results whilst we get our own.
They also show which colours go well with one and other.

[BACK TO TOP]

Adding An Image

Please note the speach marks are important, the image wont work without them. Change the width and height to the dimensions of your image (especially if using .png format, as without their width and height being defined , they'll not show in IE)

Adding A Linked Image

This code is what is used in link back buttons.
Remember you can not link a site outside neopets.
Again the speach marks are important.Change the width and height to the dimensions of your image (especially if using .png format, as without their width and height being defined , they'll not show in IE)

Image borders

Border Examples

Select which border type you wish to use and change where it says solid in the following codes.

dotted dashed solid double ridge groove inset

[BACK TO TOP]

Please note : These effects (except opacity) are IE compatable ONLY!!!. Roll Over effects ONLY work on linked images.

You can use all these effects on standard images ( IMG ) and linked images ( A:LINK IMG ) You can mix and match your effects.

Opacity (Transparency)

Both numbers must be the same (the second makes it FF compatable)
0 opacity level = none visible
100 opacity level = solid

Circle Transparency

Blur

Vertical Flip

Horizontal Flip

Grayscale

Invert

Wave

X-ray

[BACK TO TOP]

This section is dedicated to all those people who much TEXTAREAffered the old style of neopets.
With the following codes you will gain the ability to recreate the old gallery view exactly ^_^
However you must be sure to add ALL codes from the REMOVAL CODES section.

Image Map #a For all whom where using a customed "old school" sidebar you will probably have noticed it no longer works! This is due to the site changes and the image map #a that was used is no longer valid.
Copying this code will make the links work once again :)
Some link url's have been changed as theyre no longer the correct URL. This has been created using paintshop pro's Imapper.

The Sidebar The URLS provided in this code are MY OWN templates. You are of course free to use them for your own. Copy and paste the following URLS into your browsers search bar. Right click and save the images to decorate as you wish to.

The coloured areas are where your links will go Remember to get them in the correct order.

create, central, explore, games, neomail, shops, neoboards, news, stuff, help, login, logout

You may make the images smaller, longer , wider etc. But you must keep the links where theyre originally positioned. (Unless you choose to create your own IMAP of course).

Top Banner Again I have provided a template you may use for your top headers. You may again deocrate as desired. If you choice to keep the image in the rounded box (as all TNT headers once where) remember to save the green corners as transparent.If you're using Microsoft Paint however, you will be best using either a rectangle or making the green area a colour which will blend well with your background.

[BACK TO TOP]

Removing The Header + Footer

Removing The Rotating Image

Removing SideBar (pet and neofriend modules)

Removing Ad's (Thanks sylvanna89 for sharing)

[BACK TO TOP]

Replacing The Header


Tips : When editing the header right click and save the neopets generic header. Draw sqaure vector around the links box and flood fill the inside one colour and the outisde another. This will ensure you have the positionings correct.
Dont forget you MUST add the ad's removal code to your page or they will cover your ptetty new header.
Also not all themes have the same coloured link images so try to avoid using white or black especially for your link area.

If you wish to make your header larger or smaller, then the original edit the width and height accordingly. Remember to keep the link area the same height from the top.

Replacing The Footer

Tips : When editing the footer right take a screen shot of the original, Again draw boxes around the copyright, searchbar and neopets text As these will be needed, They can be removed but there's no real reason to do so.Then decorate around them so theyre still visible to users.

The neopets logo stays hyperlinked whether you have put it onto your image or not.

[BACK TO TOP]

[BACK TO TOP]

YOUR DEDICATIONS TO SLOTH GO HERE.

YOUR DEFENDER'S PLEDGE GOES HERE

[BACK TO TOP]

[BACK TO TOP]

[BACK TO TOP]




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