Welcome to CSS Guide. This is meant to be a one-stop information hub for any and everything CSS related. We do not offer premade layouts here, however feel free to use these codes to make your own layouts.

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

Just as a note, I am aware that Neopets has blocked some of the adjusted style tags for shops. All of the codes here will work on lookups, guilds, shops, galleries, and petpages as of Neopets' latest site adjustment on October 6, 2009. 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.

[11/20]: Code added for removing the Nickelodeon ad bar in shops. Leaves a gap at the top of the page where the ad bar once was...I haven't had any luck fixing that though. D:

[11/19]: I added a shop specific removal code (in two varieties) for anyone who wants to remove their sidebar. The second version of the code helps move your shop information over left and straighten things out; the original version of the code leaves a gap where the sidebar once was. I thought the second version might make it more difficult for people trying to make any sort of layout, so that's why there's two versions. I should also note, the second version doesn't appear to work in all browsers. I tested IE8 and Mozilla, which worked fine. However, Chrome didn't like the alignment, so it essentially had no effect (in other words, in Chrome, there's no difference between the two versions).

Some other notes, this code works best in Mozilla. It works in other browsers, but seems to leave behind pixels (from font shrinks). Nothing that bad though, considering what gets done. You should also change the font color in the code to match your background color. Right now, it's at the default white. Hopefully I'll get a more perfect version of this code, but for now, this is what I've got. =)

We are also now listed at Paper Thin! ^^

[11/12]: I got two requests for this code this week and saw a board requesting it as well, so I thought I'd add it, despite some of the complications that come along with it. I added a code for removing the whiteness in images (filed under CSS codes; removal codes) and for removing the whiteness in stat images on userlookups (filed under Userlookup specific; removal codes). This doesn't just remove the white background in the images, that's not possible if you're just using CSS. It removes all of the whiteness in images. This code also only works in IE browsers, so use it at your own discretion.

As an added reminder, not all codes posted will work in shops and galleries due to stricter filters with fewer workarounds. Codes under the shop/gallery specific section should continue to work despite the current filter though.

[10/16]: As a reminder, please make sure you're using the appropriate filter solutions in the appropriate areas of the site. The style solution only works on userlookups, hence why it's under the userlookup specific section. For guilds, please use inlines and the float solution I posted. For petpages, use inlines. DON'T USE THE STYLE SOLUTION. For shops and galleries, stick with inlines as much as possible. There is no perfect solution for all of the filter nonsense in shops right now.

xD Sorry if anyone had to highlight that to read it. Wanted to make sure it caught your attention.

[10/15]: I added shop/gallery specific codes for the removal (really, it's just hiding them because they can't actually be removed) of headers, footers, and ads. Codes were tested in IE8, Mozilla, and Chrome.

Inlines are a way of taking what would normally be found in a css portion of code and moving it to the HTML portion. So something like this:

#test{visibility:hidden;border:none;}

Could be re-written into HTML like so:

<div style="visibility:hidden;border:none;">

Or if you're lazy like me and only want to do the bear minimum to appease the lords of the filters, you can keep your css portion in the css and inline the section that the filters are catching:

<div id="test" style="position:absolute;"> <style> #test{visibility:hidden;border:none;} </style>

Either will do.

As some of you may or may not know, Neopets was tricky and broke nearly all of the links put in the descriptions of shops; mapping links being one of the exceptions. There is a quick and simple fix for the problem. Here's your current link:

<a href="URL">Link</a>

Right after that first right-facing carrot/arrow, and right before the word "Link", press "Enter" on your keyboard, moving "Link" to a new line. Do not press the space bar. It won't work. Your link should now look like:

<a href="URL"> Link</a>

There you have it. The 'enter' makes all the difference. Why? Heck if I know, but for now, it works. xp

I strongly suggest that everyone use inline style tags to position their own images and divs, however, if you need to position a module or something like #content, this is for you. First, take all of your HTML tags and text, and throw them up above your css style tags, like so:

<div id="test"> <img src="URL.jpg"></div> My Userlookup Text. <style> #test{visibility:hidden;} </style>

You want absolutely /NOTHING/ after that last, closed style tag or your layout will go wonky.

Next, take that closed style tag and place a space between the left arrow and forward slash, like so:

[ /style]

Use the arrows/carrots instead of brackets. (Filter keeps giving me a hard time, so I can't change it myself it seems.)

The opening style tag does not need to be touched. And your userlookup should then work. If it doesn't, please feel free to neomail me.

I also made a somewhat more in-depth, color-coordinated tutorial that may help more of you out a bit. Click here for the tutorial.

Guilds /CANNOT/ use the same solution as the userlookups because the solution gets eaten and pooped out in certain browsers. It does work for browsers like IE8 and Mozilla, but others like Chrome throw enormous temper tantrums.

So, take all of the images and divs that you positioned yourself and inline them. If you need help with this, see my section in inlining a few sections before this one.

If you still need help positioning your guild info bar, use this:

#main{float:left;padding-top:0px;padding-left:32px;}

And just fiddle with the padding values until your stats are positioned appropriately. I think most major layout makers use this anyway, so it shouldn't be much of a problem for most of you.

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('URL');} </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('URL');} </style>

