Quantcast

Jump to content


Foxer

Member Since 08 Oct 2011
Offline Feb 24 2014 01:43 AM

Topics I've Started

[Tutorial] Pixelart Emoticon Set

07 August 2012 - 07:07 PM

[redacted]

Creative Contests: A Guide

07 August 2012 - 07:05 PM

I have previously posted this work elsewhere - it is not plagerised.


Forgive me if this is useless, but I haven’t seen much of this sort of thing around here, so I thought I’d chip in. *bleats like a newbie*

In this guide, I’m going to assume you have no knowledge of Neopian creative contests. Do excuse me if some of this is facepalmingly simple for you, but you never know what newbie might find it useful, no? So, Neopets has four main creative contests as well as a newspaper, which isn’t really a contest. They are; Storytelling, Poetry Gallery, Art Gallery, Caption Contest and the Neopian Times. I’ll be outlining the process, as well as prizes and tips for each of these.


Yes, there are other creative contests, such as the Beauty Contest, but these are the ones I know the most about, and detailing every single artistic and literary actiivity on Neopets would take too long. xDDD


Storytelling

The Storytelling contest is one of the harder ones to get into, and I’ll be honest, if you’re not a decent writer, you haven’t much hope of winning. The contest has a simple structure, beginning with either a Storyteller, or user-written beginning, which is posted around noon NST on Monday. Would-be participants are then able to submit the next section of the story, and a winner is selected at around 4pm NST. The contest continues in this manner for the following four days, until the final entry at 4pm on Friday which will conclude that week’s story.

Things to note:
  • It is best to have your entries submitted before 11am for the first time slot, and 3pm NST for the second.
  • The time of each Storytelling update can vary sometimes, depending on the number of submissions the Storyteller recieves.
  • You can enter as many times as you like for every time slot, but you can only win twice in any given week.
  • Sometimes there will be special contests, either a two-week one, or a special kind of story, like written backwards or with shape poems incorporated.
  • Storytelling isn't easy to get into, so don't feel discouraged if you don't make it in very often. Just keep submitting entries and eventually you'll hit home.
If you’re keen on entering, wonderful, but remember that, in order for your entry to be selected, you will need to follow proper literary processes. For instance, an entry that progresses the story too quickly or too slowly is not going to be chosen. Likewise, one that portrays the characters in a strikingly different way to previous entries isn’t likely going to make it in. The previous entry will have left you with some plot hooks to develop, and you must also leave plot hooks for the next winner to take a hold of. If you introduce too many characters you’ll only shoot yourself in the foot as well. Basically, ask yourself if it makes sense, if it’s consistant, and if it’s interesting. If you’ve got all those three, you have a chance of winning.


There is no avatar for Storytelling, but there is a trophy, and every 100thSotrytelling gives our a special prize, The Storyteller collectable card, which is worth quite a bit of moolah. You'll also get 2,000 NP and a random item from the Creative Contest Prize Pool. More on that later.



Poetry Gallery

The Poetry Gallery is actually the easiest to get into as long as you’ve got the skill. There isn’t much competition, and the poetry judge has the liberty of expanding the gallery to include more poems, so it’s very rare for a good poem not to make it in.

Things to note:
  • A poem does not necessarily need to rhyme in order to constitute a poem. But neither does a string of random lines constitute one. Be careful to take your poetry seriously.
  • The Poetry Gallery has two types, theme days and non-theme days. Theme days are Neopian holidays (pet days, Easter, etc.) with poems related to that theme. Non-theme days involve a mixture of different poems.
  • When aiming for a particular gallery, give the judge five days minimum to review your work. It doesn't normally take that long, but it is courteous to do so. If you really want to push it, you might get in when submitting the day before.
  • You will recieve a Neomail informing you of the status of your submission. Being "held over" means you'll almost certainly be in some gallery or other. Do note, however, that poems for non-theme galleries can take months to be published.
  • Keep your lines within 50 characters so they don't stretch the limit of the poetry gallery's table.
As with Storytelling, there is no avatar. There is a trophy, 1,000 NP and a random item from the Creative Contests Prize Pool for getting a poem published. If you are serious about entering the Poetry Gallery, I would suggest reading up on different styles of verse and messing around with a few lines, then try to pick a theme that inspires you. Don't force poetry, or it will be rubbish.

Art Gallery



The Art Gallery is probably the hardest to get into simply because it seems to be totally random. The art judge picks artwork that appears to have been made with effort, and not necessarily the most aesthetically pleasing, though the two often do go hand-in-hand.


Things to note:
  • You will not get an acceptance Neomail, nor even be informed if your artwork is selected to appear in a gallery. You'll just have to keep an eye on the page each time there's an update.
  • As with the Poetry Gallery, there are theme and non-theme days. You have a higher chance of winning if you aim for a themed gallery.
  • Your artwork must be recognizable as having soley Neopian content.
Art is a talent as much as a skill. You can have all the raw talent you could ever want, but if you don't hone it with practise, you'll be no better off than someone without any talent. Similarly, if you have absolutely no talent, you can only learn so much. Get yourself some art tutorials, pick a medium to use (traditional, digital, etc.) and see what you can come up with. Digital art is my personal medium, and I have the blessing of a tablet and Photoshop. If you wish to learn art skills but aren't so fortunate, try using GIMP. It's free and has many of the same features as Photoshop.

