Intro Yes I am aware that there are some people who don't know how to code layouts. I am not here to give you a full run down, but this guide will serve as a guide that helps you get started. Ofcourse I will build up and add on more and take suggestions as time goes. I do understand that although I understand everything in here, not everyone will be able to understand what I am trying to say. Unfortunately I cannot put myself into the point of view of someone who don't know what these CSS means. So if you have questions, DO ask. I will try my best to help if you are nice about it! This guide isn't perfect, there are probably flaws I have yet to discover, so bare with me. Anyways, here goes! Future Updates x Screenshots x More sections! :yup: Starting A CSS Alright so as neopets lookups changed through the ages {lol im sorry im born being lame}, their code requirement started leaning more towards the CSS side of things, as they slowly sort of drift away from the full dependent of html. To start a simple CSS, you need the following tags: <style></style> The closing tag always have to have / However, it's not always as simple as that. Because when you use those normal tags, some of the things you want to add on to your lookup will be stopped by TNT's code filter. So here, is where we add those forward slashes in, to make it look something like this: <style /> </style /> I'm sorry that unfortunately I am unable to explain why the forward slashes make a difference in by passing the code filter, but I will research upon this. Oh yea, all CSS goes in between the opening and closing tags so it will look like: <style />CSS IS RIGHT HERE. THEY ARE HAPPY ONLY HERE AND NO WHERE ELSE XD</style /> Okay lets move on from the tags. Hex Codes Before we move on to changing colors and styles and what not, I would like to bring in a little intro. to hex codes. Hex codes are usually six digits, mixed of numbers and letters assigned to them. For example this red has a hex code of FF0000, and this is FF4000. You can basically find every single color you please, this is awfully easy with programs like Photoshop, Paint shop pro, even paint. Just use the color picker tool. Fonts There are a lot of things you can do with fonts. Whether you change your whole page of text to uppercase, lowercase, certain colors, etc. You can even change the font displayed for the links you click every day. b {color: #HEXCODE HERE;} i {color: #HEXCODE HERE;} u {color: #HEXCODE HERE;} "b" is telling you that when you bold something appearing a little thicker than normal text like this, you want it to look like a certain style / color. The {} brackets are like a command to the bold words. So for the example above I have color: #HEXCODE HERE; is like saying to whatever you bold "hey you! yeah you! I want you to be BLUE!" {Assuming that the hex code you put in there is blue as an example}. "i" is italic, "u" is underline. Straight forward, similar concepts right? :yup: Do note that the semicolon ; <- which is that thing and the space between b and the {} brackets "b {}" is VERY important also. You need to pay a great deal of attention to spaces and the punctuations. So now after the colors, comes the font size. You can make your font however big or small you want. Depending on the font style you use, some might look bad when they're big, some might look better when they're big, and vice versa with small fonts. To add a font size, simple add this "command" after your semicolon of your hex color. font-size:8pt; After doing so your font for whatever section you put this command in, will change. So it will look like this, for example if you are setting a font size on your bold words. {You can change the 8 to something of your desire, just mess around with it.} b {color: #HEXCODE HERE; font-size:8pt;} If you want a different font style, just simple add this after you specify your font size. century gothic It will then look like this: b {color: #HEXCODE HERE; font-size:8pt century gothic;} Customizing Links Ah yes. You can do what you learned up there with links too! Except this time instead of using units like "b, i, u" we replace them with something else. There are four names assigned to links. link, active, visited, and hover. Link = How the link looks when you are staring at it. Active = Links that aren't broken Visited = The links you've clicked before Hover = How it will look when you put your mouse cursor over it. Here is how you code these. Now instead of using "b" now, you use "A:link" So the whole tag will look like: A:link {color:#HEX;font-size:#pt;} Now here's the trick, if you want say, link & active to look the exact same, you don't have to start a new command for active. Simple put a comman after A:link and then add A:active. Like this. A:link, A:active{color:#HEX;font-size:#pt;} If you want them to be different, just simply start a new line for them like this: A:link {color:#HEX;font-size:#pt;} A:active {color:#HEX;font-size:#pt;} Changing Background Colors So yes, you are very tired of the big big white empty, white space on your lookup. We just apply this simple line inside out <style> tags. Here is what it looks like: body {background: #HEX;} It is really easy to remember this from the keyword "body" you can actually comparing it to your own body. What is your body? Body is sort of like a frame that has everything implanted on it. Hands, legs, butt, eyes, etc By applying this "body" command you are saying that you want the body to look a certain way. In this case, we are changing it's color. So it's like painting yourself purple or something alike Changing Table Header Colors What are table headers you ask? Well that's simple. Table headers are the bar of ugliness on your lookups that marks the sections on your userlookup. The ones that says: User Info, Collections, Games and Trophies, etc, you get my point. Yes we CAN indeed mess with those too By using this little tag: .contentModuleHeader, .contentModuleHeaderAlt Adding a font, font size, yada yada, I already explained it right? So we can skip that and I will show you how it looks with that implemented. .contentModuleHeader, .contentModuleHeaderAlt {font:#pt arial; color:#HEX;} We can start to add a bit more here. Let me introduce my friend, align. What does align do? It simply does what its named. It aligns your text into position, whatever position you like. Unfortunately you can't set how far left or right it goes. But simply left, right, center. It will now look like this: .contentModuleHeader, .contentModuleHeaderAlt {font:#pt arial; color:#HEX; align:left;} Now we add a background color to it by simply adding "background: #HEX" .contentModuleHeader, .contentModuleHeaderAlt {font:#pt arial; color:#HEX; align:left; background: #HEX;} Still want to add more? No problem! Here we can introduce "text-transform". What it does is if your text is lowercase like this by default, you can make it into UPPERCASE, LIKE THIS, by default as well, and all you add is: text-transform: uppercase; Looking like this: .contentModuleHeader, .contentModuleHeaderAlt {font:#pt arial; color:#HEX; align:left; background: #HEX; text-transform: uppercase;} If you don't want change, it's not a necessity to add text transform in there. STILL not satisfied? Here is another thing for you. Letter spacing! Yes, it pretty much creates a unit of gap between each letter of a word. So this, would turn into t h i s, or, t h i s. How ever far apart you like. All you do is add: letter-spacing:0.2em; {Sidenote, 0.2 is just the unit I used for my spacing. You have to mess around to find the number spacing you would like} The whole complete product should be like this: .contentModuleHeader, .contentModuleHeaderAlt {font:#pt arial; color:#HEX; align:left; background: #HEX; text-transform: uppercase; letter-spacing:0.2em;} Removing certain tables on your lookup Yup. If you don't want your neohome to show on your lookup, you can actually remove that! Same as any other section, like your shop and gallery, etc. Lemme introduce some new "name tags". #usershop, #userneohome, #userneopets, #header, #footer, hr, #usertrophies. These should be self explanatory right? So for example, you really want to remove your darn neohome, you use this simple command. #userneohome {display:none;} This is telling your nehome to "gtfo of my lookup" Once again if you want more than one thing removed, just separate them with a comma. Example of neohome and neopets removed. #userneohome, #userneopets {display:none;} By the way, maybe I should explain #footer and # header. #footer is the bottom of a neopets layout that has the rotation image of your theme, and the about us, privacy policy, contact us, link crap. #header is the opposite of the footer, which is the top that display the primary links of navigation around neopets {pet central, games, shops, etc.} Hints & Tips If you want to learn more, just simple go to a site that gives premade layouts, and simply break down their CSS into components. This is an efficient source of learning, but that doesn't mean to just copy and paste the code. You have to explore the different tags and commands they have, as I probably haven't listed many others here. There are A LOT of things you can do with CSS. Just play around with values and what not, and make sure every time you use a command or whatever you like to call it, that you know what it does. Don't blindly insert CSS. Trust me, when you screw up your whole user lookup, you will wish you knew what you did wrong. Credits I made and wrote this guide all by myself, while looking at my own CSS code on my look up and breaking down into components and explaining. I did not take any part of this guide anywhere else other than my brain. I do hope this guide won't be redistributed, or at least not without proper credit. It took about an hour or so to write up and colorize. Conclusion Well I hope this guide helped you get started. It is indeed very messy, and I do apologize for that, but for sure I will come back and fix it, revise, add new things. {Halloween sidebar time is coming near and I am getting distracted} I guess this is my little treat, to all of you :yup:
I suck at html and stuff like that. But its obvious the kind of effort u have put in to make this guide REPPED (do include more pictures mooie, makes it more appealing for sure :])
i remember the good old days where you could just use simple html to basically reedit almost ANYTHING on neopets, but all the fun got sucked out of that when they went nazi on their editing policies..
Nice guide. I remember writing up part of a guide when the new layout came out, but then lost interest in it and well...it now lies dead on my computer. You're welcome to it if you'd like. Just send me a PM.
Excellent guide Mooie. I haven't done anything at all to my new acct. I will use this when I get a round tuit +rep for the effort
Excellent guide! What Ive always wanted to know how to do is break apart the sections, so they aren't all grouped together... Let me try to explain... Like each section is separate and movable on the page. If seen it done but I have no idea how. Or is that HTML that allows you to do this? so, Like this (with cool images in the blank spaces) 1-stats 2-shop 3-collections 4-pets 5-trophies. ---[1] -----[2] ---[3] -[4] ---[5] (dashes are for spacing... my first post they were all in a straight line) pls tell me if this doesnt make sense, Ill try to explain it another way, or find a lookup for example