Welcome to Behind the Layout, also known as BTL or simply Beetle. Here I hope to provide you with what you need to make your corners of Neopets look exactly how you want them, whether by using one of my premade layouts or following a tutorial to create your own. Everything here is designed for your benefit; please feel free to take it, change it, frankenstein a completely new creation out of it - it's all there to be used!

Beetle is currently under construction; more sections will be added shortly. If there is something you would like me to cover or clarify in any section, or a new section you'd like to see, please let me know!

News and Updates
20th August 2014 19th August 2014 18th August 2014 16th August 2014 13th August 2014 Updates are a tad slow at the moment as I have friends staying for the week. More content should be added this weekend though!

News and updates older than the last week or last five news items (whichever is greater) are cleared.
Rules
... are boring. Go, use the layouts, rip them to shreds and steal the graphic bits - as long as you come out the other side knowing more about coding than when you went in.

Or leave some credit in and help someone else find Beetle for themselves, it's up to you!

N.B. - my rules apply to my graphics and code only. I have occasionally used resources from other people in tutorials; if they say you must credit, then you must credit them.

Requests
You may request You may not request My old site, The Forge, ran userlookup and petpage requests alongside premades. Unfortunately the requests completely took over and swamped it; I spent all my time on individual layouts for requesters and had barely any left to make new content for general visitors. It's something I'm keen to avoid happening again.

That being said, I've created Beetle to be of use to you, so please don't hesitate to send any other requests in! I cannot guarantee completing every one, but I'll certainly give it my best shot. No form; just explain what you want and I'll ask for clarification if I need to.





Welcome to Beetle Tutorials! Here you can find walk throughs showing you how a particular layout was created, reference sections with short snippets of code to grab and go, and tutorials on how certain code or graphics effects can be achieved. Enjoy!

Using This Guide
These tutorials are not designed to teach you CSS and HTML from the very start; head down to the recommended sites section for some pages that will do that. Instead, the guide will hopefully show you how to put together layouts, whether by adding an extra finishing touch or building the layout from the first line of code.

Keep an eye out for the tips boxes. These give some extra explanations about CSS and HTML features it's worth knowing about.
The userlookup tutorials take you through the process of coding a layout from start to finish. You can follow each step and check your progress against mine, or alternatively skip to the end and look at the final code to see how things work. Templates are provided with each tutorial for you to make your own graphics to use with the code.

The graphics tutorials explain the basics of how to make a graphic, showing you a variety of tools and effects you can apply. What graphic you choose to make is entirely up to you!

The coding tutorials are less step by step than the other two, and show a variety of ways to tackle a problem. They also include some discussion of best practice in coding, or work arounds needed on Neopets that wouldn't be used elsewhere.

Beetle's Hall of Fame
Here you can see what amazing layouts have been made using the tutorials in this guide. Have a gander and be inspired!

aimierre's anchored userlookup

Userlookups
Banner Userlookup

Anchored Userlookup

Tiled Userlookup


Custom Shield and Icons

Changing Pet Images and Adding Side account Pets







Banner Userlookup Tutorial
This tutorial will teach you how to make a simple userlookup with your own banner at the top and a space for you to write about yourself below.



You won't need a lot of css / HTML knowledge to follow the tutorial, but the basics will be useful. If there's anything you need clarifying, let me know and I'll add a bit to explain it!

Basic Structure
The userlookup is made up of four sections:
The sections are nested inside each other like this:


The main and content sections are wrappers; they go around the other sections and group them together.





The header uses a banner that is 1000px x 350px. If you want your banner to match my coding perfectly, then use this template (right click and save as to download the png):



Step One: Removing Things

.ad_wrapper_fixed, .adBox, .adBox2, #ban_bottom, #ban, .brand-mamabar, .footOverlay
These remove advert boxes and banners

Combining CSS selectors
You can apply the same code to multiple selectors by putting them on the same line, like I've done above. Make sure that every selector is separated by a comma and a space, and that the last one (hr) doesn't have a comma.
#footer
This removes the footer from the userlookup

#nst, .user
These remove the time and user information from the right hand side of the header

.sf
This removes the event notifications

hr
This removes the thin grey divider between sections of the user trophies


This code hides the bolded text that reads User Lookup: aethelar

The first half hides all bold text and image links on your userlookup. The second half makes sure that the bold text and image links in your content modules and in your about me section are visible.
Step Two: Borders and Backgrounds
Body sets the background to the left and right of the userlookup. The one I'm using is a tiling background from Teacake Backgrounds.

