Scarab
Scarab is a Beetle family site, previously going by the name of Behind the Layout Tutorials or BTL for short. It is, very simply, a place for you to learn how to code. You can follow the layout walkthroughs, look into a specific issue, or read up on a general topic - however you use Scarab I hope you use it well and create something fabulous with the knowledge you gain.
Use these tutorials as step by step instructions for a complete layout or as starting points for your own genius creation. Don't feel you have to stick to my way of doing things - try things out and create your own style.
The Beetle family is based on the idea that knowledge should be shared, not hoarded. Credit is optional for all content on this page, although where resources are used from other sites please honour their credit rules.
My inbox is and always will be open for your questions. Please be patient for a response; I'm not on every day! If I'm not around, one of this fabulous lot will be able to help you with anything you need, or try the help board for answers as well.
13th October
One new tutorial up - a very quick one requested by Malisha about recolouring backgrounds.

8th October
Who gets a new link back button from Rico? We do. I'm so happy.

7th October
Now listed at Directly

30th September
Scarab now has a link back button! Exciting stuff. Ta, maestro. Maestra? And, Malisha looked over things and pointed out some improvements, so enjoy the shiny new fixed menu navigation in the top right corner!

And a quick call for help: if anyone's used these tutorials to create something, would you consider being fabulous and letting me showcase your work here? Just drop me a line if you have something you're happy to share!

27th September
Two new tutorial topics today - using filtered words and invisible scroll bars.

25th september
All moved across! Finally. Hopefully going live this evening!

21st september
New tutorial! Because you get new content with the revamps. This one is for full screen layouts and how to make everything work on percentages so it fits on different screen sizes.

All layout walkthroughs and 5 of the topic posts have moved across. Phewf. Tiring work.
REQUESTS FOR NEW TUTORIALS
are currently closed while Beetle revamps into the Beetle Family. You may still send in general questions, bug fixes, and questions about using or modifying any of the content on this page.


High Society is a directory of coders and graphics makers, many of whom have opened their inboxes to help you if you need it. Look for the Gurus and send your questions to them if I am ever unable to help.

Userlookups

Banner Userlookup A simple banner based lookup with an image at the top and space to write about yourself. This lookup can incorporate the neopets drop-down navigation.

Image codes How to get or build the image
codes for your side account pets

Anchored Userlookup A multipage style userlookup with sections for about me, stats, pets and trophies accessed via buttons.


Custom shield and icons Replacing the default shield and
userinfo icons with your own ones
Tiled Userlookup A versatile layout with many 'tiles' to represent different areas of the layout. An excellent layout for people with a lot of links to show.

Scrolling trophies Remove the horizontal scroll bar
in the trophy section

All My Pets Lite A layout to add a row of side account pets to the top of your userlookup


Fixing Trophy Width Make the trophies behave and line
up with the rest of the layout
All My Pets Full A layout that incorporates your main account pets in with your side account pets; pet stats are visible on hover.

viewing source code A workaround for the fact that
capchas ruin view-source



petlookups

Banner Petlookup A basic petlookup layout with a banner across the top and space underneath the stats to write about your pet. Clean Petlookup A petlookup with lovely clean lines and minimal navigation. Includes a freeform about me section and a circular artwork image of your pet.


petpages

Anchored Petpage A basic anchored petpage with six sections. The banner uses a banner base image with the text and links laid on top so it's fully flexible.

Disappearing  " "  Filter fixes for disappearing
speech marks


finding the save button Several options to try if your
save button is hidden


Columns three + one ways Various options to build a column
based petpage layout


hiding petpage fluff Remove the banner at the top and
the Neo credits from petpages


full screen layouts Building a layout on percentages
to fit on any sized screen


filtered words Bypassing the filters to make sure
that blocked words show properly



miscellaneous



no more «center» The «center» tag is depreciated;
these are better alternatives


Clearing floats Most float problems are caused by
floats not being cleared properly


spaces with inline block Remove the space between
inline-block elements


comments A work-around for the fact that Neo
removes all comments from code


image fade on hover Create an image that will fade when
you hover to reveal other content


understanding z-index How to use z-index to stack and
layer things in a layout


css selectors Classes, IDs, and hover states - and
how to use them best


Cascades and !important CSS selectors part II - which order
are CSS instructions applied in


Using Border Radius Making images circular or adding
rounded corners


Sunny's coding tips Guest post from Sunny, owner of
Coding Revolution and other sites


graphics A basic introduction to using
lighting, colour and texture


making a tiled float How to turn a wearable garland
into a tiling float image


cropping images in css How to crop an image with CSS
rather than changing your graphic


invisible scroll Creating a scrolling div with
an invisible scroll bar.


recolouring backgrounds Two very quick ways to
recolour a background.


Scarab tutorials

This tutorial will teach you how to make a simple userlookup with a banner at the top and space to write about yourself underneath. The text words for the navigation will be written on the banner itself with the neopets navigation sitting, invisible, over the top.


Userlookup Structure
The userlookup is made up of four sections:
  • The body
  • The header
  • The about me section
  • The content modules

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 (now closed).

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.





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.





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 the class dropdown
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.





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.




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.






Finished
Scarab tutorials

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 have a large area for your about me section, and your shop and gallery are directly linked from the navigation buttons.


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 body
  • The main div
  • The neopets navigation
  • The userlookup navigation
  • The content div
  • The content modules
  • The about me section (not shown)

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!






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 deprecated (is no longer used) because HTML elements shouldn't define how something will display - that's CSS's job. 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.





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.




Shown hovering over the Stats button to turn it yellow

Step Five: 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.


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

Step Six: 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 really affect anything.

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.





Step Seven: 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.





Finished


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.

Scarab tutorials

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 or sections to display, as they can easily be incorporated into the rest of the layout.


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.





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.





Step Four: Backgrounds and Colours
Set a full body background. The one I'm using is from TKM 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 TKM 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.







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.




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.





Finished


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.
Scarab tutorials

This userlookup allows you to show side account pets seamlessly alongside the pets already on that account, with the stats (for the pets actually on that account) or the name (for the side account pets) shown when you hover over the image. The hover effect, and incorporating the side account pets seamlessly in with the main account pets, is a tad tricky; try the lite version of this layout if you want something simpler.