Oh and you'll get 10,000 NP as well as a trophy and a rare item from that prize pool I keep mentioning.

Caption Contest


If you're unsure how this works, it's basically a contest of wit. Or popularity. TNT will post an image on the contest page, and clever Neopians will submit funny captions that make a joke of the scene in the image. The concept is simple enough, but the execution is rather difficult.


Things to note:
  • The contest lasts for one week, but the entry period only lasts two or three days, after which comes the voting stage.
  • Your success (or failure) is determined by the Neopian population. This means that, if you're popular or a good begger, you can score more votes than someone whose wit is sharper than yours. Go figure.
  • The caption judge selects only a few entries to progress to the voting stage, and those at least are based on wit.
If you're keen on entering, you'll first need to make sure you can come up with something unique and clever based on the image you see. If the spark simply isn't there, it isn't really worth your time trying to force it. If you do get through to the voting stage, you'll need to spend some time on the Neoboards asking for votes. If you're a nice person, you'll at least try to do this with some subtelty and tact. xD

If you end up winning, you'll get between 5-10,000 NP, a trophy and a rare item. The Caption Contest draws its prizes from the same pool as the Poetry Gallery, Art Gallery and Storytelling. There is also an avatar for winning a 100th Caption Contest, though this is very difficult to get, as you can imagine many people will be vying for it.

Creative Contests Prize Pool


Before I progress to the last section of this guide based around the Neopian Times, you've seen me mention this prize pool a few times, and you're probably wondering what it is. All it is is a list of items that you can win from any of the four competitions I've outlined above. Which item you get is totally random, and you can get anything from a codestone to high-end Paint Brushes like Faerie, Pirate and Plushie. There are also Petpet Paint Brushes and Petpets to be won, as well as a few misc. items. On the whole, though, you have about a 40% chance of getting a Paint Brush. (I once compiled statistics on the frequency of wins from this prize pool.)


The Neopian Times


This is the largest section, as the Neopian Times has a lot of sub-sections, regulations and tidbits. I can't possibly tell you everything in such a short amount of time, but I'll give you enough to get you started. The Neopian Times is for writers and comic artists, as well as playing host to editorial questions. There are articles (non-fiction, informative), short stories, series and comics. A new Neopian Times is released every week on a Friday.


Things to note:
  • The Times is compiled by one person, Droplet (Darcy) who works incredibly hard for very little recognition. She gets somewhere in the region of 2,000 submissions every week.
  • When submitting to the NT, you will usually have a wait of three weeks before you hear back about your work, but it could take up to two months.
  • You will be informed if you've been accepted (going to be published in the nest NT), held over (going to be published in a future issue) or rejected. If you are rejected, there will normally be a reason which will allow you to amend your submission and try again.
  • There are lots of little tidbits that aren't allowed in the NT, including technology that isn't from Virtupets, violence, cussing, death, politics, religion, ect. Ask other NT writers if you're unsure of the legality of your submission.
  • Collaborations between two people are allowed, but no more than two.
  • There are special issues of the NT, but not for pet days, only for Neopian holidays. Droplet will only let a special issue go forward if there are enough themed entries.
As I said, the NT is a bit of a tricky one to define. A good article will be origional, informative and comprehensive. A good short story will, like all prose, have a plotline and a conflict of some kind. A good comic will be clever and witty. You'll need to find more in-depth guides about the section of the NT you're interested in.

For those wanting to aim for special issues, check the Neopian calendar for the following days: Sloth, Jhudora Day, Valentines Day, Illusen Day, April Fools (uinofficial), Easter Issue, Grey Day, Fyora Day, Petpet Appreciation Day, Issue ### (50th), Usukicon, Mutant Day, Halloween, Neopets' Birthday and Christmas. Not all of these have a themed layout and prizes.

There are two NT avatars; the NT Star, which is awarded when you view your user lookup with 10 NT publications, and the Times Writer, which you get when you're published in a 50th issue of the NT. There are not NP or item rewards unless you're published in a special issue (Jhudora, Easter, Grey, etc.) but there is a spiffy trophy. People who write or draw for the NT are normally dedicated craftsmen and women who're doing it for the fun rather than the glory, since there are relatively few rewards for being published. It would be best if you approached the Times with a similar attitude.

So, What Now?


Basically ... go get pretty trophies, Paint Brushes and have a heck of a lot of fun. ^_^ The Creative Contests and the NT are much-loved by the regulars, but new blood is always welcomed. You can find various communities dedicated to these pursuits all over the internet. There's plenty of motivational rewards to be had, so get going, youngin'!

Food Club Betting Guide

07 August 2012 - 07:04 PM

I have previously posted this work elsewhere on DZ and CK - it is not plagiarised.


Food Club Betting Guide


☠ Introduction ☠

Welcome to Foxer's guide to making Food Club bets. There are a couple of things you should take note of before proceeding; I am not an expert. I have not won the Food Club trophy and this is not a guide to getting that trophy, it is extremely difficult to get even for veteran betters. This guide is completely legit and I hope to teach you how to make your own bets to make lots of Neopoints at this game. Food Club can be extremely lucrative for very little effort if you play it right, but at the end of the day it is still a game of chance, and even if you place perfect bets, there is no guarantee you'll win.