Forcing a background image to only repeat vertically (up and down)
<style> body{background-image:url('URL');background-repeat:repeat-y;} </style>

Forcing a background image to only repeat horizontally (left and right)
<style> body{background-image:url('URL');background-repeat:repeat-x;} </style>

Creating a non-repeating image background
<style> body{background-image:url('URL');background-repeat:repeat-none;} </style>

Removing Whiteness in Images
(Only works in Internet Explorer)
<style> img{filter:chroma(color=#ffffff);} </style>

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

Removing Ad on Top of Site
<style> #ban_bottom,#ban{display:none;} </style>

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

Removing All Ads
<style> #ban_bottom,#ban,.adBox2,.ad_wrapper_fixed{display:none;} </style>

Removing Neopets Header & Footer Images
<style> #header,#footer{display:none;} </style>

Removing Sidebar Information
<style> .sidebar{display:none;} </style>

Scrollbar Colors
(Internet Explorer only)
<style> body{ scrollbar-face-color:black; scrollbar-shadow-color:green; scrollbar-highlight-color:gold; scrollbar-3dlight-color:purple; scrollbar-darkshadow-color:blue; scrollbar-track-color:white; scrollbar-arrow-color:red;} </style>

Hiding Vertical Scrollbars
(Incompatible with IE8)
<style> body{overflow-y:hidden;} </style>

Hiding Sidescrolls
(Incompatible with IE8)
<style> body{overflow-x:hidden;} </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:hand;} </style>

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

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

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

Changing Text Color, Size & Font Type
<style> td,.medText,body{font:9px trebuchet ms;color:red;} </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 trebuchet ms;color:red;line-height:15px;} </style>

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

Making Code Boxes
(replace the parenthesis with left and right arrows and place an underscore in between TEXT and AREA; Neopets automatically removes them if I put them in myself.)
(TEXTAREA) Your Code Goes Here. (/TEXTAREA)

Removing Whiteness in Stat Images
(Only works in Internet Explorer)
<style> #userinfo img,#usercollections img,#usershop img,#userneopets img,#userneohome img,#usertrophies img{filter:chroma(color=#ffffff);} </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
(compatible with IE;not compatible with Mozilla)
<style> .contentModuleContent{filter:chroma(color=#E4E4E4);} </style>

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

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

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

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

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

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

Removing Userlookup: guest (?)
<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 Stat Headers from Userlookup
<style> .contentModuleHeaderAlt,.contentModuleHeader{display:none;} </style>

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

Adding Transparency to Stats Images
<style> #userinfo img,#usertrophies img,#usercollections img,#usershop img,#userneohome img,#userneopets img{filter:Alpha(Opacity=50);opacity:0.5;} </style>

Removing Stats Images
<style> #userinfo img,#usertrophies img,#usercollections img,#usershop img,#userneohome img,#userneopets img{display:none;} </style>

Adjusting the Size of Your Shop Keeper Image
<style> #usershop img{width:90px;height:90px;} </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:70px;height:70px;} </style>

Dashed Image Borders - Stat Images
<style> #userinfo img,#usertrophies img,#usercollections img,#usershop img,#userneohome img{border:1px dashed #000000;} </style>

Changing the Colors of your Image Borders - Stat Images
<style> #userinfo img,#usertrophies img,#usercollections img,#usershop img,#userneohome img,#userneopets img{border:1px solid red;} </style>

Removing Stat Headers from Userlookup
<style> .contentModuleHeaderAlt,.contentModuleHeader{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('URL.jpg');} </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)
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] #content,#main{width:650px;background-color:#FFFFFF;border:none;} #main{position:absolute;left:100px;top:0px;} #header,#footer{display:none;} [ /style]