Userlookup Structure
There are five parts to this userlookup:
  • The body
  • The #userneopets section
  • The other pets
  • The navigation
  • The other content modules
The main and content divs are there, but not visible. They do provide the underlying structure for the other content modules, which are in their natural positions - all we've done is shift them over a bit to account for the modules we've taken out.

One thing we have done is set the main div to be relatively positioned, so that the whole layout can still be centered even though we're using absolute positioning for the userneopets section and other pets div. For an explanation of how this works, head up to the structure section of the Tiled Userlookup tutorial.

Where the structure gets more complicated is for the pets. What looks like one line of pets there is actually two sections; the userneopets content module and a new section we create, the other pets div. Rather than sit side by side, these two overlap each other so that the 'fade' affect of the hover can work, where the pet image looks partially see through when you hover over it.

Here's how the layers of divs work (read from the bottom to the top):



The div structure of the #userneopets and pets divs. The uni, kyrii and lutari are pets on the this account; the kougra and aisha are side account pets.

Still with me? Good.

Why so many layers of divs?
Because you can't specify opacity in the code, so we need to use graphics - our semi-transparent white div - to do it for us. If we copied a picture of the pets and lowered the opacity of those, we'd have to change the images every time we changed that pets' customisation - this way avoids that. However, you will need to update the code every time you add or remove a pet from the account this userlookup is on, or the pictures in the pets div won't match those in the userneopets content module.

Why have the pets on this account show in both the pets div and the userneopets content module?
Because we can't touch the code inside the content module. In an ideal world, we'd be able to get in and add our white div there without needing the second copy of the pet image. Because we can't do that, we put the white div underneath, and a second copy of the pet image underneath that.

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.
Display or Visibility?
We can use both display: none; and visibility: hidden to hide sections of the userlookup, but they each have a slightly different effect. Using display: none; removes the element completely - it's as though it was never there to begin with. On the other hand, visibility: hidden; leaves everything in place, just turns it invisible and leaves a big space where it used to be.
#footer
This removes the footer from the userlookup

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

#habitarium, #ncmall, #userneohome,
These remove sections of the userlookup we don't want to display.

#userneopets .contentModuleHeaderAlt
This removes the header from the #userneopets module, but leaves headers for the other modules in place.

.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 and in the pets div that will hold our side account pets.


Remove borders and backgrounds from everything, giving us a completely blank userlookup to play with.
Step Two: Basic Positioning
Position and center the main div.
Using margin: auto; for the horizontal margins is a neat way of centering something. It only works for something with a defined width; otherwise, the computer can't calculate how big auto should be.
Bring the userneopets section up to the top. Because the pets div overlaps it, we add it to the same block of code so that it's positioned in the same place.
Position the navigation div. Because this is not absolutely positioned, the margin-top we've applied here will also push down the other content modules below this. 150px gives us space for one row of pets; if you have two rows, increase this to 300px or even 310 or 320px if you'd rather.
Put this part outside your style tags

Add in the navigation elements and the (currently empty) div for the pets. The navigation links will, at the moment, overlap the userneopets section; we'll move the pet stats up underneath the images later on, so that isn't an issue.





Step Three: The #userneopets Section
The main purpose of this block is to clip the pet images to be 90px wide. The top block restricts the width of the link and makes sure that any part of the image larger than this size won't be visible (that's the overflow: hidden part), while the second block, #userneopets img, shifts the images left a bit so that they're centered in the thinner space.

The position: absolute in the top block is what makes the link (and therefore the pet image) sit on top of the stats and cover them. With this, the stats will move up by themselves to sit underneath the image; you should find your navigation links are no longer overlapping anything.

The white background on the #userneopets img is not usually visible - it only shows on pets who are wearing no background of their own.

Hide the images on hover so that the pet info section is visible.
Remove the extra space around each pet.
Two words joined together with the second word capitalised (med text = medText) is called "Camel Case" and is a common way of putting multiple words into one selector. Personally, I prefer dashes (med text = med-text) for css, but you can use either.
Restrict the pet info section to be 90px wide so that it is completely covered by the pet image. The float: left; makes the table cells (td.medText) behave like divs, so that Internet Explorer can't decide to apply it's own unique table style and mess up our layout.
Change all the bold font to normal, and make each bold word sit on a new line. This is purely aesthetic; it helps the stats to fill the space better rather than be bunched up at the top.




Shown hovering over the the central pet

Step Four: The Other Pets Div
There's quite a lot going on here, so let's take it bit by bit.

display: inline-block turns a link element (usually text) into an element with width and height that we can use like a div. Technically we should use a div instead, but this saves characters. The inline part makes the pets sit side by side instead of in a column.

position: relative allows us to absolutely position the semi-transparent white div inside each link.

The other blocks make the pets look the same as those in the userneopets section; the height, width and overflow clip the pet images to 90px wide while the margin controls spacing between each image and the last three style how the font appears. The line-height is used to push the pet's name down so that it lines up with the pet info text of the userneopets section.

Center the pet images, exactly as above. In fact, you could add the #pets img code to the #userneopets img code to save space.
The white div is where we overlay our pet images with a semi transparent white image when we hover over them. I'm using a 70% white opacity background from TKM Backgrounds.

The display: none hides our white div until we need it on hover, and the position and size block makes the white div cover the entirety of the pet image.
Show the white div when we hover over a pet, or, for the pets which are on this account (and therefore shown in the userneopets section), always show the white div. We have to set this because we can never hover over these divs - the userneopets section on top blocks us - so the white div would not otherwise get activated.

Fill the pets div with your pets. Each pet sits inside a link element; without the link, you won't be able to get your pet to display properly so it's important that you add that in - even though the first three pets use a link element without a URL to go to.
Links without URLs used to be bad news, but it is now technically valid. You might see some people say it makes the browser slower, but this is only for links pointing to blank URLs; missing out the URL part all together has no effect.

The reason I say it's bad practice is because I'm using a link element to act as a div element, not because I'm using a link element without anywhere for the link to go. In code, it's important to use different things for different purposes as much as possible - it makes the code clearer and much easier to work with.

