.sf{display:none} #w{width:514px;} #info{background:#FFF;width:500px;border:7px solid #FFF;} #b{margin:0px;border:1px solid #BBB;background:#FFF;padding:10px;} td,p,body,.medText,table{font:7.5pt tahoma;color:#4C4C4C;} a:hover,a:hover b{color:#BFCE1E;} a:link,a:visited,a:active,a,b{font:7.5pt arial;color:#03697A;font-weight:bold;text-decoration:none;} i {color:#00A658;font:7.5pt georgia;font-style:italic;font-weight:bold;} u {text-decoration:none;border-bottom:2px solid #BFCE1E;} h1{font:20pt arial;text-transform:uppercase;margin:0px;color:#74C8AB;text-align:center;line-height:15pt;} h3{font:10pt arial;background:#BFCE1E;color:#555;margin:0px;text-align:right;text-transform:uppercase;font-style:italic;padding:1px 4px 1px 1px;} h2,h4{font:11pt monospace;letter-spacing:2pt;text-transform:uppercase;margin:0px;text-align:left;background:#DDD;padding:2px;border:1px solid #BBB;border-bottom:0px;padding-left:4px;color:#555;} h5{font:14pt georgia;font-weight:bold;padding:4px;margin:0px;text-align:center;font-style:italic;color:#FFF;background:grey;} body{background-color:#03697A;} a.nav,a.nav:link,a.nav:visited,a.nav:active{display:inline;padding:3px;margin:2px;background:#03697A;color:#FFF;font:9pt georgia;text-transform:uppercase;letter-spacing:0.5pt;} a.nav:hover,a.nav:hover b{background:#74C8AB;color:#000;} a.t,a.t:active,a.t:visited,a.t:link{font:7.5pt tahoma;color:#EEE;text-decoration:none;font-weight:normal;margin:0px;padding:2px;text-transform:uppercase;background-color:BBB;display:block;text-align:center;} a.t:hover,a.t:hover b{color:#555;background:#FFF;} TEXTAREA{border:1px solid #AAA;width:478px;height:50px;font:7.5pt verdana;overflow-x:hidden;color:#6C6C6C;padding:2px;} .a{font:14pt century gothic;color:blue;} .b{font:14pt century gothic;color:blue;background:grey;padding:2px;} .s6{font:14pt georgia;color:#03697A;border-bottom:2pt solid #03697A;} />

CSS Frequently Asked Questions

neopets.com/~bonyyclubb

about

Hello and welcome to my CSS Frequently Asked Questions! My name is Sam, and this page is for the users of my pre-mades site (found here). This page is intended to help those with questions in regards to my css.

I've explained each section as clearly and easy to understand as I can, as I know css for a lot of people is very confusing. Please make sure you read the whole section you are needing help in. If then you still don't understand, you can neomail me and i will do my best to make it clear for you.

If you have questions about css in general, I suggest taking a look at these pages:
; CSS HELP ; Neopets HTML Guide

And for colors you can check out this site:
{dot} com

links

» User Lookup Headers » Image Sizing

» Backgrounds » #main

» Big Fonts » Extra / Your Questions

user lookup headers

The most important thing to know about headers is which controls which table. In my css, you will almost always see the following: .contentModuleHeader and .contentModuleHeaderAlt. Now, .contentModuleHeader controls the User Info header; .contentModuleHeaderAlt controls the rest of the headers as a whole.