Main sets the background for the middle column that contains all the userlookup information. The content section sits on top of this, so by leaving the background empty we see the white background (#ffffff) from the main section.

The header background is a graphic I've made to use with this userlookup, which has got a border drawn onto it already.


Background colours
If you use a background image, you can give a colour as well (like I've done) but you don't have to. The colour is what people will see while the background is loading.



Progress update:

Step Three: Size and Position
Add the margins, width and height properties to the same block of code (ie #main { ... }) as the last step to keep everything neat and tidy.
The margin-top for the main section makes sure that your userlookup is lined up with the top of the page.

The margin-top for the content section gets rid of the white space left when we deleted the User Lookup: aethelar

A userlookup is 1000px wide by default, so setting the width here is optional. If you wanted a thinner or wider lookup, this is where you would specify that.


Progress update:

Step Four: Navigation

This code moves the navigation links so they sit on the menu section of the header image. If you're using your own image then take care to position these right - not every link is the same width, so every word on your header image has to be the right distance from the next one.




This hides the images of the navigation links, but still allows people to click where the link should be.

#navigation img looks like the multiple selectors we saw earlier, but because it doesn't have a comma it means all img inside #navigation


Finally, this hides the drop down menu. You can leave this in place if you'd rather, but I think the lookup looks nicer without the menus.

ul.dropdown means all ul which are marked with a dropdown class


If you do want to keep the drop down menu, then give it some nice colours!


The !important keyword stops your code being overwritten by other code later on. Here, the neopets code has specified that the links in the dropdown menu should be another colour - I've used !important to make sure that my colours are used instead.


Progress update:

Step Five: Content Modules

Remove the border around each content module.







Change how the headers look. I've gone for something very simple, but you can of course make the header as fancy as you like with bigger text or coloured borders.







Change the colour of the links in the content modules.

Because I've used the same colours as for the dropdown menu, I could just add the #content a selector to the ul.dropdown a block to save space.



Progress update:

Step Six: About Me
The about me section needs very little code. I've given it a margin all around of 20px and set the text to justify (it's centered by default). You could change the text colour, give the section a border and background, whatever you like!




That's the css done! Put the next bit of code outside your style tags.

I've put the About Me title into a div of the same class as the content module headers so that they look the same.


Progress update: Complete!

The Final Code
Anchored Userlookup Tutorial
This tutorial will teach you how to make an anchored multipage userlookup, with each section of the lookup (about me, stats, pets, etc) on a separate 'page'.



You won't need a lot of css / HTML knowledge to follow the tutorial, but the basics will be useful. If there's anything you need clarifying, let me know and I'll add a bit to explain it!

Multipages
Multipage sites can be achieved in a couple of ways, but we'll be using the most common one here. This consists of several pages within a single wrapper. The wrapper is the same size as a single page, and so can only show one of them at a time. To make sure that the user can't use the wrapper to scroll to the next page, we set the overflow option to hidden. This means that the only way to see a page is via the navigation links we set up outside the wrapper.

The code structure to make this work looks this:


The code for all of this will be explained further down, but it's always useful to have an idea of what you're building before you do it!
Userlookup Structure
The userlookup is made up of seven sections:
The sections are nested inside each other like this:


The main div is what provides the image background to the userlookup. We could have put this image on the body section, but that would limit our choice of backgrounds for the rest of the page to a flat colour only. Here, although I've chosen to use a flat colour, it is possible to add a tiling image background to the page.

The content div is our wrapper div, limiting the user to only see one of our pages (either the about me page or the content modules) at a time.

The main div uses an image that is 1200px x 660px, with a square for the content div and userlookup navigation that is 675px x 385px. If you want your layout to match my coding perfectly, then use this template (right click and save as to download the png):

Step One: Removing Things

Classes, IDs and Elements
We've got three types of selectors here - .dot, #hash and plain (like the hr). These represent a class (.dot), an ID (#hash) and an HTML element (plain).

A class is used to apply the same style to a multiple objects. .contentModuleHeader is a class because there are multiple content module headers on the page, and they all need the same styling rules.

An ID is used to identify a single object, such as the #habitarium section of your userlookup. Only one object on the userlookup can use this ID. Because of this, IDs locate specific parts of the page - we'll be using this later on for our userlookup navigation.

An element is a HTML object, such as a table, an image or a divider (hr - horizontal rule). It's usually good practice to avoid applying styles to these, as it applies the style to every object of that type on the page rather than just the ones you specify by adding a class or ID. Unfortunately, we often have no choice when working with Neopets code.
#ban, #header
This removes the header from the userlookup, including the Neopets navigation, time, user information, and event notifications. We'll be creating our own Neopets navigation to replace it later on.

#footer
This removes the footer from the userlookup

hr
This removes the thin grey divider between sections of the user trophies

#habitarium, #ncmall, #userneohome, #usershop
These remove sections of the userlookup we don't want to display. We'll be creating our own links to the neohome, shop and gallery instead.

.contentModuleHeaderAlt, .contentModuleHeader
These remove the headers of each section to make the userlookup look tidier.

.content div a img, .content div b
This hides the bolded text that reads User Lookup: aethelar

.content br
This hides the new lines between the content modules. If we didn't remove it, then our About me section wouldn't line up with the top of the content box.


In the previous block of code, we had to hide all linked images, bold text and new lines to remove a few elements. Here, we make all of these elements visible again in the content modules and the about me section.


This removes the thin grey border between the user stats and the linked images in the User Info content module. In the Neopets code, the border is applied directly to the table element itself rather than by CSS styling, so we need the !important keyword to override it.
Step Two: Positioning the Content
The background to the main div sets up the entire layout - the partially see through background for the content div and the words for the Neopets navigation are already included on this background.

The content div is our wrapper. The width and height are smaller than the content inside it, so the div naturally wants to scroll or stretch to show all the content; by setting overflow: hidden; we stop it from doing this.

To position the content div I've used margin to make it relative to the main div. The float: left; means that the content div lies above the rest of the userlookup and doesn't interact with it. If we didn't have this, then the main div would be pushed down by the margin as well as the content div.




Why not use absolute positioning on the content div?

If we were making this layout completely from scratch, this would be the most sensible option. Unfortunately, we have to navigate the Neopets code - and in particular the fact that everything we type outside the style tags goes into the content div.

The problem comes from the fact that you can't nest absolute positioning - that is, if the content was absolutely positioned, the navigation inside it would not be. This would mean that all of our navigation - both the Neopets navigation and the userlookup navigation - would be inside the wrapper for our multipage, and would vanish off the page every time we viewed a different section. By keeping the content div floated instead, we can keep the absolute positioning until we need it for the navigation and make sure that stays put while the content modules move around inside the content div wrapper.

Shorthand
I've used a shorthand for the margin selector by combining four things onto one line. The long version would be specifiy margin-top: 245px; margin-right: 0; margin-bottom: 0; margin-left: 500px; Shorthands are used a fair amount in CSS; backgrounds, borders, and anything with a top-right-bottom-left set of instructions can be put into a shorthand.
Using 0
Where I've specified the margin for #content, I've used pixels for 245px and 500px. For the 0 I don't need to put anything - 0 is 0, whatever you're measuring in!


Progress update:

Step Three: Userlookup Navigation Part I
This specifies where the navigation will go. We're aiming for the bottom of the content box, just underneath the content modules.

The center tag has been depreciated (is no longer used) because of the way it centers everything inside it, no matter how many levels of code deep. It will still work and is still used in Neopets code, but it's best to use other methods of centering like the text-align: center command here.

This changes the links from being text links to boxes. The display: inline-block acts similar to a float command, which you may have seen used for a similar effect before. The advantage to using this is that the links will obey the text-align: center command set on the userlookup-nav div.


Put this part outside your style tags

Obviously, replace my username and neohome number with your own! You can leave off links for the gallery and neohome if you want, but you mustn't leave out the Stats, Pets, or Trophies - that would be covering or hiding your information, which is against Neopets' rules.

Sending our links to #about or #userinfo is what controls the page change of the multipage section. When the user clicks on the link, the computer is given the command to put the element with the id tag about as close to the top of the page as possible.

It used to be that you'd specify an anchor as a place for a link to jump to on the page by putting a name="about" in your HTML code. This has been replaced by putting id="about" on an existing element, such as a div or title - the anchors will still work, but you should avoiding using them.


Progress update:

Step Four: Userlookup Navigation Part II
Control how the navigation buttons look. The colours used here have been colour picked from the background image to ensure that the buttons match.

Setting line-height to the same height as the button vertically centers the text. This doesn't work if the text goes over two lines (although you could set the line-height to be half the button height for a similar effect), but as we have only one line here it works perfectly.



Change the colours of the button on hover. I've chosen pink as my normal links and yellow as my hover, to echo the pink sky and yellow tent.

Progress update:



Shown hovering over the Stats button to turn it yellow
Step Four: Neopets Navigation
Setting up the Neopets navigation is very similar to the userlookup navigation, except that we want to produce invisible boxes that sit over the words on our background image. We do this by giving each link a height and a width, but not writing anything between the link tags in the HTML section of the code.









Put this part outside your style tags

.phtml and /
Some of the Neopets pages end in .phtml and some don't. The difference has to do with the file structure on the Neopets server - /games/ is the name of a folder, while /myaccount.phtml is the name of a file. Since a folder can't actually display as a webpage, when you go to /games/ you actually see a page called /games/index.phtml. Leaving off the last part is a shorthand.


Progress update:

Nothing to see! The Neopets navigation is invisible - hover over each link and check that it'll take you where expect to go.

Step Five: Content Modules
Set the height of all content modules. The !important keyword overrides heights set for each table individually.

You can choose an arbitrarily large number for the margin bottom. It controls how much space there is between content modules; since content div doesn't scroll, the amount of space doesn't affect anything. You do need some margin though to keep the pages of the multipage separate.


User Info and User Collections share the same section, so they are set to be half the width of the content area. 340 is actually slightly over, but because the right side of the collections module has nothing on it the over hang doesn't matter.



These divs are set to the full width. The overflow allows them to scroll if there's more content than will fit on one screen - vertically for the trophies or about section, horizontally if you have five pets (four will fit without needing to scroll).



This shrinks the user trophies slightly, so that the trophies section does not scroll horizontally.





Remove backgrounds and borders from all content module sections.

Progress update:

Step Six: Finishing Touches
Change the colour of the background. I've used a flat colour, but you could easily use an image background - but I wouldn't recommend one that's too busy, or it will conflict with the main layout image.




Change the colour of the links on the page.

These colours will also affect the userlookup navigation, so you can remove the colour commands from that block of code.



Space out the pet images so they are more vertically centered.






Change the captions of the trophies to not be bold anymore.






Increase the white space around each image and add a black border. This really helps when the images are against a non-white background. Don't be tempted to increase the padding unless you also decrease the size of the trophy images - you'll make the trophy section scroll horizontally.



Put this part outside your style tags

We use the .contentModule class to make the about me section behave the same way as the other content module sections.

Progress update: Complete!

The Final Code


NB - The petpage filters are slightly different to the userlookup filters. In order to post this code, I've had to replace the angled brackets around the style tags with round ones - be sure to change them back in your own code.
Tiled Userlookup Tutorial
I'm using 'tiles' here to refer to each rectangular section of the userlookup rather than to a repeating image or background.

The beauty of a tiled userlookup is that once you've got the hang of how it's put together, you can arrange your tiles in any pattern you like! Perfect for someone with a lot of links to display, as they can easily be incorporated into the rest of the layout.



You won't need a lot of css / HTML knowledge to follow the tutorial, but the basics will be useful. If there's anything you need clarifying, let me know and I'll add a bit to explain it!

Userlookup Structure
Absolute positioning is the most common form of positioning. It allows you to put an element exactly where you want it by specifying the coordinates of its top left corner. Absolute positioning also stops elements interacting with each other or trying to go around each other - you can pile divs on top of divs without a problem.

Relative positioning on the other hand moves an element compared to where it would naturally be - it's a bit like applying a margin to push something over a bit.
There's actually very little structure to this userlookup; every tile is absolutely positioned to put it in the right place. The only bit of structure comes from the fact the main div, which all of the tiles are inside, is set to position: relative. This means that the absolute positioning of the tiles will position them inside the main div; a position of top: 0; left: 0 will put a tile in the top left corner of the main div, not the top left corner of the screen.



Outside the blue div, absolute positioning moves the red div to the top left corner of the screen (shown in black). Inside the relatively positioned blue div, absolute positioning moves the red div to the top left corner of the blue div instead.


Given that everything is absolutely positioned, the key thing to this sort of layout is getting the dimensions right. If your tiles are the wrong size, then things won't fit together properly or you won't have even spacing between them; if you haven't planned the sizes out before you start coding, you could find yourself doing a lot of tweaking until things line up.

There's no template to use - each tile is made by pure css, no graphics - but I've listed the dimensions of my layout below so that you can see where the positioning numbers come from later on.



The three small buttons can be anything you want! I've chosen Shop, Gallery and Neohome for mine. There's 10 px of space between every tile and the next; remember to take that into account when calculating position coordinates.

Step One: Removing Things

#ban, #header
This removes the header from the userlookup, including the Neopets navigation, time, user information, event notifications, and any adverts that would usually display in the header. We'll be creating our own Neopets navigation to replace it later on.

You may notice that we're not removing any adverts here, unlike in some other layouts. This is because all the adverts are in the header and the footer; by removing those two, we've already dealt with the ads.
#footer
This removes the footer from the userlookup

hr
This removes the thin grey divider between sections of the user trophies

#habitarium, #ncmall, #userneohome, #usershop
These remove sections of the userlookup we don't want to display. We'll be creating our own links to the neohome, shop and gallery instead.

.contentModuleHeaderAlt, .contentModuleHeader
These remove the headers of each section to make the userlookup look tidier.

.content a img, .content b
This hides the bolded text that reads User Lookup: aethelar


In the previous block of code, we had to hide all linked images and bold text. Here, we make all of these elements visible again in the content modules - we'll have to remember to mark the about me section as a content module when we create it so that the bold text and linked images will also display in that.


Remove borders and backgrounds from everything, giving us a completely blank userlookup to play with.
Step Two: Positioning the Content Modules
Set the main div to relative positioning so that the content modules are positioned with respect to it's top left corner. The height and width are applied to make sure that the margin extends around all edges of the content; if we left those off, the page would scroll until the lower and right edges were just included but not give any extra space.




Set all content modules to have absolute positioning. The white background is temporary, so that we can see where we're placing them - we'll make it look better later on.





Give each content module height, width and position coordinates. The !important keyword is used on every height as Neopets likes to set the height inline; we need to set !important to override this.

Inline Styles
Inline styles are written in the HTML rather than in a separate CSS block. For example:

(div style="height: 80px; width: 80px;") (/div)

Inline styles can do anything you like to that particular element, but you can't use multiple selectors - such as div a to select links inside the div - or target states, such as a:hover to change how a link looks on hover.

They are useful for making very minor changes specific to a particular element; I change the height of all the textareas in this tutorial by inline styles. I could create many different classes for textarea-short, textarea-a-bit-less-short etc, but it would be a messier solution.

What you shouldn't do is use inline styles for basic layout building - much neater and easier to edit if the main styles are grouped together between style tags.


Progress update:

Step Three: Adding Other Tiles
Set the new sections to be absolutely positioned with a white background as before. To be neat, you could add the new selectors onto the previous block of code.




Position the navigation tile and the about me tile.

If you have a lot of links to display, then you could split off the top section of the about me tile into a set of three or four smaller link tiles. Unfortunately 405px doesn't exactly divide into three tiles, but you could use something like wide - narrow - wide with widths of 145 - 95 - 145.






Since the three link tiles are all the same size, create a class to apply styles on them as a group. They're all at the same vertical position in the layout as well, so we can set that here to save time - although technically it isn't good coding practice to put positioning on a class like this.



Set the position of each individual link tile.










Put this part outside your style tags

Set up the navigation and the links. We'll style them later; for now they'll just be text links.

I've not put any new lines (br) between each link, despite the fact that I want them to appear on separate lines. I'll achieve this by setting them to display: block later, so I don't need to worry about it now.







Add the link tiles. Remember to change my username and neohome number for yours! We've used link elements (a) here and added width, height and position to them directly - we could use a div with a link inside, but this is neater and saves characters.





Lastly, add the about me tile. Remember to give it the contentModule class so that the bold text and linked images inside it will show up.

Progress update:

Step Four: Backgrounds and Colours
Set a full body background. The one I'm using is from That Kills Me Backgrounds. If you chose to use a different one, make sure the pattern isn't too busy; that'll make the text difficult to read.




Go back to where you set a white background on all the tiles and update it to a semi-transparent one. Again, I got this 30% opacity white background from That Kills Me Backgrounds.

You used to be able to set opacity in the code, but Neopets filters that out nowadays. Using a semi-transparent png is a good alternative.

Set the colours of the text and links, and remove the bold effect (font-weight: normal changes bold text to normal text). I've colour picked the link hover from the background; it's a light purple colour.

Colour Shorthand
If you're using a colour code with some repetition, you can shorten it by missing out the second repeated character. Here I've shortened ffffff to fff. Not all codes will shorten; only those that can go down to 3 characters will work.



Progress update:

Step Five: Styling Links
Make the font of the link buttons large and centered, both horizontally and vertically, in the tile.





Style the navigation links. width: 100%; sets each link to be the full width of the containing div; if you resized the navigation tile, the links would also resize.

You can use either pt or px for font size. The difference is in the units; 1px is one pixel on your screen, while 1pt is slightly larger at 1/72th inch, and originally used in typesetting for printed works.

Set the background on hover, colour picked from the starry sky page background. Note that because .link is a link element, we apply the :hover directly to the .link class.

Progress update:



Shown hovering over the Gallery tile
Step Six: Finishing Touches
Set each column of icons in the user collections to be equal width.





Add some white space and a black border around images, to make them look better against the non-white background.

You could change the shield and icon images to ones with a transparent background using this guide.

Remove the white space around the neopet images and make them circular instead of square.

Make sure you put this code after the previous block, or the .contentModule img commands will override these ones.


Give the about me tile some padding, and add the .padding div outside the style tags.

Different browsers render padding differently, which is why we're using a second div with a margin applied instead of padding itself.

If you specify a div with a width of 100px and give it 10px padding, then on some browsers it will give you a div that is 100px wide with only 80px of usable space inside it, while others will give you a div that is 120px wide with the full 100px of usable space inside it.


Progress update: Complete!

The Final Code


NB - The petpage filters are slightly different to the userlookup filters. In order to post this code, I've had to replace the angled brackets around the style tags with round ones - be sure to change them back in your own code.
Adding a Custom Shield and Icons
A quick warning here - if you add your own shield, it must not display an account age in months or years. That's considered lying about your stats, and is against the rules. A pretty image with your name or something similar is perfectly acceptable though! I'm using one of Kasey's Shields, currently being hosted at Sparkle.

Just the Shield

Hide the existing shield (this also hides the icon images, but we'll fix that)





Put the new shield in the background of the content module. If you are already using an image background for the userinfo, you won't be able to add the shield as well.





Make the icons (neofriend, send mail, etc) visible again.








Shield and Icons

To create your graphic, first take a screenshot of your userinfo module as it will be in your final layout. If you later change it's size, you'll need to create a new graphic to make sure everything lines up again. Paste this into a graphics program with layers (I use photoshop elements) and crop until you have just the content, no header.



Make your graphic on a new layer above this; we're only using the screenshot as a guide to position everything. I'm using the same shield as before, and some tea related items that I've shrunk to 60px x 60px.


You can see that my teacups leave the words below the icons visible, for the most part. Our graphic will sit underneath the words, so a bit of white overlapping doesn't matter. The teacup shield has become a static image rather than a moving gif because I just copied and pasted it in.

We've got our graphic positioned; now we just need to hide the screen shot and fill the background in white and we're done!



Hide the shield and icons.






Put our graphic in as the background to the module.







Make the icons clickable, but keep them invisible.






Remove the horizontal grey line above the icons.








User Collections

You can use exactly the same steps to give yourself custom icons in the user collections as well, but be aware of the avatar. You'll hide your actual avatar when you hide the other icons, and if you don't display the correct one in its place then your stats will be wrong - which is against the rules (particularly if it looks like you've given yourself a rare avatar on your userlookup which you may not have in real life!)

You have two choices here:
  1. Copy the avatar into your graphic, and make a new graphic every time you change avatar.
  2. Create a small div positioned exactly above the avatar icon, and put the avatar image in this instead. Again, update every time you change avatar.
The advantage of the first is that it involves no extra code. The advantage of the second is the once it's set up, it's quicker and easier to change. Entirely your choice which you choose!

Non-white Backgrounds

The easiest background is white, as that's what the neopets images have by default. To create a transparent or different coloured background, we need to remove this white - I use the magic wand tool on photoshop and a small eraser to fix little bits left over.


Once you've made your graphic, leave the background layer transparent and make sure you save your image as a .gif or .png (and that your image host supports these types; some will convert your image to a jpeg when they upload it). This makes sure that the final image keeps the transparency.
Changing Pet Images on the Userlookup












Adding Pets from a Side Account
To display a pet from a side account, you need to manually add an image of each pet to your lookup. You can find the image URL for your pet in one of two ways:

1. Copy the URL directly from an image of your pet

Right click on an image of your pet and select Copy Image URL. You can now paste the URL into your code between image tags - (img src="pasteURLhere") - and it will show up exactly the same as the image you copied it from.

If you use this method, you'll get a code for your pet instead of their name - something like

http://pets.neopets.com/cp/7l4z2w3r/1/2.png


2. Build your own URL using your pet's name

The code for a pet's image looks like this:

http://pets.neopets.com/cpn/aethelar/1/2.png
Your mood options are:
1

2

3

4



And your size options:
1

2

3

4



Graphics Tutorial
This tutorial will introduce you to the tools of graphics making, including lighting, colour and applying textures. It is not intended to teach you how to make a complete graphic, but is instead designed to give you the knowledge you need to experiment and make unique graphics of your own, such as the one below.


You don't need to know anything about graphics editing, but a basic knowledge of how to use layers is assumed. Most graphics editors with layers will work fine; I use Photoshop Elements, but if you don't have this, then I recommend Gimp as a good free alternative.

Lighting

Colour

Layer effects

Fonts and Text

Textures

Tiling Backgrounds

Basic Structure
The layer structure of your graphic will vary according to what effects you use, but this is the basic outline I always use: Keeping an untouched copy of the original image is vital; I can't tell you how many times I've wanted a new layer to create a new effect and realised that all my layers are partly erased or changed in hue so I've got nothing to take a copy from.

You don't always need a background and clipping group - buttons or icons where the graphic covers the whole screen are fine without them. For a layout though the clipping group means you don't ever erase part of your graphic, so can change your mind later on about what shape the outline is.

SWF Images
The most popular source of base images for graphics is from Neopets wearables. These are .swf images, which allow you to zoom in without the details going fuzzy. You can find many SWFs at Hawiku's Background Bonanza, Charly's SWF Collection or Lilacia's SWFs. Alternatively, you can follow the steps below to get your own image.
  1. Load a page containing a pet wearing the graphic you want. I use Jellyneo's Wardrobe App.
  2. Press F12 to bring up the developer tools and go to the Resources tab
  3. Under the side menu, navigate to Frames » wardrobe.jellyneo.net/ » XHR
  4. Double click on the .swf file to open in a new tab
Getting SWFs is annoyingly hit and miss. The steps above should work in chrome (but not always in chromium), but if you have trouble let me know and I'll try and link the SWF here for you. Instructions for other browsers can be found here, but I find chrome by far the simplest.

For this tutorial, I'm using the Hidden Garden Door Background, specifically the purple mushrooms to the left of the door.

Lighting
Lighting is controlled via the level adjuster found (on Photoshop Elements) under Layers » New adjustment layer » Levels. This brings up a control panel like the one to the right. The tools that are most useful for graphics are the remaining three arrows:


Increase minimum output

Decrease maximum output

Move left hand arrow rightwards

Move middle arrow leftwards

Move middle arrow rightwards

Move right hand arrow leftwards

Colour changes
It's possible to adjust colours using the level tool above, but I usually use layers - I find it easier to change my mind and change the colour. Using an overlay layer for colour changes keeps the image crisp and high contrast. For a stronger colour change producing a softer picture, use a colour layer.
  1. Pick a bright colour from the image
  2. Create a new layer above all other effects and fill with the colour
  3. Set this layer to overlay
  4. Reduce opacity slightly if necessary
Always use colours picked from the image; it helps keep things harmonious.
When using a darker colour, lower the saturation slightly. Strongly saturated dark colours can over power an image.
Using two layers for a bright colour and a darker one will produce a bright, colour tinted image without losing depth of colour in the shadowed areas. Swapping which way round the layers go will change the image slightly; choose whichever you prefer.
  1. Pick a bright colour from the image
  2. Create a new layer above all other effects and fill with the colour
  3. Set this layer to colour
Using a colour layer for a colour tint can leave the image looking duller than before. Use carefully, and probably combined with some other brightening effects.
When tinting an image with a darker colour using a colour layer, increasing the saturation of the colour avoids the image becoming too dark.
Combined Layer Effects
These are a few of the layer effects I use more frequently. They are far from the only effects you should learn, but once you've got some in your arsenal it's a lot easier to play around with layer styles and find something unique to you that suits the graphic you're creating.
Day to Night
  1. Create two new layers above the base and fill with a dark blue colour
  2. Set one blue layer to multiply and lower opacity to 60%
  3. Duplicate the base layer, and set to overlay
  4. Set the other blue layer to colour and lower opacity to 30%
The overlay layer between the two blues helps bring back some of the contrast we lost with the multiply layer. The final colour layer is what gives the image the blue tint; the multiply layer provides shading but is too dark to give much blue colour.
Soft and rich
  1. Duplicate the base layer, and set to soft light
  2. Go to Filter » Blur » Gaussian blur and apply a blur of 2.5px
The soft light brightens the image and makes the colours richer; the addition of the blur gives the image a slightly hazy, dreamy quality.
Spotlight
  1. Create a new blank layer and fill in the area you want to be spotlighted. I've chosen the mushroom and largest flower.
  2. Duplicate the base layer. Put one copy of the base in a clipping group above the layer you've just drawn.
  3. Lower the saturation of the lower base layer by going to Enhance » Adjust colour » Adjust hue and saturation
  4. Increase the saturation of the base layer in the clipping group in the same way
  5. Create a new levels layer by going to Layers » New adjustment layer » Levels. Make sure you select "Group with the previous layer
  6. Adjust the levels to brighten the clipping group; my values were 12 - 1.04 - 249

Fonts
A font can make or break a graphic, and is often a major part - a page title in a layout, a site name in a button, etc. There's no need to limit yourself to the default fonts; installing your own is easy.

These instructions are for a Windows 7 machine; if anyone can let me know the instructions for other operating systems, I'd be very grateful.
  1. Search Free font download to find an online library of fonts. I find either of the top two choices to be excellent.
  2. Download your font and open the folder to view the files. Don't worry about extracting the files if the folder was a zip; installing the font doesn't need it.
  3. Double click on the otf file to open the font
  4. Click the install button
That's it! If you want to check that the font installed, navigate to Computer » C: » Windows » Fonts and make sure your font is listed. You may need to restart either your graphics program or your computer before the font is available to use.

You can download as many fonts as you like; I often find myself downloading a new font to suit a particular type of graphic. Some of my favorite fonts that I use regularly are:
Adding Text
  1. Duplicate your text layer and move the new layer underneath the old.
  2. Change the text colour of the new layer to a darker colour.
  3. Apply a blur to the new layer by going to Filter » Blur » Gaussian blur and selecting a value of roughly 2 px.
  4. When applying the blur, you will be asked if you want to simplify the layer type. Click yes
Dark text on a light blur works just as well, and can give a very dramatic effect. Don't feel you need to limit your colours to black and white, but I find the graphic works better if both colours are a similar hue, such as a yellow and a dark brown.
Setting the text layer to overlay can produce a very nice effect and really help the text to become part of the graphic as opposed to looking like an add on. Use a light colour, preferably picked from the image, and duplicate the text to make the words clearer (my second layer here is set to 30% opacity). Also bear in mind what's behind the text; here you can see the E on the flower has not worked as well as the mma.
Textures
A texture is an abstract image you place over your graphic. They are hugely variable, and can be just about anything from a photo of rough paper to a light swirl to a collection of abstract shapes and patterns.

All of the textures above are from Details, the only Neopets based texture site that I'm aware of. You can find many textures on other art hosting sites or by searching Free Texture.

There are millions of things you can do with textures; the main thing to do is just play around with different layer styles and effects until you get something you like. For each texture above, I'll run through an example of how they could be used to get you started.


  1. Paste the texture in a new layer and set this layer to overlay
  2. Go to Enhance » Adjust colour » Adjust hue and saturation and change the hue of the texture to a greener colour to match the graphic better. My numbers were +62 for hue and +15 for lightness.
  3. Above this, create a new levels layer by going to Layers » New adjustment layer » Levels. Make sure you select "Group with the previous layer
  4. Adjust the light levels to make the texture brighter. My numbers were 7 - 2.06 - 255
  5. Lower the opacity of the texture to 80%


  1. Paste the texture in a new layer and set this layer to colour
  2. Duplicate the base layer above the texture and set to overlay
  3. Lower the opacity of the overlay layer to 75%


  1. Paste the texture in a new layer and set this layer to soft light
  2. Duplicate the base layer below the texture and set to luminosity
  3. Back on the original base layer, go to Enhance » Adjust colour » Adjust hue and saturation. Make sure that Colourize (on the right hand side) is checked and change the hue to a sepia style. My numbers were 34 for hue and 20 for saturation.


  1. Paste the texture in a new layer and set this layer to screen
  2. Duplicate the base layer above the texture and set to colour
  3. Erase unwanted areas of the texture using a large, soft brush.
Tiling Backgrounds
A tiling background is one that repeats seamlessly, either horizontally, vertically, or in both directions. Some images are easier to tile than others; the mushrooms I've been using up until now would be quite difficult, so I've switched to using the Colourful Mushroom Foreground instead. I'll be tiling it horizontally to make a float, but the same process applies to tiling vertically or in both directions.



Start by removing the background of your float to leave just the mushrooms. I use the wand tool to do this, but you could also erase by hand. Here, I've set the layer below to be green to check that I've removed all white parts of the image. I've also removed the two taller mushrooms either side, to make the float more uniform in height.



Go to Filter » Other » Offset and select a horizontal value that is approximately half the width of your canvas. Set the vertical value to 0 and make sure that the wrap around option is selected.



This splits the image so that the two edges are now together in the middle, and what was the middle is now at the edges. Because the image was split, we know that these edges will tile without any sign of a join.



Remove the gap in the middle by selecting half of the image and moving it to slightly overlap the other half, making sure that you only move horizontally and not vertically. Crop the canvas to the width of the image, removing the blank space on one side.



That's it! You've created a horizontally tiling float. Your code to use it is:



Which gives us:





The mushrooms were particularly easy to tile because there was empty space either side of the image. To make a float out of an image such as the Grey Clouds Foreground you need to not only overlap the images but also remove the visible seam. Here, I use the smudge tool to blend the clouds together; you may need to erase or even redraw parts of your float until the two edges match up.







Coding
This section tackles some specific coding issues I've seen floating around the help boards and the like. It's by no means an exhaustive list; just a few tips and tricks to help you on your way.

The biggest advice I can give with general coding is to use the resources of the web. There are huge communities available to support beginner programmers, many of which with help boards that have covered just about every coding problem you could encounter. They may not be so good with Neopets specific issues, but definitely worth checking out.

Colour codes

An extensive list of HTML colour codes, for those of you who do not have access to a colour picker.
Speech Marks

A couple of easy fixes that prevent speech marks disappearing on petpages.
Speech Marks
Ever seen this on a petpage?

Oh look," I said. "I've lost my first speech mark."
Or this?

I flapped my arms in exasperation. "But where did it go? I asked.
The cause of this is that Neopets filters strip out speech marks when they occur next to an angled bracket in the code, from a new line in the first example and the italic tag in the second. There are numerous work arounds; the most common ones are: But it is possible to stop them disappearing - you just need to separate the angled brackets from the speech marks.
Character Codes
The nbsp command is what's called a character code - a short letter code that the computer can translate as a specific digit, here a space. Character codes always start with an ampersand and end with a semi colon, and can be two, three or four letters long. Often they are just numbers, but some have letters.

There are character codes for the speech marks; unfortunately they don't seem to fix the problem. I don't really know why, except that the filters are probably the cause.
I've had to separate the & from the nbsp; to stop it converting to a space - make sure to write it all as one word in your code. For starting paragraphs, I like to use four nbsp commands to indent the paragraph purposefully; I find it looks better than just a single space, which can look slightly odd. The nbsp commands will get converted to spaces when you save the page, but for some reason putting a space in the first time around doesn't always work.

Sitely
Many thanks to the members of Verbal Tea for their feedback and suggestions for this guide. I'd never have got it this far otherwise!
Recommended Sites
SWFs and Graphic Resources
Backgrounds and Web Resources
CSS and HTML Resources
Credits


Counter started August 11th 2014



Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® 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