Welcome to Behind the Layout, also known as BTL or simply Beetle Tutorials. Here I hope to provide you with what you need to make your own layouts, whether by following one of the walk through tutorials or by designing your own from scratch. Everything here is designed for your benefit; please feel free to take it, change it, frankenstein a completely new creation out of it - it's all there to be used!

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

Updates
Using This Guide
This guide is not designed to teach you CSS and HTML from the very start; scroll down to the recommended sites section for some pages that will do that. Instead, the guide will hopefully show you how to put together layouts.

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

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



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



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

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


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





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



Step One: Removing Things

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

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

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

.sf
This removes the event notifications

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


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

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

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

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


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



Progress update:

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

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

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


Progress update:

Step Four: Navigation

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




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

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


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

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


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


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


Progress update:

Step Five: Content Modules

Remove the border around each content module.







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







Change the colour of the links in the content modules.

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



Progress update:

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




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

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


Progress update: Complete!

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



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

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

The code structure to make this work looks this:


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


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

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

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

Step One: Removing Things

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

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 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.
#header
This removes the header from the userlookup, including the Neopets navigation, time, user information, and event notifications. We'll be creating our own Neopets navigation to replace it later on.

#footer
This removes the footer from the userlookup

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

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

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

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

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


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


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

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

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




Why not use absolute positioning on the content div?

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

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

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


Progress update:

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

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

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


Put this part outside your style tags

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

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

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


Progress update:

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

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



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

Progress update:



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









Put this part outside your style tags

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


Progress update:

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

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

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


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



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



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





Remove backgrounds and borders from all content module sections.

Progress update:

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




Change the colour of the links on the page.

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



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






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






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



Put this part outside your style tags

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

Progress update: Complete!

The Final Code


NB - The petpage filters are slightly different to the userlookup filters. In order to post this code, I've had to replace the angled brackets around the style tags with round ones - be sure to change them back in your own code.
Changing Pet Images on the Userlookup












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


You don't need to know anything about graphics editing, but a basic knowledge of how to use layers is assumed. Most graphics editors with layers will work fine; I use Photoshop Elements, but if you don't have this, then I recommend Gimp as a good free alternative.
Basic Structure
The layer structure of your graphic will vary according to what effects you use, but this is the basic outline I always use: Keeping an untouched copy of the original image is vital; I can't tell you how many times I've wanted a new layer to create a new effect and realised that all my layers are partly erased or changed in hue so I've got nothing to take a copy from.

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

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

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

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


Increase minimum output

Decrease maximum output

Move left hand arrow rightwards

Move middle arrow leftwards

Move middle arrow rightwards

Move right hand arrow leftwards

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

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

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

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

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

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


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


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


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


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



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



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



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



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



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



Which gives us:





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







Sitely
Many thanks to the members of Verbal Tea for their feedback and suggestions for this guide. I'd never have got it this far otherwise!

Recommended Sites
SWFs and Graphic Resources
Backgrounds and Web Resources
CSS and HTML Resources
Credits



Heads Up! You're about to leave Neopia!

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



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

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



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

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



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

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions