Filter Solutions
About Inlines Shop Specific Userlookup Specific Guild Specific

CSS Codes
Backgrounds Removal codes Scrollbars Header & Footers Links Cursors Fonts Other Codes

Userlookup Specific
Removal codes Image codes Stat Headers Stat Boxes Basic Userlookup Layouts Other Codes

Guild Specific
Removal Codes

Petpage Specific
Removal Codes

Pet Description Specific
Image Codes Other Codes

Shop & Gallery Specific
Removal Codes

HTML Codes
Images Image/Text Wrap Links Centering Text Basic Font Tricks Other Codes

Affiliated with





Soft Dreams






Listed At
Al-Dalil Efficacious Lorna's Petpage Directory Over The Sun Paper Thin Soroptimist Zeroed In

Reviewed By
Overlooked: 95/95 Steamed: 66.5/80 Decimals: 17.96/18.5

Awards



[Drag to URL bar to view.]

Questions or Comments
If you feel there's something missing from this guide or if something isn't working properly, feel free to neomail me @ Dark_riku_765 and I'll get it up and fixed just as soon as I can.

Link Back






Welcome
Updates & Information

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. 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 139 unique codes.

[1/23]: Guild Specific code added for removing your guild logo.

[1/19]: Code added for making text appear over images while hovering. See the Other HTML codes section.

I'm going through updates unusually fast lately, so in case you missed it, there's a blog code under the Other Css Codes section and the shop specific codes have all been upgraded and should work in all browsers equally.

[1/18]: ^^ We got our review from Decimals today: 17.96/18.5! Which also earned us a new award! Thank you so much Serena. Since it's come up in all three of our reviews, the reason why I've only got one link back button is because it's easier to identify, if you think of it like a logo, and I don't want to clutter up the sidebar tremendously. Otherwise, yes, I can see why everyone might think we may need a couple more. :oP

[1/17]: Adding codes for wrapping text around images (has its own section under HTML codes). I also added a section for Headers and Footers under the Css section. I added codes for replacing the Header and Footer images with your own. I also put the codes for removing the headers and footers into that section. Those codes can also be found under the Removal section for Css codes. The codes fall under both sections, so they're listed in both for easier access. :o)

Also added a code for modifying the font attributes of the Neo Clock (under other css codes) and codes for changing the distance between words in your text (under the fonts section for css codes).

[1/17]: No update this time, but rather a short rant I feel I'm entitled to. If you run your own css help page, DO NOT STEAL OUR WORKAROUNDS. (ie. our shop specific codes; I realize the filter solutions are fair game at this point). If it's YOUR guide, all of the content should be YOURS. NOT MINE.

Please keep in mind, I have absolutely no problem with anyone actually using the shop specific codes in their shops, as they should be used. However, hovering over here in order to steal our codes for your own css guide is unacceptable.

Thank you. o3o I'll try and think of some other things to update CSS|Guide with shortly.


Filter Solutions
About Inlines

Inlines will get you through the filters for petpage, gallery, and some userlookup layouts. 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:



Could be re-written into HTML (inlining) like so:



Or if you're lazy like me and only want to do the bare 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 (position):



Either will do.


Shop Specific Solutions

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:



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:



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


Userlookup Specific

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 everything after your [/style] tag, and throw it up above your css style tags at the start of your code, like so:



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:



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.


Guild Specific

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:



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.


CSS Codes
Background Codes

Removing White Background


Removing White Background's Border


Removing White Background & Its Border


Changing Your White Background Color


Adding A Background Image Into Your White Background Space


Changing Your Gray Background Color
(changes background colors for petpages)


Adding Background Images Into Your Gray Background Space
(creates a tiled background in petpages)


Forcing a background image to only repeat vertically (up and down)


Forcing a background image to only repeat horizontally (left and right)


Creating a non-repeating image background



Removal Codes

Removing Whiteness in Images
(Only works in Internet Explorer)