☠ The Basics ☠

Food Club is not a club. In fact it is a game of chance in which you place bets on the eating power of some scurvy pirates. Yes, it's an eating contest. There are five arenas with four pirates competing in each once per day. The aim of the game is for you to place up to 10 bets on the pirates you think are going to win in each arena with the catch being that you will only win as many Neopoints as the odds will allow. If you bid on a pirate with 2:2 odds, you will only win twice what you have bet. That is where the tricky part begins, but we'll get to that later. For now I'll introduce you to the game structure.

Every day at 2pm NST a game of Food Club will run. Betting for that game will close roughly half an hour before the game begins, and the game itself can last between half an hour to an hour. The moment one game ends, betting for the next game begins. You can place a total of 10 bets comprising any combination of arenas and pirates you want. The combination of pirates in each arena will be randomly generated at the conclusion of the previous game. The odds for each pirate will also be calculated based on a combination of their skill at food consumption and the combination of pirates they will compete against. Be warned, the odds can change between the conclusion of the previous game and the close of betting for the current one. The best thing you can do is make your bets no more than two or three hours before betting closes.

Your winnings are calculated by multiplying your original bet amount with the odds of all the bets you placed that won. You have placed ten bets with a bet amount of 100 NP for each. Two of your bets won, the first was 8:1, the second was 16:1. So for the first bet you will win 800 NP, and for the second you will win 1600 NP, making for a total of 2400 NP. This is a good win, since your ten bets at 100 NP meant you spent 1000 NP on betting. That means you've made a profit of 1400 NP, good job!

☠ The Arenas & Pirates ☠

As I mentioned before, there are five arenas and 20 pirates. Each arena, then, holds 4 competitors and there will be one winner from each. Each pirate will have odds for how likely it is they'll win. The best odds are 2:1, which means that pirate will have a high chance of winning. The lowest is 13:1, which means it's incredibly unlikely they'll win. However, since Food Club is still a game of chance, there will be times when 2:1 pirates lose and (rarely) 13:1 pirates win.

On the Food Club game page, you will find a list of the competing pirates. This is a handy list to have, as it will help you decide which of the pirates would be a safe bet, which is part of the betting strategy I will explain later on in this guide. Remember that the pirates in each arena will be selected randomly, so sometimes you will get Gooblah and Buck in the same arena, and sometimes you will get Gooblah, Venable, Stuff-a-Roo and Orvinn, in which case it's a fairly safe bet that Gooblah will win. It just depends on the pirate selection and their respective odds.

☠ Placing Your Bets ☠

Go to the Food Club Betting page.

The column on the right will contain a dropdown box showing the competitors for each arena and their odds. You place a bet by clicking the check boxes to include an arena in your bet and selecting a winning pirate from the dropdown menu. You then place your bet amount in the box at the bottom left and the odds and payoff will be calculated automatically. The amount of NPs you can bet depends on the age of your account, so it is better to use older accounts when betting, as you can bet much higher amounts of NP. You can bet a base of 50 NP plus 2 NP for every day your account ages. The betting page will show you how much you can bet.

The total odds are calculated by multiplying the odds for all the winning pirates in arenas you've selected. More about this later.

☠ Betting Strategy ☠

Now we've covered the basics of how the game works and how to get involved, you'll be wanting a good betting strategy to make you lots of Neopoints. Keep in mind that your bets don't affect any other player, and so it is not against the rules to share your bets or even copy others. In fact a lot of kind Neopians post their bets publically each day. The betting process can be complicated, and if you're finding it too hard, it's no trouble to just find someone else's bets to use. I recommend Drusillax.

So the first thing you need to do when deciding on your bets is to look at each of the arenas. Find one that has three average pirates and one good one, as you're going to need multiplier bets. As I mentioned before, the odds for each pirate you bet on in each arena are multiplied. A multiplier bet is a safe filler bet that will bolster the odds and get you more winnings.

So let's say the Shipwreck arena has the following competitors:
Scurvy Dan the Blade - 2:1
Captain Crossblades - 13:1
Sir Edmund Ogletree - 7:1
Ol' Stripey - 6:1

Scurvy clearly has the advantage, and the other three aren't likely to win. That doesn't mean one of them won't create an upset, but the odds are in your favour. Scurvy is going to be one of your multiplier bets. When you bet on pirates in other arenas, if they have anything below 4:1 odds, you can include Scurvy in that particular bet to multiply your existing odds by 2. Anything above 4:1 is high enough that it doesn't really need to be multiplied, but that doesn't mean you can't put him in there if you're confident in him winning his arena. Remember that you only have 10 bets to work with, and you won't be able to cover all your bases, so you need to be quite selective. Sometimes you will want to have multiple multipliers in your bets, and I usually leave one bet reserved for four 2:1 competitors.

So let's say Gooblah is in the Lagoon with three mid-ranking pirates. He will be our second multiplier because he is the strongest and wins the most often. Once we've isolated those multipliers, we're going to need to pick one arena in which the winner is not inevitable and focus on covering that arena. You're never going to be able to pick the winners for all arenas, so it's best to focus on just one or two and make bets on all the competitors in that arena. Using your safe bets to multiply those odds means that, provided your safe bets win, you should always get at least one or two bets paying off.

