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

<style > body,#main,#content{background-image: url('WWW.NEOPETS.COM/IMAGE.PNG'); background-attachment: fixed; background-position: top center; background-repeat: no-repeat; } </style >

Tiled Backgrounds

<style > body,#main,#content{background-image: url('WWW.NEOPETS.COM/IMAGE.PNG'); background-attachment: fixed; background-position: top left; background-repeat: repeat; background-color:#ffffff} </style >

Vertical Tiling

<style > body,#main,#content{background-image: url('WWW.NEOPETS.COM/IMAGE.PNG'); background-attachment: fixed; background-position: top right; background-repeat: repeat-y; background-color:#ffffff} </style >

[BACK TO TOP]

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> <tr> <td style="width: 550px; height:150px; text-align:center; background-color:white; border:black 1px solid;"> YOUR TEXT WILL GO HERE </table>

Table with background image

<table> <tr> <td style="width: 550px; height:150px; text-align:center; background-image:url('WWW.NEOPETS.COM/IMAGE.PNG'); border: black 1px solid;"> YOUR TEXT WILL GO HERE </table>

Table with border image

<table style="background:url(WWW.NEOPETS.COM/IMAGE.PNG)" cellpadding=5><td> <table width=550 style="background-color:white"><td> YOUR TEXT WILL GO HERE </table></table> To change the border width change the cellpadding amount ( 1 = smallest )

Table with both border and background image

<table style="background:url(WWW.NEOPETS.COM/IMAGE.PNG)" cellpadding=5><td> <table width=550 style="background:url(WWW.NEOPETS.COM/IMAGE.PNG)"><td> YOUR TEXT WILL GO HERE </table></table> To change the border width change the cellpadding amount ( 1 = smallest )

Div (scroll box) with solid background

<div style="overflow:auto;width:200;height:150;text-align:center; background-color:white; border: black 1px solid;"> YOUR TEXT WILL GO HERE </div>

Div (scroll box) with background image

<div style="overflow:auto;width:200;height;150;text-align:center; background-image:url('WWW.NEOPETS.COM/IMAGE.PNG'); border: black 1px solid;"> YOUR TEXT WILL GO HERE </div>

Item Table

<div style="width: 550px; text-align: center; background-color: white; border: black 2px solid;"> <table align=center border=0 cellpadding=3> </b> <center>

This will put all your items,and anything else below it, into a table. A must if using a busy background.

blogs

Coding blogs isnt always that simple,you have to be sure which ever way you choose to code it doesnt conflict with any other part of coding, I find it much simplier to visit the site below (Non neo link) :) there you can code and preview your blogs in seconds, they work in any browser and cause no conflictions