The first three pets are the pets on this account, and marked with a class to show this. These are the faded images that show when we hover over the pets in the userneopets section, so make sure you include the right number of these links to match your pets - and obviously, change the pet names to match your own!

The last two pets are my side account pets; I have five more in the userlookup, but I haven't included them in this part of the tutorial to save space. Make sure you put the pet's name inside the white div, or it won't show on the hover correctly.

You can read more about getting the URL for pet images here.




Again, shown hovering the middle pet of the #userneopets section to show the faded image from the pets div below.

Step Five: Background and Navigation
What to make first?
When you're making a userlookup, what part do you make first? Well, that depends on whether it's a userlookup that you know will work, or one you have to figure out as you go along.

For a fairly simple layout, like my banner userlookup, I would start out straight away with graphics and backgrounds - it allows you to get a proper feel for how the layout will look and adjust accordingly.

For a more technical layout such as this one, you should do the complicated part first. Otherwise you run the risk of putting in a lot of work, only to find out at the end that your layout idea isn't possible and you have to scrap it (I did that once with a three month bespoke software project - it was a rather horrible discovery). That's why for this layout, we've built the pets completely before we touch the rest of the layout.

Of course, anything on this page is guaranteed to work - so you could take the steps in pretty much any order you like!
Set the full body background. This one is a subtle grey background from TKM Backgrounds to keep all the focus on the pets rather than distract your visitors with flashy graphics.
Set the background for the navigation div, and center the links inside it.
Style the navigation links and their hover appearance. I've gone for very simple links, using only shades of grey (and never very dark grey at that). This, combined with the small font and the lack of capital letters in my links, give a fairly sleek and minimalist feel to the layout.





Shown hovering over the Customisation link

Step Six: Content Modules
Set the background of the content modules (taking care to exclude the userneopets section), and give each one a thick bottom border. We could specify the borders separately for each edge of the content module, but I find it's quicker to remove them all then add the bottom one back in.
Set the height of all modules on the first row.
Set the width of the userinfo module, and set the height of the content to be a bit shorter than the full module. This brings the icons up to sit above the base rather than exactly on it - and also stops Internet Explorer pushing them down outside the content module.
Shift both the usercollections module and the usershop module left a bit, so that they form one continuous band with the userinfo module rather than three separate blocks.
Shift the shopkeeper image down a bit to make it more central in the module.
Stretch the usertrophies to fill the full width of the userlookup. Because of the way the tables are set up, this makes the layout wider than 1000px and causes the shop module to overhang slightly; hiding the overflow on the main div crops off this spare bit and makes everything line up neatly again.
Style the headers.

text-transform: uppercase puts the whole title into capitals (other options for text-transform are lowercase and capitalise, which remove all capitals or capitalise the first letter of every word).

letter-spacing puts some space between each letter, making the words take up more space without using a larger font. It's fine to use in titles, but don't be tempted to space out letters in normal text too much - it's a bit more of a strain for our eyes to read.

Change the bold text to be normal, and add some colour (again, shades of grey) to the links.





Finished


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.


Scarab tutorials

A less complicated version of the all my pets full userlookup, this one adds all pets to the top of the layout but does not have the stats visible when you hover over them. There's space for ten pets per row, so twenty pets in total - all of them, if you don't have premium!


Userlookup Structure
There are four parts to this userlookup:
  • The body
  • The pets
  • The navigation
  • The content modules
The main and content divs are there, but not visible. They do provide the underlying structure for the content modules, which are in their natural positions - all we've done is shift them over a bit to account for the modules we've taken out.

The pets and navigation are not given any positioning; this is where they naturally sit in the userlookup. Because of this, it's important to put the navigation links after the pets in the code, or the two sections will swap over to have the navigation at the top and the pets underneath.

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.
I've hidden the habitarium, neohome and ncmall album for appearance purposes - I think this simple style of userlookup looks better when it isn't too cluttered. Given that we haven't changed the positions of the content modules much, it would be simple to add these back in if you want - just remove them from this display: none block and adjust the margins and widths of the other content modules to fit.
#footer
This removes the footer from the userlookup

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

#habitarium, #ncmall, #userneohome,
These remove sections of the userlookup we don't want to display.

.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 and in the pets div that will hold our side account pets. Because I'm not using bold text in the pets div, I haven't specified #pets b to be visible.


Remove borders and backgrounds from everything, giving us a completely blank userlookup to play with.
Step Two: Backgrounds, Borders and Colours
Set the background for the page. I got this lovely blue one from bgrepeat.
Set the width of the main div and give a margin.
margin: 10px auto is shorthand for margin: 10px auto 10px auto (which is itself shorthand for margin-top: 10px; margin-right: auto; etc). You can use the same shorthand for borders and padding.
Set the background and borders for the content modules. The border colour has been picked from the background image.

It would be easier to apply this code to the content modules rather than to every module individually, but unfortunately this won't work. The content modules are outside the #userinfo div, #usercollections div, etc - if we apply the background and border to the content modules, then they won't match the divs when we resize them a bit further down.

Change the bold text to be normal, and add some colour (again, shades of blue picked from the background) to the links.
When picking colours for a layout, try not to pick fresh ones each time. Instead, form a colour palette with a dark colour, medium colour, light colour, etc, and reuse these - it helps keep the layout looking harmonious.





Step Three: Content Modules and Headers
Set the height of all modules on the first row.
Set the width of the userinfo module, and set the height of the content to be a bit shorter than the full module. This brings the icons up to sit above the base rather than exactly on it - and also stops Internet Explorer pushing them down outside the content module.
Shift both the usercollections module and the usershop module left a bit, so that they form one continuous band with the userinfo module rather than three separate blocks.
Shift the shopkeeper image down a bit to make it more central in the module.
Stretch the usertrophies to fill the full width of the userlookup. Because of the way the tables are set up, this makes the layout wider than 1000px and causes the shop module to overhang slightly; hiding the overflow on the main div crops off this spare bit and makes everything line up neatly again.
Style the headers.