Let's say Hidden Cove is our main focus for this round of betting. The competitors stand like so:
Buck Cutlass - 3:1
Squire Venable - 10:1
Federismo Corvallio - 3:1
Lucky McKyriggan - 2:1

Venable probably isn't going to win, but his odds are high and it's worth making bets on all of them. So with our two multipliers, our first few bets might look like this:
Scurvy Dan the Blade - 2:1
Gooblah the Grarrl - 2:1
Buck Cutlass/Squire Venable/Federismo/ Lucky - 3:1/10:1/3:1/2:1
Total odds - 12:1/40:1/12:1/8:1

12:1 isn't a bad show, but if you wanted to you could always include another multiplier. 40:1 is amazing, but remember that the more players you include in your bet, the less likely it is to win. You could always remove one or even both of the multiplier bets. Finally, 8:1 is, again, okay, but it could do with another multiplier.

Sometimes you might want to switch out certain multipliers for certain bets. If you want to use one pirate as a multiplier but you're uncertain of his winning, you can make two bets, one using him and the other using a more reliable multiplier. You might also want to make filler bets to stand alone. Once you've made bets on all four players in an arena with multipliers to bolster your odds, you can make a single bet with just your multipliers, Scurvy and Gooblah. The odds will only be 4:1, but remember that you have already made 4 bets using them. If they both win, you win 5/10 of the bets instead of 4/10.

Since you have 10 bets, you can also partially cover another arena if you would like. I also sometimes like to make one or two wide catch bets on some of the lower chance pirates simply because Food Club is a game of chance, and sometimes a pirate with 13:1 odds will actually win against Gooblah. If you bet on that pirate, you don't need any multipliers to make yourself rich.

Your betting method and structure will largely depend on how the odds fall on any given day, as well as how risky you want to play it. Sometimes you will lose NP to this game. There will be days where the odds are not in your favour and it isn't a good idea to place bets, or the game decides to throw a spanner in the works and one of your multipliers loses to Stuff-a-Roo. It's okay, though, because in the long run you can make a lot of money from this. Keep an eye on the results for each arena each day. As you progress each day, keep note of who has won and who hasn't won for a while. If Gooblah has won his last ten competitions usually the game will let him lose one. If one of the 13:1 pirates hasn't had a win in a few weeks it might be that it's time for him to have his day. The game might be random, but there are always patterns for those willing to look for them.

Here is a general outline of the contents of each bet. Adapt it to the odds and your preferences.

Bet One: 2-4 multipliers
Bet Two: 1-2 multipliers and focus arena 1
Bet Three: 1-2 multipliers and focus arena 2
Bet Four: 1-2 multipliers and focus arena 3
Bet Five: Focus arena 4 (lowest odds does not need a multiplier)
Bet Six: 1-2 multipliers (the ones you're most sure of)
Bet Seven: Alternate arena 1 (low odds) and possibly 1-2 multipliers
Bet Eight: 1-2 multipliers and alternate arena 2 (highest odds)
Bet Nine: 1-2 multipleirs and alternate arena 3
Bet Ten: Round up any loose ends.

☠ Conclusion ☠

Food Club seems confusing at first, and in some ways it is. On the face of it the betting is simple, but there are many ways to make your bets and no way is the right way. As you experiment, you will lose some Neopoints until you find what works best for you. Mine is just one of many methods that you can adapt to suit your own betting style. And hey, if you don't want to or you're just too lazy, go use a betting guide. I won't judge.

Thanks for reading and I hope it was helpful. Please post any comments, suggestions, questions, etc.



~Foxer~


CSS for Neopets

07 August 2012 - 06:59 PM

I have previously posted this work elsewhere on DZ, CK and the NTWF - it is not plagiarised.


When I first found out that I could give my Neopet a homepage, I was rather happy (and 10 years old with no computer knowledge except how to navigate around), so I rushed to make one. I saw the box that told me to "specify how your page will look" and, me being the logical person I am, wrote this:

"A BLUE BOX WITH A BIG WHITE TITLE IN FANCY LETTERS PLEASE!"

Don't judge, 'kay? xDDD

About an hour later I figured out that I needed to learn HTML. So I did. Years later I figured out that CSS was a great tool and not as complicated as it looked, so I taught myself to use it to the fullest. Unfortunately, there weren't many good and fluid tutorials out there that made it easy to understand, so I taught myself through observation. I saw something I liked and then I'd scour the source code to see how it was done.

This method of learning, while great for me, leaves me with rather large holes in my working knowledge of CSS. When I played Neopets, my pagebuilding was mostly trial and error, but it did give me enough to know the basics, which is what I'm aiming to show you.

Basically, this long intro is to tell you that my own learning was selective, but that this tutorial should give you enough knowledge to build on yourself. Read other tutorials or find guides on specific features, or do what I did and just play around until you get the desired effect. ^^


Syntax


I'm sorry, but this will be the most complicated part of the tutorial. It does, unfortunately, have to come first, as a good understanding of how CSS actually works is essential to using it effectively. So, CSS stands for Cascading Style Sheets. It's what is known as a scripting language, one which tells your browser exactly how a page should appear on your screen, but on it's own, CSS does nothing more than sit there. Compare a page to the human body. CSS would be the bones and sinews, the things that give us shape and form and dictate how we move, but it's the muscle and skin that make up the rest of our body, and they come in the form of HTML.

For this tutorial, I'm going to assume you know the basics of HTML. If you don't, this clever little tutorial will give you more than enough to get by with. If you are just setting out and unsure about all of this, you might want to stop reading this tutorial and start reading that one, or any other HTML tutorial you can find. Neopets also has a descent HTML guide that you can use for the bare bones of it.

Okay, so let's crack on with it. The first thing to note is that any lines of CSS must always be located between two style tags. In the same way that bolded text must be between two <b> and </b> tags, so CSS needs it's boundaries marked out. You should always make sure to only have one set of style tags and to keep them at the very top of your page for organization's sake.
<style>
Your CSS here
</style>
Now, CSS works by naming an element and then specifying how it will look. Element names will sometimes be pre-existing ones like 'body' or 'a', and others will be unique names that you've chosen yourself. I'll deal with the different names later on. Once you've named an element, you can then state a property and assign a value to it. Don't worry, I'll explain.

A property is basically anything that CSS allows you to manipulate. For example, the background-color property allows you to specify a background colour. Duh. xD Properties and values have a specific format that must be observed in order for them to function properly. The correct type of brackets and colons need to be used. This is what it should look like.
elementname {property:value;}
You can add as many properties as you like to the chosen element as long as you keep them within your { and } brackets. Notice how the colons are positioned? This pattern must be repeated for every property within your CSS. As for the value, well that depends entirely on the property you've specified. If you specify a font property, your value will be the name of a font. If you specify a colour property, your value will be some sort of colour name. Likewise, a 'width' property will have a numerical value.
<style>
objectname {background-color:lightblue;
font:verdana;
color:#ffffff
width:300px;}
</style>
There are two types of colours named here. The first is the text name 'lightblue', the second is a hexadecimal colour code (hex code). #ffffff is the hex code for the colour white. Most of you will be familiar with these colour codes. It's also worth noting that CSS uses American English spelling, but I use British English because I'm from New Zealand. It's just habit, I guess. Sorry if it gets confusing.

Anyway, that's pretty much the basics of CSS syntax. There are numerous rules regarding names, order and other things I probably don't even know about, but this is enough to get you by on Neopets at least. If you've understood this, than congratulations, the rest of the tutorial will be a breeze for you!

Summary:
  • All CSS must be contained at the top of your page between <style> and </style> tags.
  • CSS works by naming an element and then assigning it property and value pairs.
  • A property is just a name for a feature of an element such as the background of a table.
  • All property/value pairs for any given name must reside between { and } brackets.
  • All values must begin with a : and end with a ;.
  • CSS uses American English.

Body, ID & Class


Okay, so this one is less complex than the syntax, but you've still got to pay attention. Remember how I talked about everything having a name? You do remember, right? Right? xD Okay, well there are three types of names. Body, ID and Class. We'll deal with the latter two first.

ID and class names are ones you specify yourself. The difference between them is really quite simple. ID names are one-use objects, and class names correspond to objects you will use multiple times on a page. The difference within your style tags is simply that an ID name is preceded by a #, and a class name is preceded by a . (period). The name you choose for either of these must be unique from any other name, but it can be anything you want. For the purposes of this tutorial, I'm going to call my element 'robot' because it's fun.

Now, in the next part of the tutorial I'll explain all about the different types of elements, but for now we'll deal with what is known as a DIV. This is basically a box created by you that sits on your page. Here's how the difference between an ID and class type DIV would look.

ID:
<style>
#robot {background-color:lightblue;
font:verdana;
color:#ffffff
width:300px;}
</style>
Class:
<style>
.robot {background-color:lightblue;
font:verdana;
color:#ffffff
width:300px;}
</style>
As you can see, there's really not much of a difference. But in order for this DIV to show up on your page, you'll need to use HTML. This is also really simple:
<style>
#robot {background-color:lightblue;
font:verdana;
color:#ffffff
width:300px;}
</style>

<div id="robot">CONTENT HERE</div>
Notice the HTML specifies first, that the object is a DIV, second that the object type is an ID (single-use) and then that the object's name is 'robot'. If you wanted to use this particular type of DIV more than once, your HTML would only chance slightly:
<style>
.robot {background-color:lightblue;
font:verdana;
color:#ffffff
width:300px;}
</style>

<div class="robot">CONTENT HERE</div>
That's really the only difference between ID and class. So let's move on to the first type of name. Body elements are things which already exist on your page with their own preset properties and values. Since they already exist, they already have a name, and thus they're just as easy to manipulate. Unlike ID and class, these don't need a . or #.

One type of body element is actually 'body' itself. This name, when used in your CSS will apply specified properties to your entire page. For example, if I used the background-color:lightblue; property and value combo, it would apply a light blue background to my whole page. Other named elements with different coloured backgrounds would still appear as such.