[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

<style > td,p{ font-family:ARIAL; font-size: 8pt; color:#000000; text-decoration:none;} </style >

Links

<style > a:link{ font-family:ARIAL; font-size:8pt; color:#ffffff; text-decoration:none;} </style >

Visited Links

<style > a:visited{ font-family:ARIAL; font-size:8pt; color:#000000; text-decoration:none;} </style >

Links When Hovered

<style > a:hover{ font-family:ARIAL; font-size: 8pt; color:#000000; text-decoration:none;} </style >

Drop Down Links

<style > ul.dropdown {color: #000000; background-color: #990000; border: solid black;} li.over ul.dropdown a:hover, .tl:hover, li:hover ul.dropdown a:hover{color: #ffffff;} </style > 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

<style > .copyright,.sf,{color: #ffffff;} </style >

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

<font face="arial" size="+2" color="red">text</font>

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]

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

<style > body {scrollbar-base-color: #800080;} </style > 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 <style > body { scrollbar-face-color: #008000; scrollbar-arrow-color: #FFFF00; scrollbar-highlight-color: #800080; scrollbar-3dlight-color: #FF0000; scrollbar-shadow-color: #00FFFF; scrollbar-darkshadow-color: #FF00FF; scrollbar-track-color: #8000FF; scrollbar-base-color: #800080;} </style > 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

<img src="WWW.NEOPETS.COM/IMAGE.PNG" border="0" width="70" height="38"> 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

<a href="WWW.NEOPETS.COM"> <img src="WWW.NEOPETS.COM/IMAGE.PNG" border="0" width="70" height="38"> </a> 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

<style > IMG{border-style:solid;border-color: black; border-width:2px;} </style >

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 ), linked images ( A:LINK IMG ) and images on hover ( A:HOVER IMG ). You can mix and match your effects.

Opacity (Transparency)

<style > IMG{filter:alpha(opacity:95);opacity:.95} </style >

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

Circle Transparency

<style > IMG{ filter:Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0);;} A:LINK IMG{ filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0);} A:HOVER IMG{ filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0);} </style >

Blur

<style > IMG{filter: Blur(Add = 0, Direction = 225, Strength = 10);} A:LINK IMG{filter: Blur(Add = 0, Direction = 225, Strength = 10);} A:HOVER IMG{filter: Blur(Add = 0, Direction = 225, Strength = 10);} </style >

Vertical Flip

<style > IMG{ filter: FlipV; } A:LINK IMG{ filter: FlipV;} A:HOVER IMG{ filter: FlipV;} </style >

Horizontal Flip

<style > IMG{ filter: FlipH;} A:LINK IMG{ filter: FlipH;} A:HOVER IMG{ filter: FlipH;} </style >

Grayscale

<style > IMG{ filter: Gray; } A:LINK IMG{ filter: Gray; } A:HOVER IMG{ filter: Gray; } </style >

Invert

<style > IMG{ filter: Invert; } A:LINK IMG{ filter: Invert; } A:HOVER IMG{ filter: Invert; } </style >

Wave

<style > IMG{ filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10); } A:LINK IMG{ filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10); } A:HOVER IMG{ filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10); } </style >

X-ray

<style > IMG{ filter: xray; } A:LINK IMG{ filter: xray; } A:HOVER IMG{ filter: xray; } </style >

[BACK TO TOP]

Image Map #a <map name="a"> <area shape="rect" coords="6,11,131,48" href="http://www.neopets.com/reg/page5.phtml"> <area shape="rect" coords="6,60,131,97" href="http://www.neopets.com/petcentral.phtml"> <area shape="rect" coords="10,110,129,130" href="http://www.neopets.com/explore.phtml"> <area shape="rect" coords="8,142,133,165" href="http://www.neopets.com/gameroom.phtml"> <area shape="rect" coords="3,175,132,191" href="http://www.neopets.com/neomessages.phtml"> <area shape="rect" coords="6,202,131,227" href="http://www.neopets.com/objects.phtml"> <area shape="rect" coords="6,239,131,258" href="http://www.neopets.com/neoboards/index.phtml"> <area shape="rect" coords="6,271,129,292" href="http://www.neopets.com/nf.phtml"> <area shape="rect" coords="8,305,128,329" href="http://www.neopets.com/stuff.phtml"> <area shape="rect" coords="8,339,132,363" href="http://www.neopets.com/help.phtml"> <area shape="rect" coords="5,373,131,393" href="http://www.neopets.com/login.phtml"> </map> 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 <style > #sidebar{position:absolute;top:47px;left:0px} #topheader{position:absolute;top:3px;left:0px} </style > <p> <img id=sidebar src=http://i4.photobucket.com/albums/y128/gothicbimbo/sidetemp.jpg usemap="#a" border=0> <p> <img id=topheader src=http://i4.photobucket.com/albums/y128/gothicbimbo/topbartemp.gif border=0> <p> 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.

http://i4.photobucket.com/albums/y128/gothicbimbo/sidetemp.jpg http://i4.photobucket.com/albums/y128/gothicbimbo/topbartemp.gif

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 <style > #banner{position:absolute;top:60px;left:227px} </style > <img id="banner" src=http://i4.photobucket.com/albums/y128/gothicbimbo/BANNER_TEMP.gif> 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

<style > #header,#footer{display:none;} </style >

