Css Codes

All codes work in any neo page (and also should work on none neo pages :P) and in all browsers, unless otherwise noted.

To use these codes you will need to put the code between a set of style tags, the style tags look like:

<style >
COPY AND PASTE CODES HERE
</style >

The new code filters are glitched and block several useful CSS property names and attributes, however you can by pass the filers by adding the following code to the start of your style tags:

//
*{}

So your tags should look like this:

<style >
//
*{}
COPY AND PASTE CODES HERE
</style >

You only need 1 set of style tags no matter how many things you copy and paste in there, they can ALL go between the 1 set of style tags.

Make sure that you are replacing any of the places that have capital letters, like COLOR or URL, with a color or url. If you are using hexcodes for a color, like #FFFFFF, or #A6D2FF, that you put the # in front of it, if you do not put the # in front then the colors will not show in some browsers.

This page is in no way finished. We just wanted to get up some codes to help everyone with some of the new layout changes. We will just continue to add more codes to the page as we find time to add them. If you have a code you would like us to add here please neomail faerieskater2.

Quick Navigation:
[ Backgrounds | Remove Things | Lookup Stuff | Fonts/Links | Graphics/Images |
Blogs/Divs | Shops/Galleries | Guild | Petlookup | Sidebar | Misc ]

Backgrounds

Sets the outer background

Changes the background that is in the "outer - grey" part of the page.

Add in your bg url where it says URLHERE, change the color after color: to the color you want your bg to be while it waits to load your image bg.

Example

Sets the inner background

Changes the background that is in the "inner - white" neo section.

Add in your bg url where it says URLHERE, change the color after color: to the color you want your bg to be while it waits to load your image bg.

Example

Just a plain color outer background

Add the color you want your bg to be where it says COLOR.

Example

Just a plain color inner background

Add the color you want your bg to be where it says COLOR.

Example

Get rid of the "inner" neo section, and only have the "outer" background

Add in your bg url where it says URLHERE, change the color after color: to the color you want your bg to be while it waits to load your image bg.

Example

Add a background in for the headers on your userlookup sections

This will put a background in for the headers of your userlookup sections.

Add in your bg url where it says URL, change the color after color: to the color you want your bg to be while it waits to load your image bg.

Example

Other things you can adjust

There are lots of other things you can add into the base codes to make your background do certain things.

For example, if you want to make your background fixed, no repeat, and in the bottom right hand corner then you would take the background code you are adjusting, in our case we will adjust body {background:url(URL);}, and you add background-attachment:fixed; , background-repeat:no-repeat; , and background-position: bottom right; to the code so it now looks like this:
body {background:url(URL);background-attachment:fixed; background-repeat:no-repeat;background-position: bottom right;}

You can do things like this to most of the above background codes. Here are some other things you can change:

Code	Example	Values	Explanation
background-attachment: VALUE;	background-attachment: fixed;	scroll, fixed	Makes your bg fixed so that info scrolls over it, or makes it so it scrolls with your page
background-position: VALUE;	background-position: top center;	top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right	Sets the position of your bg
background-repeat: VALUE;	background-repeat: no-repeat;	repeat, repeat-x, repeat-y, no-repeat	Changes how your background repeats
background-image: VALUE;	background-image: url(URL);	url(URL), none	Changes the background image
background-color: VALUE;	background-color: pink;	Any color, be sure to add the # in front of the hexcodes if you use them, so like #FFFFFF instead of just FFFFFF	Changes the background color