Other types include 'a', which corresponds to the links on your page. Within that, there are also four types of links, each one able to be manipulated with CSS. You know how the default links on a page are always blue and underlined? Well that's because the base link properties say that this should be so. You can easily change this.
<style>
a {
color:red;
text-decoration:none;}
</style>
Now, whenever you use any <a href> or <a name> tag in your HTML, it will show up as a red link with no underline. You can also change the way your links appear when you mouse over them by naming 'a:hover' and setting properties. There is also a:visited and a:active, both of which are rather self-explanatory and useless. a:active only shows up for a quick second when the link is clicked. These four types of link names need to be placed in the correct order on your style sheet for them to work:
<style>
a {
color:blue;
text-decoration:none;}
a:visited {
text-decoration:none;}
a:active {
text-decoration:none;}
a:hover {
color:red;
text-decoration:none;}
</style>
Other types of body names include 'table', 'h' and 'textarea', all of which I'll deal with later. I know it's getting a little confusing, but it's probably just because I'm bad at explaining. xD Sorry!

Summary:
  • Body elements: body, a, table, h ... all of which correspond to similarly named HTML tags such as <body>, <a href>, <table> and suchforth.
  • ID: single-use element created and named by you. Represented by a period (.).
  • Class: multiple-use element created and named by you. Represented by a hash (#).
  • ID and class aren't required for body elements.

DIVs, Tables, Headers, etc.


This is the last of the technical parts and hopefully it'll tie everything together. If you're having trouble understanding these concepts just keep reading, because this might help clarify things for you. Though feel free to ask questions if it still makes no sense.

So, the first thing you need to do is to think of your page in 3D. The bottom layer is the 'body' object and as you progress down your style sheet, so you progress up your layers. DIVs and tables are the two major content containers on a page, and they sit "above" the bottom layer.

As I mentioned before, a DIV is simply a box that you create in which you can put content. You specify its size, colours, styles and location on your page, use HTML to execute it and then fill it up with content. Same goes for tables except that tables place your content into cells. Both are useful in their own right. DIVs and tables can be subject to an ID or class type, though this isn't always the case, as a table has default settings that can be used as opposed to custom ones. I'm going to work with a table this time.
<style>
table {
width:500px;}

#unicorn {
width:400px;}
</style>

<table><tr><td>1st cell</td>
<td>2nd cell</td></tr></table>

<table id="unicorn"><tr><td>1st cell</td>
<td>2nd cell</td></tr></table>
The first named element was the body object 'table', which targets every <table> tag unless you give your table an id or a class, and therefore give it a unique name, in this case the word 'unicorn'. You can also target specific rows or individual cells within the table by naming them and specifying values.
<style>
table, tr, td {
width:500px;}

#unicorn {
width:400px;}
#unicorn td {
background-color:pink;}
</style>

<table><tr><td>1st cell</td>
<td>2nd cell</td></tr></table>

<table id="unicorn"><tr><td>1st cell</td>
<td>2nd cell</td></tr></table>
Notice there are two changes. The first is naming the table rows and table cells by separating them with a comma. This is an easy way to save space if you want to apply the same properties to multiple elements. The second is the addition of the #unicorn td name. If unicorn is the name of the entire table, than I've just told my browser to target the cells (td) of the table named 'unicorn' and turn any text within those cells pink. Simple, no?

Other things you can do is to specify different types of headers. You do this by naming them 'h1', 'h2', etc. in your style tags, and corresponding them to <h1>HEADER ONE</h1>, etc. in your HTML. Same goes for 'textarea', 'img' (which will target any image on your page unless otherwise specified) and plenty of others. Unless you apply these to an id or class type object, they will be body objects and will thus apply to the entire page unless another id or class property overrides it. Here's an example:
<style>
body {
background:#000000;}

img {
border-width:5px;}

#attack {
width:60px;}
#attack img {
border:none;}
</style>
Notice how the first 'img' element stands alone as it's own tag, but the second is attached to an id element. So in this case, your browser will display all images with a 5px border except images contained within the #attack object, which will display with, you guessed it, no border at all.

Summary:
  • DIVs and tables, etc. can be id or class elements which gives the a unique name and priority over body elements (with no id or class).
  • Any body element (img, a, td, etc.) can be attached to an id or class object to specify unique styles within said element.
  • All CSS names must correspond to an execution tag in HTML.

Properties & Values



I don't really need to say much for this one since I'm usurping someone else's property and value table. Still, it's worth reminding you all that a lot of these properties won't work on Neopets, and some are banned by their filters. Also, some of the descriptions aren't that great, so if you want to find out what some of them do, I would suggest using a Neopets pet page or you could try finding an online testing website. Either way, just play around with things, remember that you can't break anything, and don't be afraid to make a mess of things. xD It's all part of the fun of it!

Summary:
  • Congratulations! You now know basic CSS and you're ready to start experimenting with building your first page!

Design & Aesthetics


Well, that concludes the technical part of this tutorial, but a good knowledge of CSS, while enough to make a page, is certainly not good enough to make a nice page. This part of the tutorial is devoted to making sure your page is user friendly, easy on the eyes and inviting to its visitors. Now, I'm no web developer and I'm not going to go into too much detail because a) I don't know all that much about it and b) you're not being paid to make a stunningly pretty site, and if you were, you wouldn't be reading this. xD I will, however, go over some basics of design which most of you should already be familiar with.

The Golden Ratio

