Welcome to CSS Guide. Please think of us as a sort of code "part shop". The purpose of this guide is not to detail every aspect of css coding, but to provide you with the bits and pieces necessary to make your own codes better. Therefore, we do not offer premade layouts here, however feel free to use these codes to make your own layouts. But please note: if you own your own code help site, do not steal our codes or you will be held accountable.

I made this page because I think there's some general confusion among people when it comes to Neopets' latest layout change. While there are numerous CSS guides out there, they tend to over-complicate things for people who really just want some quick fixes for their layout problems, just like in the good old days when you could visit Csshelp, pick up a code, and be on your way in seconds. That's what we're here for. We want you in and out ASAP. xD

Codes are checked regularly to ensure that they still work properly. Please pay attention to which section you're pulling a code from though. Some are exclusive to certain areas of the site.

As of November 23, 2008, we are officially open.

We currently have 164 unique codes.

--------------------------------------------------------------------------------------------------------------

[1/27]: Well, I haven't had anything to update, but that doesn't mean I'm dead. I've been fielding quite a few questions from people, to the best of my abilities. Other than that, nothing new to report. Might as well take a moment to advertise one of my other petpages then. xP



I also run Applepious, a phrase-banner site. Check it out if you've got some time! :3

[11/25]: We've been ranked at Cloud Infinity and have a new banner as well! :D Also, it was CSS|Guide's third birthday on Wednesday!~ C8

[11/16]: This week we've been listed at Underwater Kitten's Cave! xD If you've got suggestions for code snippets you'd like to see here, I'd be willing to look into them during my free time.

[11/8]: We've been newly listed at Dragon's Lair

[9/8]: Did an affiliate/lister sweep. :3

Removing White Background
<style> #main { background: none; } </style>

Removing White Background's Border
<style> #main { border: none; } </style>

Removing White Background & Its Border
<style> #main { background: none; border: none; } </style>

Changing Your White Background Color
<style> #main { background-color: #000000; } </style>

Adding A Background Image Into Your White Background Space
<style> #main { background-image: url("http://images.neopets.com/items/ghost_marshmellows.gif"); } </style>