Remove Things
Remove the header section This will remove the top header part. Remember if you do this you must provide some form of navigation somewhere else on your page.	#header {display:none;} Example
Remove the footer section This will remove the footer section.	#footer {display:none;} Example
Get rid of the background and border of the main neo section. This will get rid of the white inner background and the black border it has.	#main {background:none; border: 0px;} Example
Gives you a blank userlookup. This will remove your header, footer, and the main area stuff, and only leave your neo info on the page.	#footer, #header {display:none;} #main {background:none; border: 0px;} Example
Remove the side pet and neofriends section. This will remove the sidepart that lists your pet and the online neofriends.	.sidebar {visibility: hidden; background:none;} Example
Remove the horizontal rule that is in your lookup or shop/gallery This removes the horizontal rules that neo automatically has in some places in your lookup and your gallery.	hr {display:none;} Example
Remove the banners. This will remove the top and bottom banners that you have in your shop, gallery, guild, etc.	#ban, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay {display:none;} Example
Remove the top header but leave the navigation links. This will remove the top header stuff, but still leave the navigation links.	#header {visibility:hidden;} #template_nav {visibility:visible;} Example
Remove the white around images. This will remove the white around your neo images. It will also make it so that it doesnt put that ugly black border around your pets and your links and such that a lot of the remove the white around your images codes does. -Only works in Internet Explorer because ff doesnt have an equilevant code for filter:chroma ;-; if someone knows of one, please neomail faerieskater2	.contentModuleTable td img {filter:chroma(color=#ffffff);} #userneopets td img {filter:none;} Example
Remove the part that says Userlookup : USERNAME and the ? img. This will remove the userlookup : username and the ? img. If you have any bold text or a linked image in a div box then you need to add this in for each class/id of the div you have the bold or linked image to make it visible For a div bold text div.CLASS/#ID b {visibility:visible;} for example: div#examid b {visibility:visible;} For a div linked image div.CLASS/#ID a img {visibility:visible;} for example: div.examclass a img {visibility:visible;} -Thanks to x_airi_anime_star_x for part of this code.	.content div a img, .content div b {visibility:hidden;} .contentModule div a img, .contentModule div b {visibility:visible;} Example
Remove the new events This will remove the events so that they don't show up. - On petlookups this code will also remove the image of your pet. (Since 14 june 2007)	.sf {display:none;} Example

Lookup Stuff
Change the color of the headers on each of the lookup sections This will change the color of headers that are on your lookup sections. Change where it says COLOR to change the background color and then the text color of the header.	.contentModuleHeader, .contentModuleHeaderAlt {background-color: COLOR; color: COLOR;}
Change the color of the table border around the lookup sections. This will change the color of table border that is around the lookup sections. Change where it says COLOR to change color, you can also change the border width and type..	.contentModuleTable {border: 2px solid COLOR;}
Change the color of the outer gray table border around the lookup sections. This will change the color of table border that is around the lookup sections. Change where it says COLOR to change color, you can also change the border width and type.	.contentModule {border: 1px solid COLOR;}
Put a background in for the lookup sections background. This will put in a bg for each of the lookup sections. Put in the URL of the background you want to add, where it says URLHERE.	.contentModuleContent {background: url(URLHERE);}
Change the color of the lookup sections background. This will put in a bg for each of the lookup sections. Put in the color you want the background to be where it says COLOR.	.contentModuleContent {background-color:COLOR;}

Fonts/Links

Change the main body font

This code will change the color of your whole pages font.

Change your link colors

This will change the color of all the links on the page.

Change the color of the bolded fonts

This will change the color of all the bolded fonts on your page.

Change the color of the bolded links

This will change the color of the things that are both bolded and links, but leave the things that are only links the color you have your links set at.

Change the color of the text in the footer

This will change the color of all the text in the footer. Like the Copyright info and the search bar/language select text.

Change the color of your Neoclock

This will change the color of your neoclock text.

Change the color of the top user stats text

This will change the color of the top user stats text, like Welcome, np, etc.

Change the color of links when you hover

This will change the color of when you hover over your links. You can use this with any of the above codes that have an "a" in them, so that you can make each part different. You just add the :hover after the "a", of whatever special area you want to make have a different hover color.

Change the color of links that have been visited

This will change the color of links that have been visited. You can use this with any of the above codes that have an "a" in them, so that you can make each part different. You just add the :visited after the "a", of whatever special area you want to make have a different visited color.

Other things you can adjust

There are lots of other things you can add into the base codes to adjust certain things in the codes.

For example, if you want to change the font-size of your links and make them bold, then after the #main a {color:COLOR;}, you would add in the code font-size:14pt; and font-weight:bold;, so your code would now look like
#main a {color:COLOR; font-size:14pt; font-weight:bold;}

You can do this to any of the above font/link codes. Here are some other things you can change:

Code	Example	Values	Explanation
color: VALUE;	color: pink;	Any color, be sure to add the # in front of the hexcodes if you use them, so like #87CEEB instead of just 87CEEB	Adjusts the color of text
font-size: VALUE;	font-size: 14pt;	Any size	Adjusts the size of your text
font-family: VALUE;	font-family: 'times new roman';	Any font, if you use a font that is multiple words be sure to put it between ' '	Adjusts the font type
font-style: VALUE;	font-style: italic;	normal, italic, oblique	Adjusts the style of your text
font-weight: VALUE;	font-weight: bold;	normal, bold, bolder, lighter	Adjusts the weight of your text
letter-spacing: VALUE;	letter-spacing: 4px;	Any size in px	Adjusts the amount of space between each letter
line-height: VALUE;	line-height: 40px; example	Any size in px	Adjusts the amount of space between each line of text
text-align: VALUE;	text-align:center;	left, right, center, justify	Adjusts the alignment of your text
text-decoration: VALUE;	text-decoration: line-through;	none, underline, overline, line-through, blink	Gives our text some sort of decoration
word-spacing: VALUE;	word-spacing: 20px; ex. ex. ex.	Any size in px	Adjusts the amount of space between each word
text-transform: VALUE;	text-transform: uppercase;	capitalize, uppercase, lowercase	Adjusts the way your text looks

Graphics/Images
Put in your own header This code will let you put in your own header image for the neo header background. You need to put in your url where is says URL. Then you need to change the ## after height to the height of your header.	#header {background: url('URL');height:##px;border:0px;}
Put in your own footer This code will let you put in your own footer image for the neo footer background. You need to put in your url where is says URL. Then you need to change the ## after height to the height of your footer.	#footer {background: url('URL');height:##px;border:0px;}
Add your own basic image (not a positioned image) This is the code you can use to just put in an image where you type stuff. You need to put in your url where is says URL. If you are using a png image, then you need to add a height="##px" and a width="##px" with the correct height and width in for the ##, otherwise they will not work in ie. This code does NOT go between style tags	<img src="URL" alt="" />
Add your own Blinkie This will put a blinkie in where your name is on your lookup. You need to put in your url where is says URL. Then you need to change the ## after height and widht to the height and width of your blinkie. You also will need to change where it says "Full Name" to <u>.</u>. You will need to make sure your name says this EVERY time you update your profile -Only works in Internet Explorer	u{background:url(URL);height:##px;width:##px;}
Add an image cursor - ie only This will change your cursor to your own image type cursor for both the page and on your links. You need to put in your url where is says URL.	body,a {cursor: url(URL);}
Add an image cursor - both ie and ff This will change your cursor to your own image type cursor for both the page and on your links. You will need both an .ani and a .jpg/.gif of your cursor for the cursor to work in both browsers. The reason for this is .ani cursors work in ie but not ff, and .jpg/.gif cursors work in ff but not ie x_x. Also you can only set either the .ani (ie) /or/ the .jpg/.gif (ff) for your body, so that means that in the outer gray areas of your pages the cursor will only work in one browser, not both, you can change which one you prefer it to work in by just changing which part of the code has the body tag. The code is displayed to have your cursor work in ie in the textbox. You need to keep the code as it is, other than changing which one has the body tag if you want to change it so ff shows the cursor outer areas. If you change the code too much all the parts will not work. Currently this code makes it so that in the main neo section your cursor works in both ie and ff, and also when you hover over your links in both ie and ff. You need to put in the right URL of your cursor in where it says URL.ani or URL.jpg-or-URL.gif.	body,#content,#main a{cursor: url(URL.ani)} #main, a{cursor: url(URL.jpg-or-URL.gif), default}
Add your own Shield This will put a shield in the general area of where your shield goes. You need to put in your url where is says URL. This code will not work if you want to have another image background in for your userlookup stats background. It will work for any colored bg, white bg, or transparent/none background. If the shield is too far up then you can move it down by actually changing the shield image, and give it more of transparent/white top before the shield starts, or you can change the background-position:top right; to number % positioning, so like background-position;10% 80%; for example, which will position the shield 10% in from the left of the area, and then 80% down from the top.	#userinfo .contentModuleContent{background-image:url(URL);background-repeat:no-repeat;background-position:top right;} #userinfo .medText img {visibility:hidden;} #userinfo .medText table table img {visibility:visible;}

Blogs/Divs
Neo stats in a blog. This code will make it so that your neo stats are in a scroll box that you can position wherever you want. You will need to change the positioning to where you want the blog with your neo info in it, change the #'s after top and left. You can change the size of the blog by changing the #'s after height and width. This code already has the style tags added in it, you do not need to add another set.	<style> // *{} .neoinfo{top:##px;left:##px;height:##px;width:##px;overflow:auto;position:absolute;} </style> <div class="neoinfo"><table><tr><td colspan="2">
Neo Stat in a blog with colored bg and border This code will make it so that your neo stats are in a colored scroll box with borders that you can position wherever you want. You will need to change the positioning to where you want it, so change the #'s after top and left. You can change the size of the blog by changing the #'s after height and width. You will also need to change the colors to whatever colors you want. This code already has the style tags added in it, you do not need to add another set.	<style> // *{} .neoinfo{border:2px solid green;background:red;top:##px;left:##px;height:##px;width:##px;overflow:auto;position:absolute;} </style> <div class="neoinfo"><table><tr><td colspan="2">
Just a div for text This is just a div box that you can use to put info in and position it wherever you want. This code will NOT include your neo stats. You will need to change the positioning to where you want the blog with your text/info in it, change the #'s after top and left. You can change the size of the blog by changing the #'s after height and width. This code already has the style tags added in it, you do not need to add another set.	<style> // *{} .about{top:##px;left:##px;height:##px;width:##px;overflow:auto;position:absolute;} </style> <div class="about"> Stuff here </div>
Multiple divs for text This makes it so that you can have more than 1 div box for you to put info in. If you want more than the 2 listed here then you can just copy the sections of the code that correspond and change the places where it says about1 or about2, to like about3 or whatever else you want to call it. You can have as many div boxes as you have space for as long as you name them all different classes. You will need to change the positioning to where you want the blog with your text/info in it, change the #'s after top and left. You can change the size of the blog by changing the #'s after height and width. This code already has the style tags added in it, you do not need to add another set.	<style> // *{} .about1{top:##px;left:##px;height:##px;width:##px;overflow:auto;position:absolute;} .about2{top:##px;left:##px;height:##px;width:##px;overflow:auto;position:absolute;} </style> <div class="about1"> Stuff here </div> <div class="about2"> Stuff here </div>

Shops and Galleries
Put a table around your items - Shop This code will put a table around your shop items, without you having to have that icky open ended table tag. If you have have any other tables in the coding for your shop they will also have whatever attributes you give your items, unless you give the other tables you put in a specific class/id and then go in and set it so that they do not. Add in the color you want for the bg and the border where it says COLOR, you can also change the px size and type of border after where it says border.	.content table {background-color:COLOR;border:3px solid COLOR;}
Put a table around your items - Gallery This code will put a table around only your gallery items. Add in the color you want for the bg and the border where it says COLOR, you can also change the px size and type of border after where it says border.	.content table table {background-color:COLOR;border:3px solid COLOR;}
Remove the border around your items - Both This will remove the border around your items for either your shop or gallery. If you want to change the border instead of remove it,then where it says none, you can just put a 2px solid COLOR type of thing in instead of none to change the color and width and type of the border instead.	.content table img {border:none;}
Remove the yellow places banner - Shop (already gone in galleries) This will remove the yellow shop/places banner that you have in your shop. Its the banner with links to like your inventory, shop, guild, etc and so on. This will make it so that it will get rid of the banner in both the flash and html versions, so it won't matter which setting the person uses.	#shop_toolbar {display:none;} .content div img {display:none;}

Guild
Change the background color of your guild poll When using firefox the guild poll has a white bg color. This code will change the bg color of your guild poll. You can use any of the top background codes in here as well to stick an image bg in if you wanted as well. Add in the color you want for the bg. I really wish neo would give every table an id ._.	table table table table td {background-color:#COLOR;}
Change the width of the guild poll After changing the bg color of the poll sometimes it will then be longer and noticable past the graphic you are using. You can change the width of it by using this code. Change the ## after width to the size you want the guild poll to be.	table table table table{width:##px;}

Petlookup
Increase or Decrease your pet's size You can customize the size that your pet is displayed at in your petlookup. Change ## into a number of pixels for the height and width. Thanks toastychloe for this code!	#CustomNeopetView{height:##px; width:##px}

Sidebar Module
Change the color of the headers on the sidebar module This code will change the color of the headers of your sidebar module, so like your pet name, search neopets, and neofriends beta. Add in the color you want for the bg.	.sidebarHeader {background-color: #COLOR;}
Change the bg color of all the main sections of the sidebar module This will change the bg color of all the main parts (the non headers) on your sidebar module. Add in the color you want for the bg.	.activePet, .neopetPhrase, .activePetInfo, .activePetInfo td, .neofriend {background-color: #COLOR;}
Change the color of all the sidebar module parts This code will change the color of the parts on the sidebar module at once, but you wont be able to individually make the headers and sections different colors. Add in the color you want for the bg.	.sidebarTable td {background-color: #COLOR;}

Misc
Change the color of the drop down navigation. This will change the color of the table the drop down is in and also the color of the links and hover. Just change all the places where it says COLOR, to get the look you want.	ul.dropdown {border: 1px solid COLOR;background-color: COLOR;} li:hover ul.dropdown a, li.over ul.dropdown a {color: COLOR;} li:hover ul.dropdown a:Hover, li.over ul.dropdown a:hover {color: COLOR;}
Change the color of your scrollbar This will change the color of your scrollbars. Please see our Scrollbar Tutorial to see what section does what. -Only works in Internet Explorer	body{ scrollbar-face-color:COLORGOESHERE; scrollbar-shadow-color:COLORGOESHERE; scrollbar-highlight-color:COLORGOESHERE; scrollbar-3dlight-color:COLORGOESHERE; scrollbar-darkshadow-color:COLORGOESHERE; scrollbar-track-color:COLORGOESHERE; scrollbar-arrow-color:COLORGOESHERE;}
Adjust the padding inbetween the neo navigation This will adjust the margin/padding inbetween the neo navigation links. This will help if you had a lookup made and then all of a sudden neo added the extra video navigation section and now it goes past the area you had designated and moves to the next line, or any other similar situation. This code will adjust it so that it fits again. You can adjust the number from 5px to something smaller or a bit larger as well if you want, the smaller the number the less space there will be between each section.	li.nav_image {margin-left: 5px}

Css Codes

SunnyNeo

Quick Links

Search SunnyNeo!

Get Instant News!