Removing Nickelodeon White Ad Bar


Removing Ads on Top of Site


Removing Ads on Bottom of Site


Removing All Ads


Removing Neopets Header & Footer Images
(for shops, see shop specific codes)


Removing Sidebar Information
(for shops, see shop specific codes)



Scrollbars

Scrollbar Colors
(Internet Explorer only)


Hiding Vertical Scrollbars
(Incompatible with IE8)


Hiding Sidescrolls
(Incompatible with IE8)



Headers & Footers

Replacing Header Image with Your Own
(change height and width accordingly)


Replacing Footer Image with Your Own
(change height and width accordingly)


Removing Header
(for shops, see shop specific codes)


Removing Footer
(for shops, see shop specific codes)


Removing Header & Footer
(for shops, see shop specific codes)



Links

Changing Link Color, Font Type, & Size


Link Color Change on Mouseover (Font Type & Size Also)


Change Link Background Color on Mouseover (Font Type, Size, & Color Also)


Bolding Links (Font Type, Size, & Color Also)


Underlining Links (Font Type, Size, & Color Also)



Cursors

Question Mark Cursor


Question Mark Cursor Only When Hovering Over Links


Crosshair Cursor


Crosshair Cursor Only When Hovering Over Links


Crosshair w/ Arrows Cursor


Crosshair w/ Arrows Cursor Only When Hovering Over Links


Waiting Cursor
(image varies with operating systems)


Waiting Cursor Only When Hovering Over Links
(image varies with operating systems)


Hand Cursor


Hand Cursor Only When Hovering Over Links


Text Bar Cursor


Text Bar Cursor Only When Hovering Over Links



Fonts

Changing Text Color


Changing Text Size & Font Type


Changing Text Color, Size & Font Type


Changing Line Height
(increase or decrease distance of one line of text from another)


Changing Line Height (Color, Size, & Font Type Also)
(increase or decrease distance of one line of text from another)


Changing Letter Distance
(increase or decrease the distance between letters in words)


Changing Letter Distance (Color, Size, & Font Type Also)
(increase or decrease the distance between letters in words)


Changing Word Distance
(increase or decrease the distance between words)


Changing Word Distance (Color, Size, & Font Type Also)
(increase or decrease distance of letters in words)



Other Codes

Modifying the Neopets Clock (Font Color, Font Size, & Font Type)


