Home Updates
Special Basic CSS Fancy CSS Ncmall Graphic Remixed Vintage Patterns Less Used
Decorative Top and Bottom Recolors
Backgrounds Shields Shops Galleries
Wishlist Petpage Descriptions Big Pet Codes
Sitely Faq/Rules Css Guide Scrapbook Spotlight
Simple Fly

Layout/Template
We make our own templates.

Our petpage layouts are not for free use.

Layout Alignment
try adding a center alignment to text portions of your layout or above text areas and images. Sometimes it works sometimes it don't, is a mystery to why.

Outside style tags

Inside style tags


Other ways would be to adjust the side menu coding, #content coding and #main coding.
Making your Trophy Images Smaller
height: 40px; width 40px;
Add it into your style tags
Navigation

Adding the nav to your layouts.
These are just some quick versiouns you can copy&paste into your layouts.

1 2 3 4 5 6 7 8 9


a b c d e f g h i


+ + + + + + + + +


· · · · · · · · ·


Account Customise Games Explore News Community Shops Ncmall Premium


Account - Customise - Games - Explore - News - Community - Shops - Ncmall - Premium -


Account | Customise | Games | Explore | News | Community | Shops | Ncmall | Premium |


Acc | Cust | Games | Exp | News | Com | Shops | NC | Prem |




Adding images!

Here is a quick way to add your own images! You can practice with the images above!

Step one: Right click on the image
Step two (Firefox users): Select "copy image location
Step two (Google users): Select "copy image URL
Step three: Paste the URL into the below code inside the two quotes (where the image example is)



Coding Extras

Adding a texture to your layouts.
This is how you can add a wallpaper/background to your layouts. You need to add this under the tag: body
background-image:url("addurlhere");


Making the background fixed
This is how you get your background to stay in place so that when you scroll it doesn't move. You need to add this under the tag: body
background-attachment: fixed;


Adding a big picture to the Simple and Clean layout.
If you want to add a big picture, or lots of pictures on your layout you will need top paste them above the following code.
div id="margin" style="margin-top: 290px;


Layout too big? Layout too small?
You can resize the your layout by adding the code below and changing the numbers. This needs to be added to both sections of code under the tags: #userneopets, #content
width:920px;


Shrinking Trophy Images
Add this code in your style tags.
#usertrophies img {width: 50px;height: 50px;}


Removing NCMALL and Habitarium
Add this code in your style tags.
#ncmall, #habitarium { display:none; }

HELP! I cant see all of my trophies, gallery images or click on top links
Add this code in your style tag: #main {margin-bottom:300px;}
Bottom: Add the above code to fix bottom sticky image problems! You can change the number to something lower if you have tooo big of a gap, but you shouldn't have to have any number larger than 300px to fix this!

Add this code in your style tag: #main {margin-top:200px;}
Top: Add the above code to fix top sticky image problems! You can change the number to something lower if you have tooo big of a gap, but you shouldn't have to have any number larger than 300px to fix this!

Big pet code not showing my pets?
If your trying to use a bigger pets code and see blue jetsams, read this.
You need to change the part of the code that says "PETNAME" to your pet name. You will need to add each pets name twice. Once for the link and once for the image.

Float Extras

Layering Images
Change the z-index # in the code to layer your images
z-index:-1; will go behind all your content but above your background

Lookups, Pet Descriptions and Galleries (bottom):
This code will add space at the bottom of your layouts so that you can see whatever a bottom sticky image may cover. Such as your trophies and gallery images. You can change the number to something lower if you have too big of a gap, but you shouldn't have to have any number larger than 300px to fix this!

#main {margin-bottom:300px;}

Lookups, Pet Descriptions and Galleries (top):
This code will add space at the top of your layouts so that you can see things such as your menus and pets if it covers them. You can change the number to something lower if you have too big of a gap, but you shouldn't have to have any number larger than 300px to fix this!
#main {margin-top:300px;}

Petpages:
If you cant reach the save button, you can use this code to add space and fix that. :) [note* if you tried before they blocked the previous code, this is a new one that does work]

body{margin-bottom:300px;}

Removing neopets footer, header and link bar:
Sometimes it just looks better if they are gone when your using these stickies!




Great guides for your to check out!


Changing your info / collection images!

Everything you need to know CSS.

How to make a button

How to make a button





NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2013.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions