Hiding the petpage paraphernalia
I'm using petpage paraphenalia to refer to the Neopet's banner and copyright text at the top and bottom of each petpage. To hide both areas we need to uniquely identify that area of the layout and set display: none;

Let's start with the top banner. It has no ID or class to identify, so we target the table instead. We can't hide only the Neopets table and not our own, so we hide all tables and then unhide our tables. We can identify our own tables with a class of our own, but it's easy to target all tables inside one of our other divs. I tend to use either .main .content or .layout in some part of the layout building, so I use those.

The copyright text looks easier at first - it's all marked with a .sf class. However, and just to be contrary, that's only if you view the page in English. In other languages only parts of the text are inside that class, so only parts of it would be hidden. Please feel free to rage at the inconsistency. However, the text is still wrapped inside a font tag, so we'll do exactly as we did above.

For even greater efficiency, combine table, font into one block of CSS. Of course, adjust the .content identifier to whatever makes sense as the div for your layout that all your page content goes in!
Clearing floats
Floating is absolutely excellent at what it does, but one of the main issues it has is how different floated elements interact with each other. Take the images below as an example - both pictures are floated left with some text around them.

If you don't have enough text here...
Then your next image ends up overlapping. You can fix this by putting in a lot of «br» to make space, but if you change the size of your images - or of your text, or resize your content area - you'll need a different number of «br» and have to redo it.

Another issue. is if you have something floated inside another div, the containing div won't expand to contain the float. You end up with something like this:
The containing div ignores the picture and only expands to contain the text here.

What you want to do is to clear the floats - this draws a line under your floated image and pushes all your new content underneath it. We can do this two ways.

1. {clear: both;}
This CSS command clears the floats of everything above it and is very easy to use. You can either create a .clear class for the code above or use it as inline styles like I've done here:

Use the clear style here

And this image doesn't overlap!

2. Use overflow: auto on the containing div
This one works best when you have a floated element inside another div already, else you're creating a whole load of extra divs for yourself. But for our second example above it's perfect:
Now the container will automatically resize to fit the floated image!
If you've used overflow: auto before you've probably used it make a div scroll if it gets too much content. The scrolling will only work when you set a height; because we haven't set a height here, the div expands to contain the floats. However we have set a width - if you tried to put a picture in that was too wide, you would get a horizontal scroll bar here.
Guest post: Sunny's Tips for Coding
Use a real time HTML editor
As wonderful as TNT's method of editing pages is, you need to be able to see your minor changes in real time. Sometimes a pixel or two difference can make or break a layout, and having to pull up a new page to preview it gives you just enough of a sensory memory gap to cause problems. Your sensory memory (in this case the raw visual data from the preview before you made changes) only lasts for about 200 - 500 milliseconds. Your working memory can last a bit longer, usually around 10-15 seconds, give or take a few. If you are running on a slow connection, even that can be a bit too long.

Unless you're really good at visualizing stuff in your head, you need to make a rough mock-up.
Mocking up a layout is an important step. I use it as a time to not only dream about what I'd ideally like the layout to look like, but it also allows me to start to picture the big components of the layout before I even begin making it. Say I drew in a scroll box. I'd more than likely start thinking about how the best way to create that scrollbox would be. I'd maybe even label it something like Div - Scroll. Even if you're not an artist, it doesn't take much talent to make a simple mock up, even if it's only basic shapes such as boxes and circles. It helps you keep your original vision, and also allows you to find the corner and edge peices of the jigsaw that is your layout.

There's tools out there to teach and help you.
There's tons of websites, books, and even applications now that offer to teach you how to code HTML and CSS layouts. If you're looking for books, try looking at bookshops and libriaries near the computer how-to books. If you're looking for websites, a simple search engine can open up a world of possibilities. And applications are pretty easy to find as well.

There's also pretty cool extensions for certain browsers to help design geeks like myself. I love Colorpeek which allows me to eyedrop hex codes from images and websites. Other extensions can help you view sources of web pages, or do other nifty things!

Don't be afraid to ask for help, or try new things that may not work.
Thomas Edison tried hundreds of times to make the lightbulb work. Coding often feels similar to making a lightbulb. Things aren't gonna work out, you're gonna have to scrap parts of your mockup because you don't know how to code that section yet, or you'll miss a div somewhere and your scrollbox will start to combine with others. Things will happen, but that's okay. Mess ups are part of learning, and I've made plenty in my time. Feel free to ask others for help, such as experienced coders, or friends of yours on the boards. You never know who may have a bright idea on how to fix certain issues.

Sunny runs Coding Revolution, a site that offers premade and skeleton layouts.
Using border-radius for fancy rounded corners
Border-radius is a fabulous code that allows you to give things rounded corners - like the title of this page. You can use it on userlookups or petpages, but be aware that for petpages you need to use inline styles to make the code work.

Basic usage on a userlookup
Basic usage on a petpage
Both of these give the same result:
You can see here that applying a radius of half the height and width gives us a circular image (the pet is 150px square to start). But what if we want somethng a little more interesting?

border-radius: 10px;
Applying just one value rounds all the corners the same amount

border-radius: 10px 30px;
With two, the first value applies to top-left and bottom-right, and the second value applies to top-right and bottom-left

border-radius: 10px 20px 30px 40px;
One value per corner, in clockwise order starting with top-left

border-radius: 10px 80px;
You can set your border radius to be larger than your image for some very strange effects!
Which code applies where? Understanding cascading CSS and the !important keyword
What is cascading in CSS? It's the set of rules that defines exactly which bit of code applies if you've got more than one possible contender. As a very simple example, say we specified that links should be blue, but links that you hover over should be red. A link that is being hovered over is still a link; the reason it obeys the red command is because a:hover is more important than a in the cascading order.

Well, that's very nice to know, but how can we use it? As Shingie (she who owns that ki.lls me) explains:
On the distinction between the ID and classes.... you can apply an id and class to an element. i.e., «div class="module" id="black"» But when they have conflicting declarations:

.module {
background: #fff;

#black {
background: #000;

The interesting thing I discovered is that the id overrules the class every time. So in that case, the "ID" is stronger than the class, and the div will have a black background.
So we use the class to describe the general style but for individual elements we can override the general style by using the ID to describe the specific style. Incredibly useful.

The full cascading order is below; use this to work out which part of the CSS will apply to any section of the layout (lowest importance first):

a General style applied to an element sits right at the bottom of the pile
a:hover Specifying a state of an element takes priority over the style for the element itself
table a Multiple layers of elements specified - here all links inside tables. The more you specify, the more important your code will be.
.nav Classes override any general style applied to elements
a.nav Linking a class to a specific element is more important than just the class itself
.nav table a Just like with elements, the more layers we specify with our class, the more important we are.
#link IDs override the lot...
«a style="color: red;"» ... except for inline styles, which are the final authority.

What happens if two things are equal in the cascade?
The final piece of the cascade is the order you write the code in. If everything else is equal, then the bit of code that appears first will be ignored in favour of whichever code came later.

The !important keyword
Sometimes, we can't get code to go in the right cascading order. This happens a lot with userlookups where TNT defines a lot of things with inline styles (like the widths of their tables) - inline styles sit at the very top of the cascade, there's no way we can touch them.

When this happens we use !important to override the standard cascade order and make sure our code is listened to:
Be careful using !important. In our .nav example above the colour will always be red - you won't be able to change colour when you hover over a link. Unless, that is, you specify .nav a:hover { color: blue !important; } - but the more you do this, the harder your code is to navigate. Userlookups aside, try to keep things within the standard cascading order and avoid using !important wherever possible.

Columns three (plus one) ways
So, you're making a petpage. Where to start? How about them columns? Columns sound good. These are some common methods; they suit slightly different scenarios, so choose whichever works best!

1. Specify positioning
With this method, you manually specify where each column will be on your page using the positioning attributes (top: 100px; left: 100px;). NB - on petpages, you need to put your position: absolute; as an inline style else the filters will throw a hissy fit at you.
Use this style when:
You want one (or more) of your columns to have position: fixed
It's important that your columns are independant - ie, changes to one will not affect the other
It doesn't matter if your columns are different heights
It matters exactly where on the page your column is (eg to match a graphical background)

2. Use inline divs
This method doesn't specify where your columns are so much as which order your columns are in. It makes them sit next to each other on the page as though they were words in a line of text - and if your text is centered or right aligned or justified, your columns will be the same. Control the space between your columns by increasing or decreasing the margin.
Quick note - the vertical-align specifies which parts of your columns line up with each other. Here, we've asked for the top of each div to line up; you could line up the middle or the bottom as well (but it would look strange for our columns).

Use this style when:
Your layout is flexible, eg the columns expand to fit a larger screen
You can't be asked to reposition your columns if you change one of the widths slightly
You want your columns centered on the page (use text-align: center on the body to do this)
You want several columns covered by the same class (so here, we could easily add a second side div to the right of main)
It doesn't matter if your columns are different heights

Inline divs behave like text, which means two things - if there's not enough space on the screen, they will go to the next line; and if you have any spaces or new lines in your code, these will leave a gap between your columns. To fix the former, put your columns in a wrapper div and specify the minimum width of your layout on that. To fix the latter, look here.

3. Use tables!
Ahahaha, Emma, you joker you.

Nuh uh. Dear padawan, allow me to introduce you to CSS tables. The key things about them is that the divs are still exactly that - divs. All of the table behaviour is handled in the CSS, which gives the control that we don't have with HTML tables.

So, CSS tables give you the familiar layout of rows and columns that we can easily build a layout off - and like a table, we can ask the columns to be fixed or fluid width, and we can make them all match the height of the tallest div without having to hard-code a value in.
Use this style when:
You don't want to specify a width for the main div - you just want it to fill whatever space is left
You want all your columns to be the same height
You want to vertically center your content. Set vertical-align: middle and BAM. Sorted.
You feel an incurable desire to put in an HTML table. Don't do that. Do this instead.

Some things go a bit funky inside table-cells. They won't scroll, so you have to create a separate div inside and set that to overflow: auto. And you can't set height: 100% (or any percent) on something inside the div - firefox throws wobblies at this. You just need to hardcode the height instead, so a fairly simple fix.

4. Use floated divs
Floating divs works very similar to inline divs except that you can only float left or right. With more complex layouts you can also run into problems with clearing floats, which I'll cover in another post.
Use this style when:
... When an inline-block just won't do?
I'm going to level with you, if you're not attached to floats on an emotional or spiritual level, I'd avoid using them for layout building.

So there you have it! Three (plus one) fabulous ways of populating your pages with columns. Now go break some eggs, coding style.
Using CSS Selectors like a champ
(You will pry my corny corny titles from my cold dead hands.) CSS Selectors are what you use to define which bit of code belongs to which part of the layout. It's the bit that goes #main or .content or body. Here's a quick guide to what means what in the selector world:

#main Using the hashtag defines an id of a single object. Only one object on the userlookup can use this ID. Because of this, IDs locate specific parts of the page - we use them for links.
.content A full stop defines a class which can be used for multiple objects on the page that all look the same - like each of the posts on this blog.
body A word without anything in front of it defines an element - that is, part of the HTML. On Neopets, we are quite limited; we have body, b, i, a, div, span, img and other such elements, but out in the real world you have section, header, footer and all sorts of useful bits and pieces.
a:hover The colon here defines a state - when the a element is being hovered over. You usually only use this for hover on Neopets, but you can also use these for :first-child or :last-child in more extensive code, and believe me, you will grow to love these.
* The asterix stands for everything and it applies the code to every single element on your layout. Use with care! (

You can apply the same code to multiple selectors by putting them on the same line, separating each one with a comma (but make sure to leave off the last comma):

You can also scope your selectors so that you can specify all link elements inside the navigation div. Do this by writing the selectors in a list with no commas between them:

Or you can combine selectors, so that you specify only img elements that have the class small by putting a full stop between the two selectors:
On Neopets, it's one class and one ID maximum per item. I end up using a lot of classes like big-left or tall-yellow when I want to apply multiple styles. I then have to duplicate the code for big-left and big-right to both have the same big commands, just with one to the left and one to the right.

Out in the big wide yonder, I could just create one class for big and separate classes for left and right and apply multiple classes to the same element. It saves a lot of repeated code! But alas, when on Neopets, you learn to compromise.

One final note for you: a lot of people say that it's better to use classes and avoid IDs as much as possible. This way, the ID is only used to identify a place in the code for a link to go to. It helps keep your page running fast if you have scripts going (for example, a script that takes what you write into a form and adds it to a database needs to know exactly where the form element is) and is just generally tidier to stick to classes where possible. Not a big deal for petpages, but something to keep in mind!

Understanding z-index
Z-index is easy stuff, right? You give it a number, and things with a higher number overlap things with a lower number. Simples.

Um. Well, that's the general gist of it - but you need to keep two very important things in mind:

1. z-index only works on items with a position specified
That's either absolute, relative or fixed. Quite often absolute or fixed will change your layout; if that's the case, go for relative, it's the least likely to cause disruption.

2. z-index stacks
What do I mean by stacks? I mean that it if you have nested divs, they form a group that will obey a single z-index as a whole. You can still specify z-indexes inside the group, but they can't sit on top of something the whole group is behind.

Consider this scenario: Red, Blue and Green are positioned to overlap. (Red and pink, they're the same thing really.) They have no z-indexes applied, and so they appear in the order they were written in the code; red was written first and so appears at the bottom, green was written last and so appears at the top.

Now, we change things. Red gets a z-index of 3, blue gets a z-index of 4, and green gets a z-index of 2 (and everything is absolutely positioned to make sure the z-indexes work). As expected, blue is on top and green moves to the bottom.

Now we change things again - we introduce Yellow (I apologise for the colour clash). Yellow has a z-index of 1, and both blue and green are inside it.

Now, blue, green and yellow have formed a stack. They behave as one thing and they obey the parent element - yellow, which has a lower z-index than red and so sits at the back.

Inside yellow, blue sits on top of green because it has the higher z-index. It just can't sit on top of something higher than the stack as a whole.

So how would you get blue and green back to the top? You have to change the whole stack - either take them out of yellow entirely, or move the entire stack to sit on top of red. It's a pain, but at least now it's a pain that you know about!

Viewing the source code of a layout
If you've every tried to view the source code of a userlookup or petlookup - perhaps to help someone fix a bug, or to see how something was done - you'll know that the captchas are a rather immense thorn in everyone's side. If you go for the standard View Page Source option, all you see is the source of the captcha page and nothing at all to do with the page you want.

So, is there a way to look at source code nowadays? Of course there is - and it's in some ways more useful than viewing the full page source. What you do is bring up the web developer tools - in particular, you want the inspect element section. In Chrome and Firefox, you do this by right clicking on the part of the layout you want to see the code for, then selecting "Inspect Element". In Chrome you can also find them by pressing "Ctrl" and "Shift" and "I" all together. In Internet Explorer, press "F12" to bring up the developer tools, then go to the "Inspect Element" section. When you do this, you see the web developer tools (these are the Chrome version):

And it's as easy as that! You can expand or collapse sections of code until you find what you want, and the bottom panel will show you all the relevant bits of CSS for the element you've chosen. Magic stuff!
28 MayTop
Fading an image on hover
Used to be that you could set opacity in the code, which was a very useful thing to be able to do. However, nowadays Neo strips this out, so we need to use a slightly different method of creating a fade effect.

Our basic structure is to create one picture div, with the image set as the background and inside that create a second overlay div with a semi opaque background. I've used white, but use whichever colour is appropriate - TKM backgrounds has white and black but you may need to make your own for other colours. Any text or content that we want to appear when we fade away the picture div goes in the second overlay div.

Once we have this structure, we just need the hover effect. To do this, we set .overlay {display: none;} which hides our overlay div by default, then .picture:hover .overlay {display: block;} which shows our overlay when we hover over the base image.

Putting together:

Which gives:

This text only appears when you hover!

Note that we need to specify the width and height of .picture - this is because our image is a background rather than a main picture. If you have a lot of these, then save time by specifying the width, height and background image of each picture using inline coding. This allows you to change the specifics each time to match each different image you are using.

22 MayTop
Fixing Trophy Width
Have you ever noticed the pesky bit of overhang on a userlookup, where the first and second rows (info, collections and shop on the first row and pets on the second) are ever so slightly wider than the trophies? And you fix the width on the trophies but then everything else moves as well? Maddening. Guess why it happens?


Neo, we have had words about this. Anyway, there's two fixes for you:

1. Set the width of each section manually
This works just fine if you are handling your own lookup, because you always know whether there will be a shop or not. All you do is specify the width of the trophies and pets to be the same - say 1000 px - and split up the width for the user info, collections and shop however you want. Or, even easier, just make the shop that tiny bit narrower until everything lines up. Simples!

However, if you're building a premade you can't do this. The userinfo and collections need to be able to stretch to fill in the gap if there's no shop, so setting the widths manually won't work.

2. Add a negative margin to the trophies
The overhang is caused by the tables lining up with extra table cells to the right of the trophies. So, easy way to account for this is to add margin-right: -10px; to the code for the #usertrophies div. This causes the extra table cells to overlap with the trophies, so the total width is what you expect it to be. Perfect!
21 MayTop
Adding comments to your code
Anyone who ever codes off Neopets will tell you that comments are fabulous things. They allow you to put notes in to explain the code, to remind your future self why you did something, to put a quick notation by a random (/div) telling you exactly which of the many nested divs that one is ending... Glorious, glorious things.

Neopets strips them out. All of them. The whole lot.

Neopets, no. Bad Neopets.

Thankfully, the workarounds are simple:

1. Put your comments in the ID or class of an empty div

These work best for short comments.

And that's it! Unless you've applied a general style to the div element, your comment divs will be completely invisible on your page. Comments that Neo's filters can't strip out!

2. Use a comment div set to display: none;

If you need longer comments, then you can change the display settings to make a div that will be there in the code but not show up at all on your page:

27 NovemberTop
Removing whitespace between inline block elements
Inline block is marvellous. I love it. It's brilliant.


When something is 'inline', that means that the text around it matters - in particular the spaces between your code. Sometimes, this is really useful; you can add a couple of spaces between your affiliate buttons to make them look nicer, for example. Sometimes it's a pain.

These two blocks show the space that I'm talking about. How do we get rid of it? Two ways.

1. Remove all spaces in your code
This one's fairly obvious - if the spaces and new lines in your code are causing problems, remove them. It works very well if you've only got a couple of things. If you have a lot, or if this is the basis of your layout, it can get very messily very easily.

2. Set whitespace size to 0
Well, not the whitespace as such - it's the font-size and the line-height that we're shrinking down. Apply this code to the parent / container div, and make sure to reverse it for any other divs so that the rest of your font is not affected.

Which produces:

Much better! It would be nicer without the border, but for the sake of this demo it helps you see what's happened. Now you can completely control the spacing of your divs by setting the margin, and not worry about any pesky whitespace creeping in!
3 NovemberTop
Horizontal scroll on the trophy section
Getting the trophy section to behave on a userlookup can feel nigh on impossible. One of the common things to have an issue with is trying to shrink down the trophy area without introducing a horizontal scroll. Even if you resize the images to practically nothing, chances are that pesky scroll bar will still be there.


Because tables.

The userlookup uses a lot of nested tables all over the place, most of which have got their heights and widths manually set. The problem comes from the fact that the trophy tables are all set to have certain widths, or to have 100% width, which the table padding, borders, assorted mystical runes and other such baggage are added on top of. Even if you set the width of the #usertrophy section, the tables will do their own thing.

To control them, add this line of code:

And voila! No more horizontal scroll for you. You do need the tables to be quite a bit smaller, so don't be surprised by the big difference in widths between the two.

4 OctoberTop
Cropping an image with css
About six months ago my laptop cough, spluttered, and froze it's last. End of the line. And it didn't even have the courtesy to wait until payday, so I replaced it with a notebook instead of a proper laptop.

The notebook is fine, but it lacks image editing software. Cropping an image now involves saving it, uploading it, cropping through a website, then downloading again. It's a faff. I hate faff.

So, instead I crop things with css.

Create your clipping div
A clipping div is the final size of the image you want to display. The overflow is set to hidden so that only the part of the image inside the clipping div will be visible.

Resize and position your image inside the clipping div
If you're making a lot of images cropped the same (for example, all the layout previews on Beetle are cropped like this), then you can apply this to all images. If each of your images are different, then you can use inline styles to position and resize each one individually.

And that's it, at it's basic level. If the code seems familiar to you, then a very similar code is used on a lot of layouts to make the pets images thinner or shorter. The a tag acts as the clipping div in that case.

2 OctoberTop
Margin-top as a percentage of height
Here's a very annoying thing I came across when coding my latest layout:

Margin-top is calculated as a percentage of width

Now, this makes no sense. If I've set margin-top: 100% then could it possibly be because I want the top margin to be 100% the height of the screen? (Or whichever other parent div I'm in)


Does it make any sense at all to calculate it as a percentage of the width of the screen?


Sometimes code is just illogical. But, to any of you that come across this, the solution is to set position: absolute; then you can use top: 100%; and it works as expected.

Of course, if you're nesting absolute divs on a userlookup this is less than useful, but hey ho. Time to rework the structure entirely, I suppose.
26 SeptemberTop
The (center) tag is outdated. Remove it. Please.
The (center) tag is used a lot in Neopets code. It makes sense; it's quick, it's easy, and it does exactly what it says on the tin.

With one huge flaw that makes it an absolute pain for the rest of us:

Once you're inside a (center) tag you can't get out. There's no css command to cancel it, because it's not css.

And that, that's the bad thing. HTML defines what content is, CSS defines how content looks. You don't mix those up.

I'm not alone in disliking the center tag; it's been deprecated, which means that it's no longer part of the 'official' lexicon of code. In reality, it still works, but you should use one of the alternatives below.

1. Text-align: center
Create a .center div style, and use that to center your text. To make images or divs listen to the text-align command, add display: inline-block; to their style.

2. Margin: auto
Setting the left and right margin to auto will automatically center any item set to display: block; A div has display: block; as the default setting, but for some other elements you may need to specify this.

NB - you need to specify a width for this to work.

3. Margin: auto with absolute positioning
The standard centering code above doesn't work if your #main div is aboslutely positioned. To fix it, you need to add these lines of code:

11 September top
Let's play "Hunt the save button"
Sometimes, a petpage you're making covers up the save button. While that makes no difference to the final page, it adds a layer of inconvenience when you're actually making it. So how do you save your page when there's no save button?

1. Zoom out. Level: A bit of a faff.
If you have a large, absolutely position image - such as the layout of many graphical petpages - then the save button could just be hidden. Zoom the page out to around 20% so that your graphic is tucked in the corner, and the save button should be visible.

2. Tab to find it. Level: Slightly peeved.
Upgrade level to rather teed off if you run a link directory, because there'll be a lot of tabbing for you. For a quicker way to find it, click in the URL bar, hold "shift", and tab exactly three times.

The aim is to keep cycling through links until you find the save button. You'll know you've got it when none of your links are highlighted on the page; hit enter to press the save button.

3. Remove all coding. Level: Seriously?
To use this method, bring up the developer tools of your chosen browser and find where all of the css is written. Highlight it. Delete it.

This will, naturally, destroy your page - but it should bring up the save button again. Don't worry! When you save, your page will save the beautiful creation you intended and non the absolute mess that you've just created.

You shouldn't ever need to use this one, only as a last resort if you can't find the save button any other way.

4. Remove all coding. Now tab. Level: Time for a new layout.
I have to do this with my pets page. It's a pain. If you have a lot of inline-styles, then removing the main coding might not be enough to bring back your save button. It will definitely be on the page somewhere, so just keep tabbing...

9 September top
I'm fed up with my speech marks disappearing
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.

I've seen numerous work arounds, most of which use bold, coloured or italic font to show text. But I don't want that. I want my speech marks, please.

To stop the speech marks disappearing, just use this code (take all the spaces out and type as one word): & amp;quot;

This will appear when you preview the page as & quot; (again, all as one word), and then finally when you save the page as the good old that you were aiming for.

Now go forth, and populate your stories with speech marks!
27 August top
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

The code below does three things:
  1. Hides the existing shield (and the icon images, but we'll fix that)
  2. Puts the new shield in the background of the content module. If you're already using an image background for your content module you won't be able to use this method to add the shield, as the module can only have one background.
  3. Makes the icons (neofriend, send mail, etc) visible again
Which gives us this:

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!

And our code, which:
  1. Hides the shield and icons
  2. Puts our graphic in as the background to the module
  3. Makes the icons clickable, but keeps them invisible
  4. Removes 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.

Getting image codes for your pets
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


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

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


This uses cpn instead of just cp to mark it as a name code
Replace the green text with your pet's name
The blue text controls your pet's mood
The purple text changes the size of your pet's image

Your mood options are:

And your size options:







That's all she wrote
I've covered topics that have cropped up for me when I code, but what about you? Have you any fancy footwork you'd like to star in a guest post? Or a question that I haven't covered here at all? Send 'em in!
Beetle is a premade and tutorial site
run by Aethelar. Credit is not required
and you are encouraged to modify these layouts.

  • Home
  • Userlookups
  • Petpages
  • Backgrounds and Banners
  • Coding Blog
  • Tutorials
  • Contact
  • Sitely

  • Requests and questions always open