Basic Skinny Layout: White Content Background without Stat Borders.
(Refer to other codes for help customizing)
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] #content,#main{width:650px;background-color:#FFFFFF;border:none;} #main{position:absolute;left:100px;top:0px;} #header,#footer{display:none;} .contentModule,.contentModuleTable{border:none;} [ /style]

Basic Click Layout
(Refer to other codes for help customizing)
<a href="#abc"><h1>CLICK!</h1></a> <div id="stats"><a name="abc"></a> If you have any information or pictures to add before your stats, you should place them here. Leave the table tag after this information because it helps position your user information. This information may, however, be removed once you've finished reading it. Enjoy! - CSS|Guide <table> [style] #main{background:none;border:none;} #header,#footer{display:none;} #stats{position:absolute;top:1000px;left:10px;height:550px;width:700px;overflow:auto;} body{overflow-y:hidden;} h1{font:40px tahoma;color:#000000;} [ /style]

Note: The click layouts are TNT approved as TNT has chosen click layouts as winners for their weekly userlookup spotlight competition.

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>

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

Moving Stat Boxes Closer Together
<style> #content{width:590px;} </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> font.sf{display:none;} </style>

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

Capitalizing "Erugi the Yellow Zafara" on Pet Descriptions
<style> #content div{text-transform:uppercase;} #pet_rating b,#pet_rating b a,.contentModuleTable,.sidebarTable{text-transform:none;} </style>

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

Removing Sidebar
(Works best in Mozilla; Change font color to the color of your background)
<style> hr,.activePetInfo td font,td b span,.neofriend .sf,.sidebarModule,.sidebarModule table td,.sidebar,.activePet a img,.activePetInfo,.sidebarHeader a img,.neofriendInfo,.neofriendUsername,.sidebarTable,.sidebarHeader,.neofriendAvatar,.sf a b,.sidebarTable a b,table .neofriendUsername a,table .neofriendInfo a{width:0px;height:0px:overflow:hidden;font-size:0px;color:#ffffff;border:none;background:none;} </style>

Removing Sidebar with Left Alignment Fix
(Works best in Mozilla; Change font color to the color of your background)
<style> hr,.activePetInfo td font,td b span,.neofriend .sf,.sidebarModule,.sidebarModule table td,.sidebar,.activePet a img,.activePetInfo,.sidebarHeader a img,.neofriendInfo,.neofriendUsername,.sidebarTable,.sidebarHeader,.neofriendAvatar,.sf a b,.sidebarTable a b,table .neofriendUsername a,table .neofriendInfo a{width:0px;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:0px;height:0px;overflow:auto;z-index:-1;} </style>

Removing Ads
<style> .ad_wrapper_fixed p,#ad300,#ad728,#ban_bottom,#vert_slug_leaderboard,.adBox2,.footOverlay{width:0px;height:0px;overflow:auto;z-index:0;border:none;} #ban{height:0px !important;} </style>

Adding Images
<img src="URL.jpg">

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

Pop-up Link
<a href="URL" target="_blank">Link Name</a>

Image Link
<a href="URL"><img src="ImageURL.jpg"></a>

Image Link With No Purple Border
<a href="URL"><img src="ImageURL.jpg" border="none"></a>

Pop-up Image Link With No Purple Border
<a href="URL" target="_blank"><img src="ImageURL.jpg" border="none"></a>

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

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

Bolding
<b>Your Text</b>

Slashing
(Use Arrows Instead of Brackets...This Code is Being Filtered for Some Reason...)
[s]Your Text[/s]

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

Breaking or Adding Text to a New Line
<br>

Marquee
(text scrolling)
<marquee>Your Text</marquee>

Bullets
<li>Your Text

Changing Background Colors
(changes gray background and petpage backgrounds)
<body bgcolor=blue>