text-transform: uppercase puts the whole title into capitals (other options for text-transform are lowercase and capitalise, which remove all capitals or capitalise the first letter of every word).

letter-spacing puts some space between each letter, making the words take up more space without using a larger font.
It's annoying, but we have to use both content module header and content module header alt because Neopets uses the first for the userinfo module and the second for all other modules. This would have been a perfect opportunity for them to use inline styles instead of creating another class, but alas.





Step Four: The Pets Div
Add the pets div to the block of code giving the content modules their background and border.
Set the size of the pets div and ensure all pets inside are central aligned. No need to worry about positioning; the pets will naturally sit on top of the content modules. The negative margin (-9px) removes a bit of empty space to the left of the pets module.
Style how the pet images appear. The code on the #pets a section restricts the width of each pet and styles the text, while the code on the #pets img section gives each pet image a background (only visible for pets without one of their own) and centers the pet image in the link.
Scope
The scope of a piece of code refers to the area it is 'active' in - for example, which parts of a program something can be accessed from, or which part of the webpage a block of CSS styles are applied.

By setting #pets img we are restricting the scope of our img code to be only img that are found in #pets. We could restrict it further by specifying #pets a img - that would be only img inside link elements that are found in #pets. I haven't used this here because I don't need to; #pets img picks up all my images without needing the extra restriction of adding a.

What you can't do on Neopets is to specify something like all img which are not in link elements. If you wanted something like that, you'd need to give all of these images a class, then set your selector to be #pets img.not-a or similar.
Put this outside your style tags

Set up the pets div. The header is given the same styling as the content module headers for uniformity. I've only put one pet in here (there are ten in the progress screen shots), but put in as many as you like - if you go over ten, the pets will wrap to the next line and push the rest of the content down. This is benefit of not being absolutely positioned!





Step Five: Navigation
Position the navigation div. The margin code applies a top margin of 10px, to separate the navigation from the pets div, and a left margin of -9px so the the left edge of the navigation lines up the userinfo div.

All colours used in the navigation have been colour picked from the background.
Style the navigation links.
Float vs Inline-Block
A couple of years ago, it would be normal to use floats for each link to make them display in a row, as display: block puts each element on a new line. Floats worked adequately, but they are not actually designed for layout building - it's very difficult to center floated elements, and they can cause problems if not properly cleared. Try to use display: inline-block instead for layout purposes.

Put this part outside your style tags

The Neopets navigation links. Note that we haven't specified in the CSS whether this goes above or below the pets div; that's determined by the position of the links in the HTML code. If you'd like the pets on top, put them first - if you'd like the navigation on top, put that first.





Finished
Scarab tutorials

This tutorial will teach you to make a simple petlookup with navigation at the top and a space to write about your pet below. I've called it a banner lookup because you can put anything you like behind the navigation links; I've chosen to leave a white background and just put the name of my pet below, but you could easily add an image banner in.


Petlookup Structure
The petlookup is made up of four main sections:
  • The body with the background image
  • The header banner and navigation links
  • The content modules
  • (not shown) The about your pet section
The header is actually in two parts; the image is part of the background for the main div, with the links and dropdown navigation laid over the top of it but actually part of the header. Why we've done this will be explained further on in the code, but it's primarily to make it easier to hide all the adverts in the header.

The about your pet section has had no styling done to it - just write whatever you'd like outside the style tags, and it'll appear below your pet's stats just as the normal description would if you hadn't made a layout.



The banner used in this tutorial is 750px x 120px. If you want your graphics to match my code perfectly, then use this template (right click and save as to download as a png):






Step One: Removing Things

#footer, .sidebar, #ban
Remove the footer, sidebar modules and the background banner of the header. Why the background banner is it's own thing and not controlled by the header itself, I don't know; it's annoying, but easy enough to deal with.

.contentModuleHeader, .contentModuleHeaderAlt
Remove the headers from each section. You can leave this out if you wish, but be aware that the Description header cannot be removed without also removing the other headers.

.contentModuleContent td img
Remove the images in the pet's stats, including the star rating, fishing image and battledome image.

.content div a img
Remove the question mark after your pet's name.

Hide the header and all it's contents. We'll make the links work again later on, but for now they'll be disabled.
We could do here what I've done in the banner userlookup tutorial and just remove parts of the header that we don't want rather than removing the whole thing; I wanted to show you both options - whichever you use is up to you!

Hide the large text of your pet's name at the top of the lookup. This won't affect any text in the stats or the about me section, unless you use divs in your description. If that's the case, then make sure to set #about { font: 12px verdana !important; } to ensure that text displays.

Remove backgrounds and borders from everything except the main div.