Changing Your Gray Background Color
(changes background colors for petpages)
<style> body { background-color: #000000; } </style>

Adding Background Images Into Your Gray Background Space
(creates a tiled background in petpages)
<style> body { background-image: url("http://images.neopets.com/items/ghost_marshmellows.gif"); } </style>

Forcing a Background Image to Only Repeat Vertically (Up and Down)
<style> body { background-image: url("http://images.neopets.com/items/ghost_marshmellows.gif"); background-repeat: repeat-y; } </style>

Forcing a Background Image to Only Repeat Horizontally (Left and Right)
<style> body { background-image: url("http://images.neopets.com/items/ghost_marshmellows.gif"); background-repeat: repeat-x; } </style>

Creating a Non-repeating Image Background
<style> body { background-image: url("http://images.neopets.com/items/ghost_marshmellows.gif"); background-repeat: no-repeat; } </style>

Positioning a Background Image in Your Gray Background Space
<style> body { background-image: url("http://images.neopets.com/items/ghost_marshmellows.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } </style>

Removing Nickelodeon White Ad Bar
<style> .brand-mamabar { display: none; } </style>

Removing Ads on Top of Site
<style> #ban_bottom, #ban, .slug { display: none; } #main { margin-top: 0px; } </style>

Removing Ads on Bottom of Site
<style> .adBox2, .ad_wrapper_fixed { display: none; } </style>

Removing All Ads
<style> #ban_bottom, #ban, .slug, .adBox2, .ad_wrapper_fixed { display: none; } #main { margin-top: 0px; } </style>

Removing Neopets Header & Footer
(for shops, see shop specific codes)
<style> #header, #footer { display: none; } </style>

Removing Sidebar Information
(for shops, see shop specific codes)
<style> .sidebar { display: none; } </style>

Hiding Scrolls
<style> body { overflow: hidden; } </style>

Enable Scrolling when Necessary
<style> body { overflow: auto; } </style>

Enable Scrolling Even when Unnecessary
<style> body { overflow: scroll; } </style>

Changing Font Size, Font Type & Font Color for "Welcome, guest | NP: 2,000 | Logout" in Headers
(text & links same color)
<style> #header .medText, #header .medText a { font: 9px Tahoma; color: #FFFFFF; } </style>

Changing Font Size, Font Type & Font Color for "Welcome, guest | NP: 2,000 | Logout" in Headers
(text & links different colors)
<style> #header .medText { font: 9px Tahoma; color: #FFFFFF; } #header .medText a { color: #000000; } </style>

Changing Font Size, Font Type & Font Color for Neopets Copyright
(text & links same color) (see petpage specific section for petpages)
<style> .copyright, .copyright a b { font: 9px Tahoma; color: #FFFFFF; } </style>

Changing Font Size, Font Type & Font Color for Neopets Copyright
(text & links different colors)
(see petpage specific section for petpages)
<style> .copyright { font: 9px Tahoma; color: #FFFFFF; } .copyright a b { color: #000000; } </style>

Removing Neopets Copyright
(see petpage specific section for petpages)
<style> .copyright { font: 9px Tahoma; color: #FFFFFF; } .copyright a b { color: #000000; } </style>

Modifying the Neopets Clock (Font Color, Font Size, & Font Type)
<style> #nst { color: red; font: tahoma 9px; } </style>

Replacing Header Image with Your Own
(change height and width accordingly)
<style> #header { background-image: url("http://images.neopets.com/items/ghost_marshmellows.gif"); background-repeat: no-repeat; height: 100px; width: 500px; } </style>

Replacing Footer Image with Your Own
(change height and width accordingly)
<style> #footer { background-image: url("http://images.neopets.com/items/ghost_marshmellows.gif"); background-repeat: no-repeat; height: 100px; width: 500px; } </style>

Removing Header
(for shops, see shop specific codes)
<style> #header { display: none; } </style>

Removing Footer
(for shops, see shop specific codes)
<style> #footer { display: none; } </style>

Removing Header & Footer
(for shops, see shop specific codes)
<style> #footer, #header { display: none; } </style>

Changing Link Color, Font Type, & Size
<style> a:link, a:visited, a:active, a:hover { color: #000000; font: 8pt Georgia; } </style>

Link Color Change on Mouseover (Font Type & Size Also)
<style> a:link, a:visited, a:active { color: #000000; font: 8pt Georgia; } a:hover { color: red; font: 8pt Georgia; } </style>

Change Link Background Color on Mouseover (Font Type, Size, & Color Also)
<style> a:link, a:visited, a:active { color: #000000; font: 8pt Georgia; } a:hover { color: red; font: 8pt Georgia; background-color: gray; } </style>

Bolding Links (Font Type, Size, & Color Also)
<style> a:link, a:visited, a:active, a:hover { color: #000000; font: 8pt Georgia; font-weight: bold; } </style>

Underlining Links (Font Type, Size, & Color Also)
<style> a:link, a:visited, a:active, a:hover { color: #000000; font: 8pt Georgia; text-decoration: underline; } </style>

Question Mark Cursor
<style> body { cursor: help; } </style>

Question Mark Cursor Only When Hovering Over Links
<style> a:hover { cursor: help; } </style>

Crosshair Cursor
<style> body { cursor: crosshair; } </style>

Crosshair Cursor Only When Hovering Over Links
<style> a:hover { cursor: crosshair; } </style>

Crosshair w/ Arrows Cursor
<style> body { cursor: move; } </style>

Crosshair w/ Arrows Cursor Only When Hovering Over Links
<style> a:hover { cursor: move; } </style>

Waiting Cursor
(image varies with operating systems)
<style> body { cursor: wait; } </style>

Waiting Cursor Only When Hovering Over Links
(image varies with operating systems)
<style> a:hover { cursor: wait; } </style>

Hand Cursor
<style> body { cursor: -blocked-; } </style>

Hand Cursor Only When Hovering Over Links
<style> a:hover { cursor: -blocked-; } </style>

Text Bar Cursor
<style> body { cursor: text; } </style>

Text Bar Cursor Only When Hovering Over Links
<style> a:hover { cursor: text; } </style>

Blinking text
(Only supported by Mozilla & Opera)
<style> b#text { text-decoration: blink; } </style> <b id="text">BLINK!!</b>

Changing Text Color
<style> td, .medText, body { color: red; } </style>

Changing Text Size & Font Type
<style> td, .medText, body { font: 9px tahoma; } </style>

Changing Text Color, Size & Font Type
<style> td, .medText, body { font: 9px tahoma; color: red; } </style>

Changing Line Height
(increase or decrease distance of one line of text from another)
<style> td, .medText, body { line-height: 15px; } </style>

Changing Line Height (Color, Size, & Font Type Also)
(increase or decrease distance of one line of text from another)
<style> td, .medText, body { font: 9px tahoma; color: red; line-height: 15px; } </style>

Changing Letter Distance
(increase or decrease the distance between letters in words)
<style> td, .medText, body { letter-spacing: 2px; } </style>

Changing Letter Distance (Color, Size, & Font Type Also)
(increase or decrease the distance between letters in words)
<style> td, .medText, body { font: 9px tahoma; color: red; letter-spacing: 2px; } </style>

Changing Word Distance
(increase or decrease the distance between words)
<style> td, .medText, body { word-spacing: 2px; } </style>

Changing Word Distance (Color, Size, & Font Type Also)
(increase or decrease distance of letters in words)
<style> td, .medText, body { font: 9px tahoma; color: red; word-spacing: 2px; } </style>

Basic Blog Code

For #css, width and height refer to that of your background image.

For #css, replace 'http://images.neopets.com/items/ghost_marshmellows.gif' with your own image.

For #guide, top, left, width, and height refer to that of your text box (left:0px and top:0px lies at the upper left corner of your background image, not the webpage).
(incompatible with pet descriptions)
<style> #css { width: 500px; height: 400px; background-image: url("http://images.neopets.com/items/ghost_marshmellows.gif"); } #guide { font: 9px tahoma; color: #000000; top: 69px; left: 229px; width: 234px; height: 335px; overflow: auto; } </style> <div id="css"><div id="guide" style="position: relative;"> Text goes here. Text goes here. Text goes here. <a href="/~Kaikuto"> <img src="http://img.photobucket.com/albums/v368/darkwater657/css-l.gif" border="0"></a> </div></div>

Horizontally Inverting a Page
<style> body { } </style>

Making Code Boxes
(replace the parenthesis with greater than/less than signs; Neopets automatically removes them if I put them in myself.)
(TEXTAREA) Your Code Goes Here. (/TEXTAREA)

Back to the top.

Removing Stats Images
<style> .contentModuleContent img { display: none; } </style>

Removing Trades, Auctions, Wishlist, Neomail, & Neofriend (yellow) pictures & links from Userinfo Section
<style> #userinfo table table table { display: none; } </style>

Removing Horizontal Gray Bars
<style> hr { display: none; } </style>

Removing Horizontal Gray Bar in User Info
<style> .contentModuleContent table table { border: none !important; } </style>

Removing User Info
<style> .contentModule { border: none; } #userinfo { display: none; } </style>

Removing Collections
<style> .contentModule { border: none; } #usercollections { display: none; } </style>

Removing Shop & Gallery
<style> .contentModule { border: none; } #usershop { display: none; } </style>

Removing Neopets
<style> .contentModule { border: none; } #userneopets { display: none; } </style>

Removing Neohome
<style> .contentModule { border: none; } #userneohome { display: none; } </style>

Removing Games & Trophies
<style> .contentModule { border: none; } #usertrophies { display: none; } </style>

Removing Habitarium
<style> .contentModule { border: none; } #habitarium { display: none; } </style>

Removing NC Mall Info
<style> .contentModule { border: none; } #ncmall { display: none; } </style>

Removing Userlookup: guest (?)
(this code may affect personal images on lookup; neomail me for a quick fix)
<style> .content div b, .content div a img { display: none; } .contentModule div a img, .contentModule div b { display: inline; } </style>

Removing Borders from Stat Boxes
<style> .contentModule, .contentModuleTable { border: none; } </style>

Removing All Stat Headers from Userlookup
(See stat headers section for individual removal codes)
<style> .contentModuleHeaderAlt, .contentModuleHeader { display: none; } </style>

Removing All Information From Userlookup
<style> .contentModule { display: none; } </style>

Removing Stats Images
<style> .contentModuleContent img { display: none; } </style>

Adjusting the Size of Your Shield Image
<style> #userinfo .medText table td img { width: 60px; height: auto; } </style>

Adjusting the Size of Your Trades, Auctions, Wishlist, Neomail, & Neofriend (yellow) Images
<style> #userinfo .medText table td table td img { width: 25px; height: 25px; } </style>

Adjusting the Size of Your Shop Keeper Image
<style> #usershop img { width: 90px; height: 90px; } </style>

Adjusting the Size of Your Collections Images
<style> #usercollections img { width: 40px; height: auto; } </style>

Adjusting the Size of Your Neopets' Images
<style> #userneopets img { width: 70px; height: 70px; } </style>

Adjusting the Size of Your Trophy Images
<style> #usertrophies img { width: 40px; height: 40px; } </style>

Dashed Image Borders - Stat Images
<style> .contentModuleContent img { border: 1px dashed #000000; } </style>

Changing the Colors of your Image Borders - Stat Images
<style> .contentModuleContent img { border: 1px solid red; } </style>

Removing Stat Headers from Userlookup
<style> .contentModuleHeaderAlt, .contentModuleHeader { display: none; } </style>

Removing Userinfo Header from Userlookup
<style> .contentModuleHeader { display: none; } </style>

Removing Collections Header from Userlookup
<style> #usercollections .contentModuleHeaderAlt { display: none; } </style>

Removing Shop & Gallery Header from Userlookup
<style> #usershop .contentModuleHeaderAlt { display: none; } </style>

Removing Neopets Header from Userlookup
<style> #userneopets .contentModuleHeaderAlt { display: none; } </style>

Removing Habitarium Header from Userlookup
<style> #habitarium .contentModuleHeaderAlt { display: none; } </style>

Removing Neohome Header from Userlookup
<style> #userneohome .contentModuleHeaderAlt { display: none; } </style>

Removing Trophies Header from Userlookup
<style> #usertrophies .contentModuleHeaderAlt { display: none; } </style>

Modifying Headers
(Font Color, Font Size, Font Type, & Background Color)
<style> .contentModuleHeaderAlt, .contentModuleHeader { font: 20px franklin gothic medium; color: #5A607B; background: black; } </style>

Modifying Headers w/ No Background
(Font Color, Font Size, & Font Type Also)
<style> .contentModuleHeaderAlt, .contentModuleHeader { font: 20px franklin gothic medium; color: #5A607B; background: none; } </style>

Modifying Headers w/ Uppercase Letters
(Font Color, Font Size, Font Type, & Background Color Also)
<style> .contentModuleHeaderAlt, .contentModuleHeader { font: 20px franklin gothic medium; color: #5A607B; background: black; text-transform: uppercase; } </style>

Underlining Headers
(Font Color, Font Size, Font Type, & Background Color Also)
<style> .contentModuleHeaderAlt, .contentModuleHeader { font: 20px franklin gothic medium; color: #5A607B; background: black; border-bottom: 2px solid red; } </style>

Removing Borders from Stat Boxes
<style> .contentModule, .contentModuleTable { border: none; } </style>

Adjusting the Size of Your Userinfo Box
<style> #userinfo { width: 200px; height: 100px; } </style>

Adjusting the Size of Your Userinfo Box
(No Borders)
<style> #userinfo { width: 200px; height: 100px; } .contentModule, .contentModuleTable { border: none; } </style>

Adjusting the Size of Your Collections Box
<style> #usercollections { width: 200px; height: 100px; } </style>

Adjusting the Size of Your Collections Box
(No Borders)
<style> #usercollections { width: 200px; height: 100px; } .contentModule, .contentModuleTable { border: none; } </style>

Adjusting the Size of Your Shop Box
<style> #usershop { width: 200px; height: 100px; } </style>

Adjusting the Size of Your Shop Box
(No Borders)
<style> #usershop { width: 200px; height: 100px; } .contentModule, .contentModuleTable { border: none; } </style>

Adjusting the Size of Your Neopets Box
<style> #userneopets { width: 200px; height: 100px; } </style>

Adjusting the Size of Your Neopets Box
(No Borders)
<style> #userneopets { width: 200px; height: 100px; } .contentModule, .contentModuleTable { border: none; } </style>

Adjusting the Size of Your Neohome Box
<style> #userneohome { width: 200px; height: 100px; } </style>

Adjusting the Size of Your Neohome Box
(No Borders)
<style> #userneohome { width: 200px; height: 100px; } .contentModule, .contentModuleTable { border: none; } </style>

Adjusting the Size of Your Trophies Box
<style> #usertrophies { width: 200px; height: 100px; } </style>

Adjusting the Size of Your Trophies Box
(No Borders)
<style> #usertrophies { width: 200px; height: 100px; } .contentModule, .contentModuleTable { border: none; } </style>

Changing Stats Boxes Background Colors
<style> .contentModuleContent { background-color: #E4E4E4; } </style>

Changing Stats Boxes' Background Image
<style> .contentModuleContent { background-image: url("http://images.neopets.com/items/ghost_marshmellows.gif"); } </style>

Changing Stats Boxes' Border Color
<style> .contentModule { border: none; } .contentModuleTable { border: 5px solid blue; } </style>

Stat Boxes With Dashed Border
<style> .contentModule { border: none; } .contentModuleTable { border: 5px dashed #000000; } </style>

Basic Skinny Layout: White Content Background with Visible Stat Borders.
(Refer to other codes for help customizing)
In [style] and [/style], please replace the brackets with with the pointy arrows.<br><br> This is where the text for your userlookup should go. You can change the white background color by replacing "FFFFFF" with another color and you can move your stats farther left or right by increasing or decreasing the amount after "left". Also, unless you remove one of your stats from your userlookup, 650px width is the minimum size you can make you skinny layout because your stats stop compacting after a certain point. Enjoy! - CSS|Guide [style] #ban{display:none;} #content,#main{width:660px;background-color:#FFFFFF;border:none;} #main{position:absolute;left:100px;top:0px;margin-top:0px;margin-left:0px;} #header,#footer{display:none;} [ /style]

Basic Skinny Layout: White Content Background without Stat Borders.
(Refer to other codes for help customizing)
In [style] and [/style], please replace the brackets with with the pointy arrows.<br><br> This is where the text for your userlookup should go. You can change the white background color by replacing "FFFFFF" with another color and you can move your stats farther left or right by increasing or decreasing the amount after "left". Also, unless you remove one of your stats from your userlookup, 650px width is the minimum size you can make you skinny layout because your stats stop compacting after a certain point. Enjoy! - CSS|Guide [style] #ban{display:none;} #content,#main{width:650px;background-color:#FFFFFF;border:none;} #main{position:absolute;left:100px;top:0px;margin-top:0px;margin-left:0px;} #header,#footer{display:none;} .contentModule,.contentModuleTable{border:none;} [ /style]

Adjusting the size of your Trophy font
(font face also)
<style> #usertrophies td, #usertrophies td b { font: 7px Tahoma; } </style>

Making Your Pet's Names Lowercase
<style> #userneopets b { text-transform: lowercase; } </style>

Capitalizing Your Pet's Names
<style> #userneopets b { text-transform: uppercase; } </style>

Capitalizing The First Letter of Your Pet's Names
<style> #userneopets b { text-transform: capitalize; } </style>

Centering User Info Text
<style> td { text-align: center; } </style>

Moving Stat Boxes Closer Together
(Shrink images, text and remove borders for smaller widths)
<style> #content { width: 590px; } </style>

Removing Your Guild Logo
<style> .content table table img { display: none; } </style>

Removing the Poll Background Color in Mozilla
<style> tr { background-color: transparent; } </style>

Removing the Banner at the Top of the Page
<style> table { background-color: transparent; } table a img { display: none; } </style>

Removing the Copyright on the Bottom of the Page
<style> .sf { display: none; } </style>

Changing Font Size, Font Type & Font Color for Neopets Copyright
(text & links same color) (see petpage specific section for petpages)
<style> .sf, .sf a { font: 9px Tahoma; color: #FFFFFF; } </style>

Changing Font Size, Font Type & Font Color for Neopets Copyright
(text & links different colors)
(see petpage specific section for petpages)
<style> .sf { font: 9px Tahoma; color: #FFFFFF; } .sf a { color: #000000; } </style>

Removing 'Owner' and Quick Personality Description Information
(upper block of statistics module)
<style> table table table.contentModuleTable td.contentModuleContent b, table table table.contentModuleTable td.contentModuleContent { visibility: hidden; font: 1px Tahoma; } table table table.contentModuleTable .contentModuleContent.medText b, table table table.contentModuleTable td.contentModuleContent table b, table table table.contentModuleTable td.contentModuleContent td, table table table.contentModuleTable td.contentModuleContent.medText { visibility: visible; font: 9pt Verdana; text-transform: none; } table table table.contentModuleTable .contentModuleContent.medText b, table table table.contentModuleTable td.contentModuleContent table b { font-weight: bold; } table table table table img { visibility: visible; } </style>

Removing 'Neomail Owner' and 'Visit Pets Web Page' Images
(may affect personal image links; neomail me for help with this)
<style> .contentModule table div a img { display: none; } .contentModule table div img#rank_1 { display: inline; } </style>

Bordering Your Petpet Image
<style> .contentModuleContent.medText img { border: 10px solid #000000; } </style>

Changing the Size of Your Pet's Image
<style> #CustomNeopetView { height: 590px; width: 590px; } </style>

Capitalizing Pet and Petpet Names in Neopet Module
<style> td.contentModuleContent.medText b { text-transform: capitalize; } </style>

Capitalizing Pet and Petpet Names in Neopet Module
(alternative code)
<style> table table table.contentModuleTable td.contentModuleContent.medText b { text-transform: capitalize; } </style>

Removing "Petname the Pettype" (?) on Pet Descriptions
Submitted by Brexis
<style> .content div { display: none; } .content table div, .content .contentModule { display: block; } </style>

Capitalizing all letters of "PETNAME the PETTYPE" (?) on Pet Descriptions
<style> #content div { text-transform: uppercase; } #pet_rating b, #pet_rating b a, .contentModuleTable, .sidebarTable { text-transform: none; } </style>

Capitalizing the first letters of "Petname the Pettype" (?) on Pet Descriptions
<style> #content div { text-transform: capitalize; } #pet_rating b, #pet_rating b a, .contentModuleTable, .sidebarTable { text-transform: none; } </style>

Removing Black 'Advertisement' Bar
<style> td.slug img { width: 1px; height: 1px; padding-top: 90px; } #ad-table td.slug { background-color: transparent; } #pushdown_banner { z-index: -1; height: 1px !important; } </style>

Removing Gray Band/Upper Portion of Headers
(Best Used with 'Advertisement' Bar Removal Code)
<style> #ban { width: 0px; height: 0px; } #main { padding-top: 90px; } </style>

Removing Nickelodeon White Ad Bar
<style> .brand-mamabar { height: 0px; width: 0px; overflow: hidden; } .brand-mamabar { height: 0px !important; } </style>

Removing Sidebar
(change font color to the color of your background)
<style> td.activePet img, .sidebarModule img { height: 0px; width: 0px; } .sidebarModule table.sidebarTable .neofriend { width: 1px !important; height: 1px !important; overflow: hidden; z-index: -1; border: none; background: none; } .activePet, .activePetInfo td, .module, .activePetInfo, .neofriend, .sidebarModule, .sidebar, .activePetInfo td font, .neofriend .sf, .sidebarModule table, .sidebarTable a b, td.activePetInfo b span, .activePet a img, .activePetInfo, .sidebarHeader a img, .neofriendInfo, .neofriendUsername, .sidebarTable, .sidebarHeader, .neofriendAvatar, .sf a b, table .neofriendUsername a, table .neofriendInfo a, .neopetPhrase.sf { width: 0px; height: 0px; overflow: hidden; font-size: 0px; color: #ffffff; z-index: -1; border: none; background: none; } table .sidebar { width: 1px; height: 0px; overflow: hidden; font-size: 0px; color: #FFFFFF; border: none; background: none; } </style>

Removing Sidebar with Left Alignment Fix
(change font color to the color of your background)
<style> td.activePet img, .sidebarModule img { height: 0px; width: 0px; } .sidebarModule table.sidebarTable .neofriend { width: 1px !important; height: 1px !important; overflow: hidden; z-index: -1; border: none; background: none; } .activePet, .activePetInfo td, .module, .activePetInfo, .neofriend, .sidebarModule, .sidebar, .activePetInfo td font, .neofriend .sf, .sidebarModule table, .sidebarTable a b, td.activePetInfo b span, .activePet a img, .activePetInfo, .sidebarHeader a img, .neofriendInfo, .neofriendUsername, .sidebarTable, .sidebarHeader, .neofriendAvatar, .sf a b, table .neofriendUsername a, table .neofriendInfo a, .neopetPhrase.sf { width: 0px; height: 0px; overflow: hidden; font-size: 0px; color: #ffffff; z-index: -1; border: none; background: none; float: left; } table .sidebar { width: 1px; height: 0px; overflow: hidden; font-size: 0px; color: #FFFFFF; border: none; background: none; float: left; } </style>

Removing Header & Footer Images
<style> #header, #footer, li.nav_image { width: 1px !important; height: 1px !important; overflow: auto; z-index: -1; } </style>

Removing Ads
<style> .ad_wrapper_fixed p, #pushdown_banner, .ad_wrapper_fixed, #ad300, #ad728, #ban_bottom, #vert_slug_leaderboard, .adBox2, .footOverlay { width: 0px; height: 0px; overflow: hidden; z-index: -1; border: none; background: none; } </style>

Adding Images
<img src="http://images.neopets.com/items/ghost_marshmellows.gif">

Image Positioned to the Left With Text Wrap Around It
<img src="http://images.neopets.com/items/ghost_marshmellows.gif" style="float: left;">

Image Positioned to the Right With Text Wrap Around It
<img src="http://images.neopets.com/items/ghost_marshmellows.gif" style="float: right;">

Adding Links
<a href="/">Link Name</a>

Image Link
<a href="/"><img src="http://images.neopets.com/items/ghost_marshmellows.gif"></a>

Image Link With No Purple Border
<a href="/"><img src="http://images.neopets.com/items/ghost_marshmellows.gif" border="0"></a>

Basic Centering
<center>Your Text.</center>

Paragraph Centering
<p align="center">Your Text</p>

Aligning Text to the Left
<p align="left">Your Text</p>

Aligning Text to the Right
<p align="right">Your Text</p>

Bolding
<b>Your Text</b>

Slashing
(Replace brackets with greater/less than signs)
[s]Your Text[/s]

Slashing (on Petpages)
<strike>Your Text</strike>

Underlining
(Replace brackets with greater/less than signs)
[u]Your Text[/u]

Italicizing
<i>Your Text</i>

^Sup Text
^{Your Text}

_Sub Text
_{Your Text}

Font Color
<font color="lightgreen">Your Text</font>

Font Size
<font size="10px">Your Text</font>

Making Text Appear When You Hover Over an Image:

<img src="http://img.photobucket.com/albums/v368/darkwater657/css-l.gif" title="YOUR TEXT">

Breaking or Adding Text to a New Line
<br>

Bullets
<li>Your Text </li>