If you wanted to change each individual header, it's very simple. All you do is:
#user____ .contentModuleHeaderAlt, and there you go. Replace the blank with any other section (collections, shop, neopets, neohome, trophies) except "info" because .contentModuleHeader already controls that one. Also, you must keep the space between #user___ and .contentModuleHeaderAlt otherwise it won't work. Example:
.contentModuleHeader{background-color:#color;font:10pt arial;color:#color;} #usercollections .contentModuleHeaderAlt{background-color:#color;font:10pt arial;color:#color;} #usershop .contentModuleHeaderAlt{background-color:#color;font:10pt arial;color:#color;}

Let's say you wanted to have all headers with the same font/font color/etc but with different backgrounds, here's what you do:
.contentModuleHeader,.contentModuleHeaderAlt{font:10pt arial;text-align:center;color:#color;} .contentModuleHeader{background-color:#color;} #usercollections .contentModuleHeaderAlt{background-color:#color;} #usershop .contentModuleHeaderAlt{background-color:#color;}
That way you save text room.

ADDING HEADERS FOR USER LOOKUP STYLE 6:

Follow these steps carefully. & REFER TO YOUR CODE TO COMPARE WITH THE IMAGES!

1.] Remove '.contentModuleHeaderAlt,.contentModuleHeader' from the {display:none;} line (located at the very top of the code):

Before:

After:


Note: Notice how I removed the comma at the end. With that said, don't leave double commas; this will mess up the code!

2.] Now add your header code (between the style tags): .contentModuleHeaderAlt,.contentModuleHeader{font-family:georgia ;font-size:15pt;color:#9933FF;font-style:italic;} Just an example; change it however you want.

^

backgrounds

The basic code for a background is body{background:____;}. Here are other ways to change it:
[Fill in the blank with one of these]

1. one color: #color
2. patterned: url(img url here) or url(img url here) fixed
3. top left: url(img url here) fixed no-repeat left top
4. top right: url(img url here) fixed no-repeat right top
5. bottom left: url(img url here) fixed no-repeat left bottom
6. bottom right: url(img url here) fixed no-repeat right bottom

Example: If i wanted to do #5, it would look like this:
body{background:url(img url here) fixed no-repeat left bottom;}

For numbers 3-6, if you want to have a color with it to match your image add ;background-color:#color to the end. Example: body{background:url(img url here) fixed no-repeat right bottom;background-color:#color;}

^

big fonts

example!
.a{font:14pt century gothic;color:blue;}

This can also be used for making big links. All you have to do is put the font class tag in between the link code, otherwise it won't work. Example:

outside the tag: doesn't work.

in between the tag: yay works!

<a href="/"><font class="a">yay works!</font></a>

And there you have it :)

^

Image Sizing

NEOPETS: • Original size: 150 x 150. • To change: #userneopets img{width:#px;height:#px;}

TROPHIES: • Original size: 80 x 80. • To change: #usertrophies img{width:#px;height:#px;}

^

#main

ALL SCREENSHOTS TAKEN IN FIREFOX.

The #main is the "white column" (as most would call it) shown in this screenshot:


If you have a #main, it makes your lookup center. I prefer to make it 15px bigger than the #content. For example, if your #content width was 750px, I'd make the #main width 765px. It is important to know that in Internet Explorer, the #main automatically adjusts itself, meaning if your table stretches, so will the main. In other browsers, this does not happen.
If you have no #main width, it will automatically make your lookup shift to the left.

Here's an example when the #main width and #content width are the same:


And an example when the tables go outside the #main:

^ The neopets aren't going out because I gave it a specific width so it'd stay within the #main.

This is kind of tricky for people, so if you need help, feel free to ask.

^

Extra / Your Questions

1. TEXTAREA vs. textarea: Always use TEXTAREA; textarea will mess up your page when you go back to edit it.

2. Links: You DO NOT need to include "http://www.neopets.com" or any variation of that in a link code. You're linking to a neopets page, so the site already knows to put neopets.com in front of it automatically. Example: If you want to link a page, simple put "/~petname" or if it's for the boards, just put "/neoboards/index.html"! This saves you room, and sometimes it even messes up your link if you were to click on it.

3. Removing (lookups): Most common thing to remove for user lookups is #header and #footer. Code: #header,#footer{display:none;}. Other things to remove: #usercollections, #usershop, #userneopets, #userneohome, #usertrophies.

(Also this is where I'll add questions people have sent into me if I think they should be added.)

^

credits

Layout by me (sam/fruit20). No stealing please.