Step Two: Borders and Backgrounds
Set the whole page background. I'm using a large image background from Silent Serentity, but you could use a tiling pattern or even a flat colour if you prefer.
To specify the background position, give the vertical position then the horizontal position. You can choose from top, center, bottom and left, center, right, or use pixels to position the background more accurately. Pixels will measure from the top left.
Set up the main div to have a white background, thick border (I've chosen a pink colour to match the flowers in the background), and an image of the header banner at the top. The no-repeat command puts the banner in as a single image and stops it tiling down the page. The margin-top: -10px hides the border across the top of the page.
We've put our header banner on the main div rather than in the header div because the visibility of the header is set to hidden - the banner wouldn't display if we put it there. However, because we've used visibility: hidden rather than display: none, the main div is still pushed down to leave space for the header - and our banner.
Set up the content, and give a bit of space between it and the border of the main div. The content is narrower to allow for this; 750px + 15px (left margin) + 15px (right margin) = 780px, the total width of the main div.





Step Three: Navigation
Make the navigation section visible and position the links over the words in the banner.
Hide the images of the words, but make sure that the links are still clickable.
If you left this with just visibility: hidden then the drop down menu would appear on hover, but the words on the banner wouldn't be clickable. Unfortunately, this is what happens in Internet Explorer even with the display: block included.
Change the background and border colours of the drop down menu. I've stayed with the pink theme; the darker pink for the border is the same colour as the border of the main div for consistency.
Style the text links of the drop down. The !important is needed here because of the way Neopets has structured their code - if you leave it out, the dropdown links may ignore your code.




Shown hovering over the Community » Neoboards link

Step Four: Finishing Touches
Resize the large pet image and put a bit of space between it and the petpet section below. You don't need to worry about shrinking the stats section; it will automatically resize to accommodate the new pet image size.
Set the bold text and links to be a pink colour, again using the same pink as the borders of the main div.
There are four states for a link. These are link, hover, target and visited. We could specify a:link, a:target, a:visited in the first block of code, but it's easier to cover all states with just a and then adjust the hover state in the second block of code.

For those that are curious, link is the default state, hover is when the link is being hovered over, active is the link the moment it is being pressed, and visited is a link the user has previously clicked on.





Finished
Scarab tutorials

This tutorial is for a lovely and clean petlookup style, one that I think works best with a very limited about me section, but will also work if you have more to say. Here you'll learn how to use and abuse negative margins in a way that you really shouldn't. Don't try this at home kids, but on Neo? Needs must.



Step one: removing things

#footer, #header, #ban, .sidebar
Remove the footer and the header, the sidebar modules, and the background banner of the header. Why the background banner is it's own thing and not controlled by the header itself, I don't know; it's annoying, but easy enough to deal with.

.contentModuleHeader, .contentModuleHeaderAlt
Remove the headers from each section. You can leave this out if you wish, but be aware that the Description header cannot be removed without also removing the other headers.

.contentModuleContent td img
Remove the images in the pet's stats, including the star rating, fishing image and battledome image.

.content div a img
Remove the question mark after your pet's name.

Hide the large text of your pet's name at the top of the lookup. This will also hide the text in our navigation and about me divs, so the second part of the code unhides the text in those. You will need to add in any other divs you are using as well to make sure the text is visible.
This is the danger of the !important keyword - because we used it to hide the text, we need to use it again to override that and show the text. Using multiple !importants like this is not good practice; try to avoid it.

Remove backgrounds and borders from everything.




Step two: backgrounds and base structure
Set the full body background and remove the margin applied by the captcha. This background's from Beetle's own background page, just for a change. I've set the background to be fixed so that it doesn't move when we scroll; the benefit of this is that we don't see the join where the background repeats itself.
Set the main div to be full width and have a white background. The margin-top pushes down the div so that we see a strip of the background as a header; restricting the height and adding a margin-bottom leaves a strip for our footer at the bottom.
I know the height I need because I've made this layout already, but you will probably need to adjust this once you've written the about me part.
Restrict the width of the #content div and center it on the page.
We could have put our header in the #header div like we did with the banner pet lookup. I've used the background instead because then I can use the same image for the header and the footer rather than creating separate banners for each. Very economical, me.



Shown scrolled down the page so you can see the footer effect

Step three: Move things around and styling the stats
Make the pet image larger and use negative margins to pull it up and outside the #main div. The margin shorthand reads top: -250px / right: 50px / bottom: -30px / left: 0px.


Negative Margin
Negative margin is a bit tricky to get your head around, because it does one thing to the top and left and another thing when applied to the bottom and right. Top and left, it shifts the image in that direction - so here, we're moving the pet image up 250px (and 0px left). But bottom and right, it pulls everything else towards it - so the bottom: -30px is pulling our petpet up underneath our pet picture. Not a huge amount; just enough to hide the Aethelar has a petpet text, because I decided I didn't want it there.

What's hacky about this?
Well, we haven't got to the truly disgraceful bit of code yet. But the main issue here is that we've pushed the pet picture so that it sits outside our #main div. This is technically valid, but people don't like it because we could end up cutting part of the image off. Try adding #main { overflow: auto; } and you'll see we lose the top half of our pet picture.


Remove the gap between When meeting others and the next line of the stats with Age
Put the petpet's name on a new line (purely aesthetical this, but again, I like the effect)
Introduce a bit of space between the trophy images. This will also affect any images in your about me div - if you don't want the space there, then make sure to add #about img { margin: 0; } to remove the spacing.

Add some styling to the font. #444 is a dark grey colour; it doesn't make a big difference, it just softens the layout slightly compared to black font.

We apply this to td rather than to body because tables are tricky and don't inherit style properly - it's always best to style a td directly rather than style a parent element like the body tag.




Step four: navigation
Now this is where margin abuse comes into play. The petlookup is structured so that everything you write in the description actually goes into a single table cell. Usually that's fine, but it has one big issue: we can't absuloutely position anything from inside a table cell. We could put our navigation across underneath the beauty contest images just fine, but if we want to lift it up to sit by the banner, we can't.

Fixed positioning is the only option that would work - but then the links wouldn't scroll. So we use this massive negative margin to lift the links up above where they should be instead.
Bear in mind that if you have a different number of trophies for your pet or if you don't have a petpet, you may have to lift your navigation by a different amount. That's one of the downfalls of negative margin - you have to keep updating it relative to the rest of the layout, which is a bit of a pain.

For the links themselves, I've kept it sweet and simple with text links - but if you'd rather go for button style links then do so.

And outside your style tags, put in the links themselves. Remember to update the links to go to your petpage and your neomail!
«a href="/"» leads back to the Neopets homepage - the / stands for the root index file.





Step five: about me and artwork
Because we used a negative margin on the nav div, we've not only shfited that div up - we've shifted that and everything that comes after it up. So to get our about div back where it's supposed to be, we move it down by the same amount.
Reason number two why this is such bad practice - we've now covered the entire stats section with margins. If you needed to click on links in the stats section this would be A Bad Thing. Luckily we don't need to.

Position our artwork div below our about me section. Because we set a height on our main div back in step two, this is now outside the main div and sits in our footer section. The 150px auto for the margin sets 150px top and bottom and centers the image horizontally. The extra bottom margin will push our footer to be bigger.

The overflow: hidden will be used to crop our image into the circle shape we want.

Apply margins on our artwork to move it around so that the part we want will be visible. The picture I'm using is approximately 420px wide and I'm showing a 300px circle view of it, so this makes sure I've got a good focus.

Put your about div outside the style tags. I've decided not to write anything in it, but I still have to include the div to make the margns work. You can include anything you want - but remember to adjust the height of the main div so that there's a white background behind the about div.

Just like with petpages, we need to put the border-radius as an inline style or it'll get stripped out by the filters. Make sure to put the border-radius on the petPic div and not on the image itself.

I'm using an image from my art page - if you don't have an image, you're welcome to use one of my adoptables for this part! Because they have a transparent background, it would look nicer to set a background colour on the petPic div.




Shown scrolled down the page to view the footer and round artwork image


Finished
Scarab tutorials

A basic anchored layout to get you started with your layout making. The principles here can be applied to just about any anchored layout you want to make; once you know how to get the multiple pages working, you're good to adapt and modify! The banner image I'm using for this one is just the base image, the text is written in the code and can be changed to anything you want.


Step one: removing things
Hide the Neopets banner across the top of the page and the copyright text at the bottom. Neither of these are visible when you preview the page so it's easy to miss this stage out!
Make sure that any font or td tags in the layout itself will display properly. Our entire layout will be wrapped in the .main class which is why I'm using that here - swap this out for another class or ID if you're using something else.
We use font instead of .sf to hide the copyright text because the .sf class isn't used when viewing the page in some other languages.
Step two: basic shapes
Set up your (very) basic page structure. Unlike the userlookups where Neo has done this for us, we're working with a blank slate - it's important to have a clear idea of how the building blocks will go together. I find pencil sketches really useful for this stage!
We're using auto margins to center our layout, which means we need to specify a width on .main. The way we've written margin here is a shorthand; what it means is margin-top: 30px; margin-right: auto; margin-bottom: 30px; margin-left: auto; - but this is quicker.

Unfortunately, Internet Explorer doesn't listen to the auto margins, so we have to set text-align on the body as well to make this centered in all browsers. (Even though a div like .main shouldn't be affected by text-align at all, but you know. That's just how IE rolls.)

Set up the relative heights of .header and .main. By setting the width to be the full width of the .main div we make it easier to change - if we want a narrower or wider layout, we now only need to update the width of .main and everything else will resize automatically to fit. Handy stuff.
The total height of our layout is now 800px, which is taller than most screens. We have to be careful here - if our layout is too tall, then our navigation could be scrolled off screen when we navigate between sections. It sounds minor, but it's a major pain and best avoided.




Step three: the header
Again, set up your structure here. We've got a title and some navigation in the header, and I've decided on six links. I always do - don't know why, but you can easily change that around!
Banner as an image or a background?
There's two ways of adding text to a banner. If your banner is the right height and width, set it as the background and position your title on top. If you don't know the size of the banner, or if you need to resize it, then it's easiest to put the banner as an image, and pull the title text up with negative margin to sit on top. It's easier to resize - or add borders etc - to the banner when it's an image rather than a background.

I've made this header to match the layout exactly at 900px x 350px, so I'm setting is as a background.
Style the title text. The most important thing here is the padding-top which we're using to push the title down and sit in the right place on the banner. In theory, we could apply this padding to the header and it would work the same - but don't do that. Firefox and Chrome disagree about padding; you're header will be two different sizes in each browser.

We're using inline-block to make our navigation links sit next to each other. This has one drawback; inline-block listens to whitespace - ie, if there are any spaces between the links in the code then there will be spaces between the links in the layout. This hides the spaces and makes sure the links sit next to each other. If you use this, make sure to specify the font size of the links themselves otherwise they won't show up either!

Style the links. This is fairly straight forward, but a couple of notes:

display: inline-block makes our links into blocks rather than text links; we can now use margin, padding, height and width. The inline part keeps them sitting next to each other on a line rather than putting each one on a new line. It also means that the links will pay attention to the text-align code, so they're very easy to center.

text-decoration is the underline which we want to remove.

#aaa is a colour shorthand - it stands for #aaaaaa. The hover colour can't be shorthanded, so we have to write that out in the full six letters.

We haven't set a height on our link elements - instead, we're using line-height. This works for one line of text to make sure that the link will be 39px tall, and that our text will be vertically centered within the link. Neat.



Shown hovering over the "Two" link

Step four: setting up the anchored pages
I included a section under the anchored userlookup explaining how multipages work. Rather than copy and paste it here I'm going to send you up to read it, because I'm lazy like that.

Back? Good.

Our basic setup - six pages inside a wrapper, which here is out content div. We use the ID of each page as the location of each of our navigation links. We could create an anchor by typing «a name="one"» but this uses less lines of code and is neater.

Again, it doesn't have to be six pages. You could put any number here - just make sure you haev space for all that navigation!
We're using our content div to act as the wrapper here, so we need to hide the overflow on that.
Set up our scrolling pages, the full size of the content area. The margin-bottom is actually optional; it's designed to make sure you only get one page visible at a time, but the layout will work just fine without it.

And that's it! There's nothing to see so no preview screenshot. Just put a bit of dummy text into each page and check that your navigation works, and put a whole load of new lines in the make sure everything scrolls as it should. Anchored layout made easy!
Step five: styling the content and finishing touches
Set the font style. I really like increasing the line-height; I think it makes things look cleaner, but you can leave that out if you like.

We could just as easily put this code on the content class instead of page, it makes no difference at all.
I mentioned in step three that padding is tricky because it appears differently in different browsers. To avoid using it here, we create a second div and set the margin - because margin displays properly. By layering this inside our page div, we create the same effect as padding without any inconsistencies between Chrome and Firefox.

Style the headers, links, and bold and italic font for each of our pages. I've gone for a style that matches the page title style here for the headers, and I've kept my colour palette in the greys to match the greyscale colour scheme.

Note that we've scoped most of these so that only the links, bold and italic font inside the .page div is affected. This is done to avoid messing with any of the links in the navigation, or if you'd used bold or italic font in your title to avoid messing with that. It's good practice in general to tie code into a specific area of the layout like this, because it avoids a lot of confusion when you later create a sidebar and forget that the bold text will be put into small-caps, for example. Of course, if you want these styles to apply to bold text everywhere on the page then just put b and leave off the .page

And also note that we've had to specify that the i tag should be italic. That's because the command to be italic falls under font - when we change the font, we reset everything to default and then apply our new style on top. This resets the italic for font-style to the default normal font and we have to bring the italic back in.
Set up your padding inside the pages, and test out the header, bold, italic and link styles to make sure you like them.




Finished
Scarab tutorials
I'm fed up with my speech marks disappearing on me
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. Luckily, I have two solutions for you:

Option 1

Add a space between your angled brackets and your quotation marks. A regular space will be stripped out, so use the character code instead:

«b» & nbsp; "These quotation marks will show up!" & nbsp;«/b»

The code stands for "non-breaking space", but in my head I say "and now blank space". Remember to type as all one work, without the space just after the & sign.


Option 2

Use the character code for the quotation marks themselves. You need to encode the & as well, or your speech marks will appear when you preview the page but be stripped out when you save.

«b»& amp;quot;These quotation marks will also show up.& amp;quot;«/b»

These will appear as & quot; when you preview, then as speech marks when you save the page.

This option gives just the quotation marks without any extra spaces - very useful for dialogue where the quotation mark is at the start of a new line. However you will need to put the character codes back in every time you save the page, which can be a bit of a pain. Find and replace is your friend.

Scarab tutorials
Finding or building urls for your pet images
There are two kind of pet image urls; static urls which will always point to the pet in that customisation, and live urls that will display your pet as they currently appear, in their current customisation.


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

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

Your mood options are:



And your size options:
1.

2.

3.

4.

5.

6.

7.

Scarab tutorials
Using custom shields or icons on your userlookup
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
Done!

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.
Scarab tutorials
lets 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 not 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 used to 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...

Scarab tutorials
the «center» tag is depreciated, please don't use it
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 depreciated, 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 absolutely positioned. To fix it, you need to add these lines of code:

Scarab tutorials
Using ratios for full screen layouts
A while back I was trying to code a layout that relied on a percentage value of margin-top to position my divs. I discovered to my dismay that the percentage didn't work at all how I expected:

Margin-top and padding-top are calculated as a percentage of width, not as a percentage of height.

I admit, this made no sense to me at the time and caused a fair amount of frustration. But it actually has some fabulous uses for flexible layouts that expand to fill your screen.

First though, a quick alternative for anyone looking to use a percentage of height instead: set position: absolute; then you can use top: 100%; and it works as expected.


Creating our full screen background graphic

A very common style of petpage is one that uses a base image like the one below, where the content area is marked as part of the background graphic. What we want to do is make the graphic the full width of the screen, but make sure that our content text is always sitting inside our content area.



borrowing the layout for my maraquan gelert's page

There is a CSS property called background-size that would be ideal to use here, but unfortunately Neo blocks that one so this is the code to set our layout image as a full screen background. Note that we only set the width and not the height to avoid stretching our layout out of proportion.
This code sets our image to be the full width of the screen, starting from the top left corner, and with a z-index of -1 to sit behind the rest of our layout. Graphics ready, time to get the content area in place.

Positioning our content area: using margin-top to locate a fixed point on our flexible-width graphic

The standard method of positioning our content area here would be to use position: absolute to pin the top left corner in place. We can't use pixels here, but we can certainly use percentages to position the left hand side. To calculate what percentage we need, we first create a layout with the background at it's natural size and position the content on that. When I do this, I get values of top: 190px; left: 540px; for the content area. The background graphic itself is 1600px wide, giving me a percentage of 540/1600 is 34% (to the nearest whole number).

For the top value, we are again taking our percentage value relative to our width. If we tried to take it relative to our height, we'd run into problems on screens that are a different ratio - like a tablet screen or a phone, for example. We've specified the width of the graphic, so everything else must be relative to the width. Our percentage is then 190/1600 is 12%. Remember to set this for the margin-top value!

Sizing our content area: creating a box with a fixed ratio

The first thing we need to do is find our ratio for our content area. Exactly the same principles apply - use the natural dimensions of the layout to work out the original pixel width and height, then apply maths as follows:

ratio percentage = height x 100
width

So here, the pixel values that work are a height of 520px and a width of 730px, giving a ratio of 520 x 100 / 730 = 71%. To make the content area match the layout graphic above, you'd use 71% as the padding value in the code below. Now, enough maths and back to the CSS!

Why not use percentages like we did for the position? Why use ratios?
If we could set the position of the bottom right corner, this would be fine. And we can certainly calculate the distance from the right hand side of the screen - but the whole issue is that we don't know the height of the screen, so we can't set a percentage distance from the bottom of the screen. How we fix this is to use padding, as giving padding a percentage value will calculate it based on width. Our solution is this:
  1. First, set the content area to the width we want it to be, but don't specify a height.
  2. Second, create a ratio div inside the content area that pushes it to the right height.
  3. Third, create a content div that we can actually write in, positioned so that it's the same size as the ratio div.
Which, when we code it all together, looks like this (leaving out the content area position to just focus on what we need for this part): Where did we get the 47% from? By doing 730 / 1600, which was the width of the content area divided by the full width of the layout.

And voila! That should be it - a content area that resizes itself to fit the background image, no matter how big your background image is. Don't believe me? I've used the same method on the box below - try resizing your browser to see it change size!


Size changing square!
Scarab tutorials
Using a clipping div to 'crop' an image with css
About six months ago (edit: hah, more like 18 months ago now) 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.






Scarab tutorials
removing the 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.

Why?

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 these lines 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.

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

But.

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! Now you can completely control the spacing of your divs by setting the margin, and not worry about any pesky whitespace creeping in!
Scarab tutorials
Adding in comments that the filters won't remove
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.

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. You can use the same technique for comments in your CSS:

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:
Scarab tutorials
Making the trophy section line up with the other sections
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?

TABLES

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!
Scarab tutorials
fading an image on hover to reveal text underneath
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.







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.
Scarab tutorials
dodging the capchas to view the source code of a lookup
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!
Scarab tutorials
stacking and layering parts of a layout with 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. 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!
Scarab tutorials
CSS selectors 101 aka what the hell are these
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! Currently, you can only use asterix' on guild layouts - they get filtered out of petpages.


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. Occasionally multiple classes will be accepted, but it's safer to assume that you can't use them. I end up with a lot of classes like big-left or tall-yellow when I want to apply multiple styles, or else nesting «div class="big"» «div class="left"» «/div» «/div» to get the code from both applied.

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 or a script to hook into. 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!

Scarab tutorials
CSS selectors II aka why the hell is this doing that
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 Kills Me and Lolwhut) 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.
Scarab tutorials
Three ways to build column layouts and one to be aware of
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

