Darkest Faerie Lair

Shop Codes

TEXT AREA
| Text Area |

OTHER
| Scroll Bar | Horizontal Rule | Clock |

REMOVE
| Removing Parts of the Shop | Removing General |

TABLES
| Shop Table | Gallery Table |

Text Area

Text area (like the ones seen below)
<textarea>CODE HERE</textarea>

Pet page text area
<text_area>CODE HERE</text_area>

Positioned text area
<style> #mytext { position: absolute; top: 0px; left: 0px; } </style> <div id="mytext">TEXT HERE</div>

Background

Solid background color
<style> body { background-color: #FFFF00; } </style>
To change the background color, replace #FFFF00 with another color.

Background image
<style> body { background-image: url(URLHERE); } </style>
To change the background image, replace URLHERE with your image's address.

Fixed background image
<style> body { background-image: url(URLHERE); background-attachment: fixed; } </style>
To change the background image, replace URLHERE with your image's address.

Non-repeating fixed background image (image that scrolls with the page)
<style> body { background-image: url(URLHERE); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; } </style>
To change the background image, replace URLHERE with your image's address.
To change the position, change right bottom to center, left center, right center, right bottom, left bottom, center bottom, right top, left top, or center top.

Non-repeating fixed background image with solid background color
<style> body { background-color: #FFFF00; background-image: url(URLHERE); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; } </style>
To change the background color, replace #FFFF00 with another color.
To change the background image, replace URLHERE with your image's address.
To change the position, change right bottom to center, left center, right center, right bottom, left bottom, center bottom, right top, left top, or center top.

Stretched background is not possible.

Repeating background and fixed image in corner is not possible.

Cursor

Default cursor
<style> body, a { cursor: hand; } </style>
To change the cursor image, replace hand with crosshair, n-resize, e-resize, move, text, wait, help, progress, not-allowed, no-drop, vertical-text, all-scroll, col-resize, or row-resize.

Customized cursor
<style> body, a { cursor: url(URLHERE); } </style>
To change the cursor image, replace URLHERE with your cursor's address.

Shop Items

Change border around items
<style> img { border-color: #FF0000; border-width: 1px; border-style: solid; } </style>
To change the border color, replace #FF0000 with a color.
To change the border thickness, replace 1 with another number.
To change the border style, replace solid with dotted or dashed.

Remove border around items
<style> img { border-width: 0px; } </style>

Make items glow (Internet Explorer only)
<style> img { filter: chroma(color=#FFFFFF) glow(color=#FFFFFF, strength=5); } </style>

Change item name and information color, size, font, bold
<style> table tr tr td { color: #0000FF; font-size: small; font-family: verdana; font-weight: bold; } </style>
To change the color, replace #0000FF with a color.
To change the font size, replace the small with xx-small, x-small, medium, large, x-large, or xx-large.
To change the font, replace the verdana with another font name.
To change make it not bold, change bold to normal.

Change item name's color, size, font, bold
<style> table tr tr td b { color: #0000FF; font-size: small; font-family: verdana; font-weight: bold; } </style>
To change the color, replace #0000FF with a color.
To change the font size, replace the small with xx-small, x-small, medium, large, x-large, or xx-large.
To change the font, replace the verdana with another font name.
To change make it not bold, change bold to normal.

Sidebar

Sidebar template #1

Sidebar template #2

Sidebar and topbar (regular sidebar)
<style> #top, #side { background-image: url(SIDEBARURL); } #top { position: absolute; left: 0px; top: 00px; height: 042px; width: 728px; } #side { position: absolute; left: 0px; top: 00px; height: 763px; width: 130px; } #navbar { position: absolute; left: 0px; top: 63px; height: 421px; width: 130px; z-index: 1; } table, td, #n, #tbg { background: transparent; } a div, #mb, #m, #ol { visibility: hidden; } .tt, #n { position: relative; z-index: 1; } #ban { display: none; background: transparent; } </style> <div id="top"></div> <div id="side"></div><img src="BLANKURL" border="0" id="navbar" usemap="#a">
To change the sidebar image, replace URLHERE with your image's address.
Change BLANKURL to a transparent image's address.

Sidebar only template #1

Sidebar only template #2

Sidebar only
<style> #side { background-image: url(SIDEBARURL); position: absolute; left: 0px; top: 00px; height: 763px; width: 130px; } #navbar { position: absolute; left: 0px; top: 63px; height: 421px; width: 130px; z-index: 1; } table, td, #n, #tbg { background: transparent; } a div, #mb, #m, #ol { visibility: hidden; } .tt, #n { position: relative; z-index: 1; } #ban { display: none; background: transparent; } </style> <div id="side"></div> <img src="BLANKURL" border="0" id="navbar" usemap="#a">
To change the sidebar image, replace URLHERE with your image's address.
Change BLANKURL to a transparent image's address.

Text only sidebar
<style> table, td, #n { background: transparent; } a div, #mb, #m, #ol { visibility: hidden; } </style> | <a href="http://www.neopets.com/addpet.phtml">Create</a> | <a href="http://www.neopets.com/petcentral.phtml">Central</a> | <a href="http://www.neopets.com/explore.phtml">Explore</a> | <a href="http://www.neopets.com/gameroom.phtml">Games</a> | <a href="http://www.neopets.com/objects.phtml">Shops</a> | <a href="http://www.neopets.com/neoboards/index.phtml">Boards</a> | <a href="http://www.neopets.com/nf.phtml">News</a> | <a href="http://www.neopets.com/stuff.phtml">Stuff</a> | <a href="http://www.neopets.com/help.phtml">Help</a> |

Remove sidebar
<style> table, td, #n { background: transparent; } a div, #mb, #m, #ol, #tbg, .tt, #nst, .tl { visibility: hidden; } </style>

Top Banner

Top banner template

Top banner
<style> #topbanner { background: url(URLHERE); height: 62px; width: 480px; position: absolute; top: 137px; left: 227px; } </style> <div id="topbanner"></div>

Remove top banner
<style> .hdr { display: none; } </style>

Entire Page

Change entire page font color
<style> body, td, p, div { color: #0000FF; } </style>
To change the font color, replace #0000FF with a color.

Change entire page font face
<style> body, td, p, div { font-family: verdana; } </style>
To change the font, replace the verdana with another font name.

Change entire page font size
<style> body, td, p, div { font-size: small; } </style>
To change the font size, replace the small with xx-small, x-small, medium, large, x-large, or xx-large.

Change entire page boldness
<style> body, td, p, div { font-weight: normal; } </style>
To change the boldness, replace the normal with bold.

Change entire page underline
<style> body, td, p, div { text-decoration: none; } </style>
To change the underline, replace the none with underline, overline, or strike.

Change entire page italic
<style> body, td, p, div { font-style: normal; } </style>
To change the italic, replace the normal with italic.

Change entire page letter spacing
<style> body, td, p, div { letter-spacing: 2px; } </style>
To change the spacing, replace the 2 with another number.

Change entire page line height
<style> body, td, p, div { line-height: 20px; } </style>
To change the line height, replace the 20 with another number.

Change entire page alignment
<style> body, td, p, div { text-align: left; } </style>
To change the alignment, replace the left with center or right.

Change entire page blur (Internet Explorer only)
<style> body, td, p, div { filter: blur(strength=5); } </style>

Change entire page shadow (Internet Explorer only)
<style> body, td, p, div { filter: dropshadow(color=#000000, offx=1, offy=1); } </style>

Change entire page glow (Internet Explorer only)
<style> body, td, p, div { filter: glow(color=#00FF00, strength=3); } </style>

Bold Text

Change bold text color, font, size, and boldness
<style> b { color: #0000FF; font-family: verdana; font-size: small; font-weight: bold; } </style>
To change the font color, replace #0000FF with a color.
To change the font, replace the verdana with another font name.
To change the font size, replace the small with xx-small, x-small, medium, large, x-large, or xx-large.
To change make it not bold, change bold to normal.

Copyright Text

Change copyright text color, font, size, and boldness
<style> .sf { color: #0000FF; font-family: verdana; font-size: small; font-weight: bold; } </style>
To change the font color, replace #0000FF with a color.
To change the font, replace the verdana with another font name.
To change the font size, replace the small with xx-small, x-small, medium, large, x-large, or xx-large.
To change make it not bold, change bold to normal.

Change copyright links color, font, size, and boldness
<style> .sf a, .sf a:link, .sf a:visited { color: #0000FF; font-family: verdana; font-size: small; font-weight: bold; } .sf a:active, .sf a:hover { color: #0000FF; font-family: verdana; font-size: small; font-weight: bold; } </style>
To change the font color, replace #0000FF with a color.
To change the font, replace the verdana with another font name.
To change the font size, replace the small with xx-small, x-small, medium, large, x-large, or xx-large.
To change make it not bold, change bold to normal.

Remove copyright
<style> .sf { display: none; } </style>

Links

Change link color, font, size, and boldness
<style> a:link, a:visited { color: #0000FF; font-family: verdana; font-size: small; font-weight: bold; } </style>
To change the font color, replace #0000FF with a color.
To change the font, replace the verdana with another font name.
To change the font size, replace the small with xx-small, x-small, medium, large, x-large, or xx-large.
To change make it not bold, change bold to normal.

Change hovered link color, font, size, and boldness
<style> a:hover, a:active { color: #0000FF; font-family: verdana; font-size: small; font-weight: bold; } </style>
To change the font color, replace #0000FF with a color.
To change the font, replace the verdana with another font name.
To change the font size, replace the small with xx-small, x-small, medium, large, x-large, or xx-large.
To change make it not bold, change bold to normal.

Stop Italic Text

To make your text not italic, add this to the very beginning of your code
</i>
You may need to add it before each section of text.

Welcome, Pet, and NP Text

Change "Welcome, Pet, NP" color, font, size, and boldness
<style> .tt { color: #0000FF; font-family: verdana; font-size: small; font-weight: bold; } </style>
To change the font color, replace #0000FF with a color.
To change the font, replace the verdana with another font name.
To change the font size, replace the small with xx-small, x-small, medium, large, x-large, or xx-large.
To change make it not bold, change bold to normal.

Change "Welcome, Pet, NP" links color, font, size, and boldness
<style> .tt a, .tt a:link, .tt a:visited { color: #0000FF; font-family: verdana; font-size: small; font-weight: bold; } .tt a:active, .tt a:hover { color: #0000FF; font-family: verdana; font-size: small; font-weight: bold; } </style>
To change the font color, replace #0000FF with a color.
To change the font, replace the verdana with another font name.
To change the font size, replace the small with xx-small, x-small, medium, large, x-large, or xx-large.
To change make it not bold, change bold to normal.

Remove "Welcome, Pet, NP"
<style> .tt { display: none; } </style>

Scroll Bar

Scroll bar colors (Internet Explorer only)
<style> body { scrollbar-face-color: MAGENTA; scrollbar-shadow-color: LIME; scrollbar-highlight-color: WHITE; scrollbar-3dlight-color: RED; scrollbar-darkshadow-color: BLUE; scrollbar-track-color: YELLOW; scrollbar-arrow-color: BLACK; } </style>

Invisible track in a scrolling div (Internet Explorer only)
<style type="text/css"> div { scrollbar-face-color: MAGENTA; scrollbar-shadow-color: LIME; scrollbar-highlight-color: WHITE; scrollbar-3dlight-color: RED; scrollbar-darkshadow-color: BLUE; scrollbar-track-color: YELLOW; scrollbar-arrow-color: BLACK; filter: chroma(color=YELLOW); } </style>
If you have anything else in the div that is also #00FF00, it will be transparent as well.

Only arrows in a scrolling div (Internet Explorer only)
<style type="text/css"> div { scrollbar-arrow-color: #000000; scrollbar-face-color: #0000FF; scrollbar-track-color: #0000FF; scrollbar-shadow-color: #0000FF; scrollbar-highlight-color: #0000FF; scrollbar-3dlight-color: #0000FF; scrollbar-darkshadow-color: #0000FF; filter: chroma(color=#0000FF); } </style>
If you have anything else in the div that is also #00FF00, it will be transparent as well.

Invisible scroll bar in a scrolling div (Internet Explorer only)
<style type="text/css"> div { scrollbar-arrow-color: #0000FF; scrollbar-face-color: #0000FF; scrollbar-track-color: #0000FF; scrollbar-shadow-color: #0000FF; scrollbar-highlight-color: #0000FF; scrollbar-3dlight-color: #0000FF; scrollbar-darkshadow-color: #0000FF; filter: chroma(color=#0000FF); } </style>
If you have anything else in the div that is also #00FF00, it will be transparent as well.

Horizontal Rule

Horizontal rule color
<style> hr { border-color: #FF0000; } </style>
To change the color, replace #FF0000 with another color.

Horizontal rule thickness
<style> hr { border-width: 1px; } </style>
To change the border thickness, replace 1 with another number.

Horizontal rule style
<style> hr { border-style: solid; } </style>
To change the style, replace solid with dotted or dashed.

Remove horizontal rules
<style> hr { display: none; } </style>

Clock

Clock style
<style> #nst { color: #0000FF; background-color: #FFFF00; border-color: #FF0000; font-family: verdana; font-size: xx-small; border-width: 1px; border-style: solid; } </style>
To change the font color, replace the #0000FF with another color.
To change the background color, replace the #FFFF00 with another color.
To change the border color, replace the #FF0000 with another color.
To change the font, replace the verdana with another font name.
To change the font size, replace the xx-small with x-small, small, medium, large, x-large, or xx-large.
To change the border thickness, replace the 1 with another number.
To change the border style, replace the solid with dotted or dashed.

Remove clock
<style> #nst { display: none; } </style>

Removing Parts of the Shop

Remove shopkeeper image
<style> center img { display: none; } </style>

Remove shopkeeper greeting
<style> center b { display: none; } </style>

Remove image map (shop navigation)
<style> div img { display: none; } </style>

Removing General

Remove white around images (Internet Explorer only)
<style> img { filter: chroma(color=#FFFFFF); } </style>

Remove top banner ad
<style> #ban { display: none; background: transparent; } </style>

Remove side banner ad
<style> #n #myFlash { display: none; } </style>

Remove 300 NP/900 NP ads
<style> table a img { display: none; } table table a img { display: inline; } </style>

Remove "(show all)" and above image (neomail, trade, battle, etc)
<style> table a img, .sf { display: none; } table table a img { display: inline; } </style>

Remove "link to us"
<style> a.tl { display: none; } td.tt a.tl { display: inline; } </style>

Remove sidebar search
<style> td.tl { visibility: hidden; } #n #myFlash, #nst { visibility: visible; } </style>

Shop Table

Shop table
<style> .tablestyle { color: #0000FF; background-color: #FF0000; background-image: url(URLHERE); border-color: #0000FF; border-width: 1px; border-style: solid; width: 500px; filter: alpha(opacity=80); opacity: .80; } </style> <div class="tablestyle">

Gallery Table

Gallery table
<style> .tablestyle table table { color: #0000FF; background-color: #FF0000; background-image: url(URLHERE); border-color: #0000FF; border-width: 1px; border-style: solid; width: 500px; filter: alpha(opacity=80); opacity: .80; } </style>