Removing The Rotating Image

<style > #footernifty{display:none;} </style >

Removing SideBar (pet and neofriend modules)

<style > .sidebarmodule,.sidebar{display:none} </style >

Removing Ad's (Thanks sylvanna89 for sharing)

<style > .adbox, .adBox2, #ban, #ban_bottom, .ad_wrapper_fixed {display:none} </style >

[BACK TO TOP]

Replacing The Header

<style > #header{background:url(WWW.NEOPETS.COM/IMAGE.PNG) ; height:77px; width:1000px;} </style >
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

<style > #Footer{background:url(WWW.NEOPETS.COM/IMAGE.PNG);width:1000px;} #footerNifty{display:none} </style >

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]

<a href="http://www.neopets.com/~Wroshandi"> <img src="http://i4.photobucket.com/albums/y128/gothicbimbo/cb4.gif"></a>

<a href="http://www.neopets.com/~Wroshandi"> <img src="http://i4.photobucket.com/albums/y128/gothicbimbo/cb3.gif"></a>

<a href="http://www.neopets.com/~Wroshandi"> <img src="http://i4.photobucket.com/albums/y128/gothicbimbo/cb2.gif"></a>

[BACK TO TOP]

[BACK TO TOP]

[BACK TO TOP]

COLLECTOR OF EVERYTHING

<style > body,#main,#content{ background:#000; background-image: url('http://i4.photobucket.com/albums/y128/gothicbimbo/galleryofeverythingtablebg.png'); background-attachment: fixed; background-position: top center; background-repeat:repeat-y;border:0px;} td,p{font-family: helvetica;font-size:8pt;color:#fff;} A:LINK{font-family: helvetica; font-size: 7pt;color:#fff;text-decoration:none;} A:VISITED{font-family: helvetica; font-size:7pt;color:#fff;text-decoration:none;} A:HOVER{font-family: helvetica; font-size: 7pt;color:#fff;text-decoration:none;} #header,#footer,.adbox, .adBox2, #ban, #ban_bottom, .ad_wrapper_fixed,hr,.sidebarmodule,.medText,.sidebar,#footernifty {display:none;} #content {display:inline;width:500px;height:auto} .tablestyle{display:inline;} #main {position:absolute;left:225px;top:380px;width:550px;display:inline;} #mainimg{position: absolute; top:-190px; left:1px;} #blog{position:absolute;left:400px;top:60px;} #TRADES{position:absolute;left:18px;top:60px;}</style > <div id="TRADES" style="background:#eae046;color:black;height:150px;width:130px;display:inline;overflow:auto;text-align:center;"> You can advertise your trades, pet pages, guilds, wishlist's , and pretty much anything else here. Just ensure images are NO BIGGER than 125px to prevent a side scroll </div> <div id="blog" style="color:black;height:150px;width:130px;display:inline;background:#eae046;overflow:auto;"> <center> This is where you put your spiffy blog. </div> <div id="mainimg" style="display:inline;"> <img id="mainimg" src="http://i4.photobucket.com/albums/y128/gothicbimbo/galleryofeverythinghdr.png" height="384" width="551" border="0" usemap="#galleryofeverythinghdr" /> </div> <map name="galleryofeverythinghdr"> <area shape="rect" coords="97,316,299,338" href="http://www.neopets.com/~wroshandi"> <area shape="rect" coords="32,346,105,359" href="http://www.neopets.com/myaccount.phtml"> <area shape="rect" coords="114,346,191,358" href="http://www.neopets.com/petcentral.phtml"> <area shape="rect" coords="194,345,244,358" href="http://www.neopets.com/explore.phtml"> <area shape="rect" coords="248,345,286,357" href="http://www.neopets.com/games/arcade.phtml"> <area shape="rect" coords="294,347,331,356" href="http://www.neopets.com/neoboards/index.phtml"> <area shape="rect" coords="339,347,366,357" href="http://www.neopets.com/objects.phtml"> <area shape="rect" coords="370,347,402,358" href="http://www.neopets.com/nf.phtml"> <area shape="rect" coords="410,344,443,357" href="http://www.neopets.com/video/index.phtml"> <area shape="rect" coords="450,344,496,360" href="http://www.neopets.com/mall/index.phtml"> </map>