Beware:
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.

Beware:
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.

+ 1. 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.

Scarab tutorials
rounded corners and circular images with border radius
Border-radius is a fabulous code that allows you to give things rounded corners. 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 something 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!
Scarab tutorials
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.

Scarab tutorials
most problems with floats can be solved with proper clearing
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.


{ 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!



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.
Scarab tutorials
removing the petpage paraphenalia from your layout
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!
Scarab tutorials
a beginners introduction to your graphics toolbox
This guide is exactly what it says - a beginners introduction. It will introduce you to the main options you have when editing a graphic (editing the light, the colours and using textures) and give you some ideas for some simple effects to try. Once you're familiar with these and know a little bit what you're doing, it's time to graduate to the master classes and put your knowledge to work with Jewlz' graphical layout walkthroughs:

A recommended set of layers to work with

The layer structure of your graphic will vary according to what effects you use, but this is the basic outline I always use:
  • A copy of the original image on a hidden layer
  • The background visible behind the graphic
  • The clipping group that acts as a mask for all the layers above it
  • The base layer of the graphic itself
  • The graphics effects
  • Any final details and text
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.
using levels to adjust 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 channel selector allows you to adjust levels for a single colour (red, green or blue) or all together. Here we are adjusting all colours.
  • The eye droppers are used to specify a true black, grey and white. These are mainly for removing a colour tint in a photo; we won't be using them here.
  • The output levels limit the image's lighting. Lowering the maximum or upping the minimum will reduce the overall contrast in your image.
The tools that are most useful for graphics are the remaining three arrows:
  • The left hand arrow controls the shadows. Move it right to make dark areas darker.
  • The middle arrow adjusts overall lighting. Move it left to lighten the image and right to darken.
  • The right hand arrow controls the highlights. Move it left to make light areas lighter.


Increase minimum output

Decrease maximum output

Move left hand arrow rightwards

Move middle arrow leftwards

Move middle arrow rightwards

Move right hand arrow leftwards

using layers to adjust Colour
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 and fill with your chosen colour
  3. Set this layer to overlay
  4. Reduce opacity 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 and fill with your chosen colour
  3. Set this layer to colour
For a colour tint instead of a full colour change, lower the opacity of your colour layer. Beware - 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.
some combined Layer Effects to get you started
When I started learning to make graphics, there were one or two effects I knew that I used and abused without mercy. 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
four different ways to apply 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.

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.
Scarab tutorials
turn a wearable garland into a tiling float
The first stage is to get your base image that you want to tile. The most popular source of base images for graphics are the SWF images from the wearables, which allow you to zoom in without the details going fuzzy. To get the SWF image, follow the steps below and screenshot the area of the image that you need for your graphic:
  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.




Once you have your image, you need to tile it. A tiling background is one that repeats seamlessly, either horizontally, vertically, or in both directions. Some images are easier to tile than others; the background image in the SWF example above 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:





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.



Scarab tutorials
bypassing the filters for innocent words
Some words should be filtered out, I acknowledge that. However, sometimes my skilled character wants to look out the window at the crackle of lightning in the sky, and skils, win.dows and cra ckles are not at all what I'm after. Luckily the solution is very simple:


Add an empty tag in the middle of the word to break it up invisibly. For example: ski«i»«/i»ll or gra«b»«/b»pe.

Be aware of any styling you've applied to your bold or italic tags, as that may interfere with your word - try a different tag style if this is the case.

And that's it! Easy.

Scarab tutorials
Making a scrolling div with an invisible scroll bar
Invisible scroll bars are gaining popularity; they're a neater, prettier alternative to the traditional div with a scroll bar attached. To use them, either click into the div and use your arrrow keys, or hover over it and scroll with your touchpad or central mouse wheel. Do be aware that for some users this won't be intuitive - if it's not obvious that your div scrolls, it may be wise to add a quick note to it.

The structure for these uses three layered divs:
  1. A wrapper div that is the size of your final scrolling area, with the overflow set to hidden
  2. The scrolling div, 30px wider than the wrapper - the scroll bar will be off the edge of the wrapper and thus hidden
  3. The content div that's the same size as the wrapper, to make sure your content doesn't go outside the wrapper and be hidden like the scroll bar is
Putting this together in code: Notice that we haven't specified a height for the content div - this will match the height of the text, and any height above 100px will be what forces the scrolling div to scroll.


I wasn't sure what to put in this scrolling div as an example, so have a poem for your reading delight.

Roses are red, violets are blue,
some poems rhyme,
others don't.
Scarab tutorials
Two methods of quickly recolouring a background
You find the perfect background pattern, but the colour is awful. Like. Yuck. What do?


The very quick recolour

Open your background in your image-editing software of choice (so long as it has layers and layer styles, we're golden). Create a new layer above your background and fill with your new colour. Mess about with layer styles until you find an option that works well - consider overlay or colour as handy starting points.

This option tints the whole background with your new colour, and works best for patterns which start with a single colour or a set of very similar colours.

The other very quick recolour for multicoloured backgrounds

If you have a patterned background which uses multiple colours, you can find it hard to preserve the contrast if you try and use a single colour to tint it as above. Instead, we're going to change the hues of your picture by shifting the whole lot at once.

Open your background image in your image editing software of choice, so long as it lets you mess with hue and saturation. Find where these options are - adjustment is a good menu to try looking under - and bring up the slider menu. The norm is to have three options; one for hue, one for saturation, and one for lightness. I'd recommend adjusting the hue, then perfecting with the saturation, and probably not using the lightness.

By using the slider you're shifting all colours around the colour wheel - so if your purples become yellows, your reds will go green and your blues will be orange. A completely different set of colours but keeping exactly the same contrast as you had before.



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-2018.
® 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