Basic Blog Code
  • For #css, width and height refer to that of your background image.
  • For #css, replace IMAGE.JPG 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).


    Horizontally Inverting a Page


    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.)



  • Userlookup Specific Codes
    Removal Codes

    Removing Whiteness in Stat Images
    (Only works in Internet Explorer)


    Removing Trades, Auctions, Wishlist, Neomail, & Neofriend (yellow) pictures & links from Userinfo Section


    Removing Horizontal Gray Bars


    Removing Horizontal Gray Bar in User Info


    Removing User Info


    Removing Collections


    Removing Shop & Gallery


    Removing Neopets


    Removing Neohome


    Removing Games & Trophies


    Removing Userlookup: guest (?)


    Removing Borders from Stat Boxes


    Removing Stat Headers from Userlookup


    Removing All Information From Userlookup



    Image Codes

    Adding Transparency to Stats Images


    Removing Stats Images


    Adjusting the Size of Your Shop Keeper Image


    Adjusting the Size of Your Neopets' Images


    Adjusting the Size of Your Trophy Images


    Dashed Image Borders - Stat Images


    Changing the Colors of your Image Borders - Stat Images



    Stat Headers

    Removing Stat Headers from Userlookup


    Modifying Headers
    (Font Color, Font Size, Font Type, & Background Color)


    Modifying Headers w/ No Background
    (Font Color, Font Size, & Font Type Also)


    Modifying Headers w/ Uppercase Letters
    (Font Color, Font Size, Font Type, & Background Color Also)


    Underlining Headers
    (Font Color, Font Size, Font Type, & Background Color Also)



    Stat Boxes

    Removing Borders from Stat Boxes


    Adjusting the Size of Your Userinfo Box


    Adjusting the Size of Your Userinfo Box
    (No Borders)


    Adjusting the Size of Your Collections Box


    Adjusting the Size of Your Collections Box
    (No Borders)


    Adjusting the Size of Your Shop Box


    Adjusting the Size of Your Shop Box
    (No Borders)


    Adjusting the Size of Your Neopets Box


    Adjusting the Size of Your Neopets Box
    (No Borders)


    Adjusting the Size of Your Neohome Box


    Adjusting the Size of Your Neohome Box
    (No Borders)


    Adjusting the Size of Your Trophies Box


    Adjusting the Size of Your Trophies Box
    (No Borders)


    Changing Stats Boxes Background Colors


    Changing Stats Boxes Background Image


    Changing Stats Boxes Border Color


    Stat Boxes With Dashed Border



    Basic Userlookup Layouts

    Basic Skinny Layout: White Content Background with Visible Stat Borders.
    (Refer to other codes for help customizing)


    Basic Skinny Layout: White Content Background without Stat Borders.
    (Refer to other codes for help customizing)


    Basic Click Layout
    (Refer to other codes for help customizing)


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

    Other Codes

    Making Your Pet's Names Lowercase


    Capitalizing Your Pet's Names


    Centering User Info Text


    Moving Stat Boxes Closer Together



    Guild Specific Codes
    Removal Codes

    Removing Your Guild Logo


    Removing the Poll Background Color in Mozilla



    Petpage Specific Codes
    Removal Codes

    Removing the Banner at the Top of the Page


    Removing the Copyright on the Bottom of the Page



    Pet Description Specific Codes
    Image Codes

    Changing the Size of Your Pet's Image



    Other Codes

    Removing "Petname the Pettype" (?) on Pet Descriptions
    Submitted by Brexis


    Capitalizing all letters of "PETNAME the PETTYPE" (?) on Pet Descriptions


    Capitalizing the first letters of "Petname the Pettype" (?) on Pet Descriptions



    Shop & Gallery Specific Codes
    Removal Codes

    Removing Nickelodeon White Ad Bar


    Removing Sidebar
    (change font color to the color of your background)


    Removing Sidebar with Left Alignment Fix
    (change font color to the color of your background)


    Removing Header & Footer Images


    Removing Ads



    HTML Codes
    Images

    Adding Images



    Image-Text Wrap

    Image Positioned to the Left With Text Wrap Around It


    Image Positioned to the Right With Text Wrap Around It



    Links

    Adding Links


    Pop-up Link


    Image Link


    Image Link With No Purple Border


    Pop-up Image Link With No Purple Border



    Centering

    Basic Centering


    Paragraph Centering



    Basic Font Tricks

    Aligning Text to the Left


    Aligning Text to the Right


    Bolding


    Slashing
    (Use Arrows Instead of Brackets...This Code is Being Filtered for Some Reason...)


    Slashing (on Petpages)


    Underlining


    Italicizing


    Sup Text


    Sub Text


    Font Color


    Font Size



    Other Codes

    Making Text Appear When You Hover Over an Image:



    Breaking or Adding Text to a New Line


    Marquee Left
    (text scrolling)


    Marquee Right
    (text scrolling)


    Marquee Up
    (text scrolling)


    Marquee Down
    (text scrolling)


    Bullets


    Changing Background Colors
    (changes gray background and petpage backgrounds)






    Les caractères, logos et noms NEOPETS et toutes les appellations qui y sont liées
    sont des marques déposées de Neopets, Inc., © 1999-2010.
    ® denotes Reg. US Pat. & TM Office. Tous droits réservés.

    Politique de Confidentialité | Astuces Sécurité | Contactez-nous
    A Propos de Neopets | Plaquette de Presse
    Utiliser ce site implique que tu acceptes les Termes et Conditions