A lot of artists will be familiar with this concept. It's a ratio for balancing visual stimuli which is actually more complicated than I'd like, so I'm going to make it simple. Imagine your page is divided into a 3x3 square board (9 squares total) with the sections of your page occupying these squares. The idea is to make sure that your content is evenly balanced between the three vertical columns and the three horizontal rows, thus making your overall page balanced. It's fairly simple; don't stick all your content on one side of the page.

Colours and Themes

When designing a page, it's good to pick out some colours and features that will match each other nicely. One big mistake I see quite often is a page being totally overwhelmed by too much colour. It is much easier on the eyes if you can pick only a few colours to work with. My personal maximum would be three, but I usually work with only two, and sometimes even just a monochrome page, but with differing tones. Flashing things, colourful sparkles, rainbows and such are a bit too much.

Some Text Mistakes

I'm just going to list them, because there are too many to have them all in individual sections.
  • Contrast: This is a huge one. If you put bright pink text on a bright purple background, no one in their right mind is going to want to read it. Make sure your background and text colours are compatible and easy to read. Black-on-white is the best for this, and I know you think it's boring, but science has shown that, for large amounts of text, this is actually easier to read. Even moreso than white-on-black.
  • Centering: Another huge problem I see is people, in an effort to achieve balance, centering all of their text. It's fine if you want to center headers, poems, images or other special elements, but centering a large body of text makes it much harder to read.
  • Fancy Fonts: They might look cool, but who can actually read them? Use them for headers, but please, I beg you, use a normal font for your main text! Any serif font will do.
  • Font Size: Everyone has a different screen resolution, and a good 40% of the internet (probably more, this is an underestimation) will have some kind of visual impairment. Don't make your text too big or it will look tacky, but don't be fooled by the "small is cool" lie, because 40% of the internet won't be able to read a word you type.
  • Paragraphing: A paragraph should be distinct for those around it by one of two standard methods. Either indenting, double spacing or both. Don't stick them all close together without at least an indent or people will lose their place on your page.
  • Leading: If you want to go look it up, be my guest. It's a typography term that deals with sentence and paragraph spacing. This isn't such a huge problem since most fonts will already have been leaded, but you might want to add your own type of leading to your paragraphs to make them easier to read. I tend to use the property: line-height:120%;
  • Line Width: Have you ever tried to read text that spans your entire screen? It isn't comfortable for large amounts of text. The advice I got from the web designers I know is that any given line should be between 15 to 20 words in length (assuming you're not using some ridiculously sized font).
Planning Your Content

What makes a page really good is if you have an idea of what sort of content you'll be displaying, and the best way to display it aesthetically and efficiently. For instance, if you happen to have a large number of images, displaying smaller thumbnails which are internal links to the larger images is a great idea. Similarly, if you have any data to display, a neatly laid out table would be of use to you. Try to be logical about it, and make sure to look at your page regularly as you develop it to make sure you're keeping things organized.

OVERLOAD!

I've seen this all too often. A page that is so busy, so disorganized, so hard to navigate around that I just give up and go away. I can't be bothered sifting though screeds of information to get to the small portion I'm interested in. I don't want to sit for two minutes while a huge banner image that takes up my whole screen loads slowly, and I certainly don't want to get headaches from the marquees, flashy banners or sparkle things that, while pretty, only serve as clutter. So, when deciding what to have on your page, ask yourself some questions:

1. Is it necessary information?
2. Is it aesthetically pleasing?
3. Will it hinder my viewer in any way?

You don't have to meet all three of these criteria. If something is useful but not so nice looking and you can't make it pretty, than you can still include it. Just try to keep these things to a minimum. The same goes for image-heavy pages, by the way.

Navigation

Every good page that has more than a little content will need to make sure that this content is organized and easily accessible. One way to do this is through the use of internal links and headers. Look at this tutorial, see how it is neatly organized into six major sections, and this particular section is neatly organized into a number of sub-sections, each with it's own header? And notice how I used the first post to link to each subsequent section? Yeah, it's basically that. Set things out neatly and learn to use internal links if you don't already know. They're some of the handiest things you'll ever have.

Formal vs. Informal

This one is really up to you. If you're aiming for informal, you can use any kind of speech you like. If you're aiming for formal, you'll have to make sure not to use words like 'kinda' and also to exclude the use of smileys and/or emotes, as they do disrupt text a little, and not every reader knows what they are or mean. In this tutorial, I've gone for a mix of both which has resulted in a semi-formal way of writing. When I was writing my pet pages, I would make sure to use formal language. That is just my personal preference, however, I would advise against the use of any form of chatspeak and overuse of emotes unless there's a reason for it.

Summary:
  • Keep things simple, to the point and organized.
  • Make sure your colours and layout contrast nicely with each other.
  • Keep your text easy to read.
  • Use internal navigation where possible.
  • No chatspeak or emote overuse.
  • Have a plan, know your content and KISS! (Keep It Simple Stupid!)

Tips and Tricks


Userlookup Element Names