LIFE IS BETTER WETTER

<style > body,#main,#content{background-image: url('http://i4.photobucket.com/albums/y128/gothicbimbo/seastripe.png'); background-attachment: fixed;background-position: top left; background-repeat:repeat;border:0px;} td,p{font-family: helvetica; font-size:8pt;color:#0099cc;} A:LINK{font-family: helvetica; font-size: 7pt;color:#0099cc;text-decoration:none;} A:VISITED{font-family: helvetica; font-size: 7pt;color:#0099cc;text-decoration:none;} A:HOVER{font-family: helvetica; font-size: 7pt;color:#0099cc;text-decoration:none;} #header,#footer,.adbox, .adBox2, #ban, #ban_bottom, .ad_wrapper_fixed,hr,.sidebarmodule,.medText,.sidebar,#footernifty {display:none;} #content {display:inline;width:550px;} .tablestyle{display:inline;} #main {position:absolute;left:220px;top:470px;width:550px;display:inline;} #mainimg{position: absolute; top:-240px; left:-5px;} #blog{position:absolute;left:400px;top:60px;} #TRADES{position:absolute;left:0px;top:60px;}</style > <div id="TRADES" style="height:150px;width:160px;display:inline;background:#b7d1ef;border:solid 1px #006699;overflow:auto;"> YOUR WISHLIST, TRADES OR ANYTHING ELSE CAN GO HERE :) </div> <div id="blog" style="height:150px;width:160px;display:inline;background:#b7d1ef;border:solid 1px #006699;overflow:auto;"> YOUR BLOG GOES HERE. </div> <div id="mainimg" style="display:inline;"> <img id="mainimg" src="http://i4.photobucket.com/albums/y128/gothicbimbo/seabg.png" height="500" width="604" border="0" usemap="#seabg" /> </div> <map name="seabg"> <area shape="rect" coords="12,432,94,441" href="http://www.neopets.com/myaccount.phtml"> <area shape="rect" coords="108,430,192,444" href="http://www.neopets.com/petcentral.phtml"> <area shape="rect" coords="202,431,252,443" href="http://www.neopets.com/explore.phtml"> <area shape="rect" coords="261,429,305,440" href="http://www.neopets.com/games/arcade.phtml"> <area shape="rect" coords="314,430,363,444" href="http://www.neopets.com/neoboards/index.phtml"> <area shape="rect" coords="372,427,411,442" href="http://www.neopets.com/objects.phtml"> <area shape="rect" coords="423,430,460,442" href="http://www.neopets.com/nf.phtml"> <area shape="rect" coords="472,430,515,443" href="http://www.neopets.com/video/index.phtml"> <area shape="rect" coords="528,431,583,443" href="http://www.neopets.com/mall/index.phtml"> <area shape="rect" coords="6,403,300,420" href="http://www.neopets.com/~Wroshandi"> </map>

[BACK TO TOP]

<style > #header{background:url('http://i4.photobucket.com/albums/y128/gothicbimbo/Defhdr1pre.png') ; height:440px; width:998px;} ul.dropdown{color:#000;background-color:#ffcc33;border:solid #ee0000 2px;} </style >

[BACK TO TOP]

YOUR DEDICATIONS TO SLOTH GO HERE.

YOUR DEFENDER'S PLEDGE GOES HERE

[BACK TO TOP]

<style > body,#main,#content{background-image: url('http://i4.photobucket.com/albums/y128/gothicbimbo/yurblebg.gif'); background-attachment: fixed; background-position: top left; background-repeat: repeat; background-color:#ffffff} </style >

[BACK TO TOP]

[BACK TO TOP]

[BACK TO TOP]

[BACK TO TOP]

[BACK TO TOP]

[BACK TO TOP]