First, here's a code to clear the header, footer, sidebar, etc. from your lookup.
#header, #footer, .footer, #ban, .navigation {display: none;}
Once you've done that, you'll need to know how the userlookup works. So, if you look at a default UL (and if your resolution is large enough) you'll see the grey background, then the white background with the header and all the content. The grey background is your body background, the white is called #main. After that we have several sets of layered content, called .contentModule, .contentModuleTable, and .contentModuleContent. The first refers to the overall content area, let's say it's the collections module. The second refers to the table that holds the content in place. This is the one you want to modify if you want content within a module moved. The third is simple, it's the collections display. Changes made to this one are limited, but colour, image and link changes work.

The headers for the modules also have unique names; .contentModuleHeader, .contentModuleHeaderAlt. The first refers to the black headers, the second to the blue header above Userinfo. If you want uniform headers, be sure to include both in your CSS. ^^

And lastly, we have the individual names for each module. They're fairly simple; #userinfo, #usercollections, #usershop, #userneopets, #userneohome, #usertrophies, #habitarium, #ncmall. Using these on their own, however, is not enough to edit a module. Likewise, using .contentModuleTable on its own will make modifications to all of your content modules. Specifying which one with the names above is necessary, like this.
#userneopets .contentModuleTable {property:value; etc.}
You can also use this combination to edit specific content of an individual module.
#userneopets img {property:value; etc.}
Userlookups are tricky things to get right, and if you want to make one from scratch without prior knowledge, you will probably find it really fiddly to begin with. Stick with it, as it's well worth learning, and don't be afraid to mess with things, change values, swap things around and generally experiment until you get something you want. As long as you save your code in a document before meddling with it, you'll find you learn a lot. I don't know a lot about making UL, so if there is any incorrect or missing information, please do let me know.

Pet Page Tricks

Get rid of that horrible greeny-yellow background to either side of the Neopets banner? Easy. (Note: this code will render every table's background transparent)
table {background:transparent;}
Page Switching

This is a clever little trick I picked up a while ago. It involves using multiple DIV layers to make a small area able to display multiple "pages" of content (one at a time) without navigating away from the page you're on. You can see it in use here.

As I said, it works by using multiple DIV layers. The bottom layer is the base. You must set certain properties: overflow:hidden; and you must also be sure to set a height and width. The second layer is the content layer that contains multiple DIVs. Set each of these DIV heights to the same width and height as the bottom layer and make sure you have a header at the top of each of these content DIVs that can be linked to. Add as many of these DIVs as you like. Make sure you have a separate place for your navigation menu and set internal links to the headers within each content DIV.

Pure CSS Button Links

You can easily make links that look (and act) like buttons with only CSS. All you need to do is set a background and border colours and then invert them for a:hover.
a {
background:blue;
color:white;
padding:3px;
border-top:2px solid lightblue;
border-left:2px solid lightblue;
border-right:2px solid darkblue;
border-bottom:2px solid darkblue;}

a:hover {
background:blue;
color:white;
padding:3px;
border-top:2px solid darkblue;
border-left:2px solid darkblue;
border-right:2px solid lightblue;
border-bottom:2px solid lightblue;}
Try it yourself with different colours for more realistic looking buttons.

Getting Past the Filters

This is a sneaky little thing I was taught to use when I wanted to use CSS positioning, which just happens to be blocked by the Neopets filters. Positioning requires that you first specify the type of positioning (absolute, relative, fixed, etc.) and then specify a position somehow. Most often it is by using the properties top:???px; left:???px;. These two properties aren't blocked, but without the position:relative/absolute/fixed property, they're useless. So, what you do is place the specific position properties (top, left, right, bottom) in your CSS, and move the actual position property into your HTML.
#pinkfluff {
top:10px;
left:20px;
height:400px;
width:500px;}
</style>

<div id="pinkfluff" style="position:absolute">CONTENT</div>
Neopets Layout Hacks

Here's how to get rid of all the Neopets headers, footers, sidebars and links for any given page.
#header, #footer {
display:none;}
.sidebar{
display:none}
Get rid of those ugly grey lines on your userlookup with this.
.contentModuleTable {
border:none;}

Filter Changes (31st January, 2011)

TNT changed the filters on pet pages and userlookups to match those for shops and galleries. This means that a few commonly used properties can no longer be used. I'll list them here, as well as possible alternatives for you to use. TNT has also implemented a code-cleaning feature that correctly formats your CSS.
  • <style /> and <style type="text/CSS"> will no longer work as a code fix, and are now the cause of a lot of problems. Before messing with your code, try simply removing the extra stuff so it's just <style>.
  • Textures and marquees are no longer usable. There's no way around this except to use regular images.
  • Some coding shortcuts have been removed. I would recommend writing out all your properties in longhand rather than using any shortcuts.
  • Recipient=, subject=, message_body= and target=_blank no longer function. When linking to Neomail, leave it as plain as possible.
  • Opacity codes are gone. A simple fix is to create your own background and set a background image for your object. You will need a program that supports transparency. GIMP is free and easy to use, or you could simply PM me for a transparent background. I'd be happy to help.
  • The shortened form of Neopets links now requires the forward slash to be present. So instead of linking to "~Petname" you would link to "/~Petname".
  • Images are bugging. The cause isn't known, but check your image URL for words that might be banned. Ignore the silly message about image file types unless it actually does apply to you.
  • <u> (underline) is no longer working. You will need to write it into your page as a font style or class.
Feel free to ask questions or make comments, and enjoy. ^_^