Introduction
Base Code
Background
Main & Content
Fonts
Header
Footer
Images 101



F.A.Q.
Sitely
Gallery Directory
Back to Neopets

Layout, content, and coding by me, Calli. No touchie!
Want to try making your own gallery layout, but don't know where to start? Hopefully this step by step coding guide can get you layout making in no time.

This guide can be used as a "fill in the blanks" sort of thing if you have no interest in learning code. Each section includes an explanation about the code in question, so if you are curious why you are doing something the answer is (hopefully) there. If multiple versions of a code are listed, you can compare them and see what makes them tick.

For now, just the basics are covered. "Advanced" pages will be added as I have time to write them.

If you are clueless about finding, making, and uploading images for a layout check out Images 101 before continuing with the rest of the guide.

See what other people have done with this guide in my Gallery Directory. When you finish your layout, fill out the app linked there if you wish to be added.

Feel free to neomail me with any questions. Affie and Lister requests are welcome. Link back buttons are available under Sitely, please link back if this guide has helped you in any way.

Intro is over, lets get started. The gallery description edit page is where you will be doing all of this coding. If you have gallery coding already, save it somewhere on your computer so you can grab anything you want to use later. Once its saved, clear the description. You are starting with a clean slate.
Use the following code to get a gallery that looks like this. You'll be adding images to it. Visit my portfolio page & my Gallery Directory for some finished examples.

Replace the « and » around the style tags with the single greater and less than signs found on the keyboard, unfortunately the new coding doesn't like them showing.

Copy and paste this code into your description box.

I'll get into what to edit in the following sections, but first and foremost, leave the lower section between the style tags alone. Those are the removal codes that make it so empty.

The codes on subsequent pages go between the opening and closing style tags unless otherwise noted. Additionally, the codes can be added in any order (or omitted if you choose to do so.) The order listed is just my logic's preference.
The first thing you're going to add is a background. There are different "styles" you can go with depending on your taste. I will cover 4 possibilities here, choose the one that fits what you have in mind.

The only changes you will have to make are to replace "FULL URL HERE" with the image's full url from wherever you hosted it. I also have the background color set to white (#ffffff) People see this color if your background image doesn't load, or you don't have one.


Style one is a single large image. This image only appears once, so it has to be pretty big. My own gallery Gramineae uses this style. It doesn't repeat and is "fixed" in place. My background-color (black) is visible if someone has a larger browser window than the size of my background image.


Style two is a tiled image. Preferably "seamless" meaning it isn't obvious where the image starts and ends. The size of the image can vary, I prefer medium to large images so it doesn't get too repetitive. Iron Chef Neopia uses this style. It stays in place as you scroll, and repeats.


Style three is another tiled image. The only difference from two is that the image is not fixed in place, it moves as you scroll. This style can be very distracting, and I usually recommend against it. That is a matter of taste though, if you want it this way go ahead. The KeyQuest Gallery (layout by Twitchy) manages to pull it off without being annoying.


Lastly, we have the solid color background. Use one of these if you are going for a simple look, or if you intend on having a fancy background for your main section. Utensil Utopia (layout by Tep) is a picture of simplicity.

Now you are going to work on where your items are displayed, the main and content areas. In the base code gallery this is the white section. You will be editing part of the base code, specifically:

#main{margin-top:0px; width:700px; border:none;} #content{width:700px;}

First, choose how wide you want these sections to be. 600px is about as thin as you can go without running into problems. Also keep in mind that some users have tiny screens, so you can't go too wide. 1000px is the width of the #main section of neopets, consider that the max you want to have.

Once you have settled on a size, change both the #main and #content widths to that number. This will ensure that your items are properly centered, #content holds your text and items. If it has a different size than the #main, the contents will be off center. Much easier to have them the same width than having to code in adjustments.


If you just want a plain colored background for this section, add the following in the #main code, after "border:none;" with the color of your choice.



If you want to use an image, make one the same width as you chose for the coding. Height can vary. Keep the middle of the image simple, so your text and items are nice and visible. On the edges you can draw in a border (possibly much fancier than one you could code here). Make sure that the image tiles seamlessly vertically so you can't see where it repeats.

The usual code for a background in this section has the image moving. Movement will be seen as you scroll down the page with most images (Example: Party Palace). If the image is just vertical stripes you won't see movement with any code, this code is fine to use (Example: Eggy Goodness).

Like before, add the following in the #main code, after "border:none;" changing "FULL URL HERE" to your img.


If you want the image not to move, because it looks too distracting for instance, you can follow the instructions above using this code instead. Sweet Realm (layout by limo8) provides an example with novapops.

Like it or not, there is going to be a lot of text on your gallery page, just from the item names alone. Not to mention anything you decide to type in. You want it to match the layout and be legible.

And who wants ugly blue and purple links. You're beautifying your gallery, you might as well give those a makeover too.

I'm giving you the code first, and I'll explain the whole thing. Most of it can be changed, so have fun.


All the text on the page is black (#000000). If the computer viewing the page has Calibri, the page will use that for the font. If the computer doesn't have Calibri, the computer's default sans-serif font will be used. The font is size 10.

The links on the page that are not being hovered over are white(#FFFFFF).

More links on the page that are not being hovered over are also white.

Links on the page that are being hovered over are grey(#6a6a6a) and underlined.

More links are grey and underlined when hovered over.


CSS Text Decorations
Here are the different options for decorating your links with the code I gave you. These decorations can also be used for normal text (like I did below), but who wants to look at a gallery that is entirely underlined, or worse-blinking? I'd personally stick with the way I have it set up above.

None

Underline

Overline

Line-through

Blink


Websafe fonts
Notice that bit about the font, how there are options? Webpages can only display a font if the computer has that font. So, if you want to specify a font, it is best to try to use one that a lot of people have. These fonts are referred to as "websafe".

There are 5 generic groupings of fonts, described below and highlighted green in the chart. Always specify one generic group, just in case the viewer doesn't have any of the fonts you picked. Listed below that are specific fonts from each group that are estimated to be installed on at least 80% of their respective operating systems, or the three most common in groups with few above 80%.


Serif: These fonts have "serifs", little details on the ends of the characters. Good for print, can be harder to read on computers.

Sans-serif: Without "serifs", considered bad for print, but good on computers.

Cursive: Fonts look closer to handwritten, can have letters that appear to join together.

Fantasy: Decorative fonts, usually look nicer at larger sizes due to being detailed.

Monospace: Each character has a fixed width. An l takes up the same amount of space as a W. Typewriters needed to use this type of font due to how they work.


In the coding above, you can find this:
font-family:'Calibri', sans-serif ;
You can add as many fonts as you want, its not limited to just 2. The order from left to right is the order the computer will try to display them in. Specific fonts need to be properly spaced and capitalized,surrounded by single quotation marks('). Do not put generic group names into quotation marks.

font-family: 'FontThatOnlyAFewPeopleHave', 'CommonWindowsFont', 'CommonMacFont', fontgroupname;

Formatting your fonts like above is pretty standard. You have control over what people see even if they don't have your first priority font installed. If you aren't picky feel free to specify less.

If you want to be super lazy, and not bother lookup up a whole bunch of fonts to see which ones you like best, some people on the interwebs have made "Font Stacks" that work well together because they are similar. I cheated and used one of those for this page. Look how long it is!

The header is probably the first thing people are going to look at when they enter your gallery. In this section I'll cover the coding for a header without the navigation included. Headers with navigation will be covered at a later date.

Mary's Usukis & Usuls has a no-nav header. The chosen image conveys the type of gallery, and has the gallery's name. You can add a short description, and use any kind of font you want because you don't have to worry about websafe fonts when you're dealing with an image.

Make your image the same width as your main. Keep the height under 500px, someone shouldn't have to scroll down to see your entire header. Once you're set and the image is uploaded, you can proceed with the coding.

Find #header{display:none;} in the base code and replace it with the following. Put the image URL where indicated, and fill in the width and height of your header.


You should have something that resembles a gallery layout now! If your images just aren't working well together, edit them. Throwing layouts together is trial and error.
This section is optional. Most galleries don't have footers. You're lucky if someone scrolls all the way to the bottom of your gallery to see it.

In your code, find #footer { display:none; } which was included in the base code, and delete it completely. Put this code in it's place. The following removes all of the ad stuff that's down there while letting you have an image.

I used the space for a credit in Behind the Dumpster. You could leave a goodbye or thanks down there. Or something completely random, its up to you.

As usual, make your image the same width as the main, put the image's url into the code, and fill out the images dimensions replacing the #s in ###px.
There are lots of guides out there for working with various programs to edit images. I'm not going to get into a lot of detail here, just going to hit on some important points.


Places to get Neopets Images
The most obvious place to look is the downloadables section of the Pet Central. Start with backgrounds and look through the other sections. I tend to avoid this section as I have other places to get my images.

The Caption Contest has had some interesting and possibly useful pics. Check out the "Past Winners" page to browse through all the previous pictures.

Your gallery's items (and items in general) are also a good source, use the item pictures to make a tiled background, or as a border on your main background.

Most of the site's content is in Flash, .swf files. These images can be re-sized without losing quality due to the file format. Wearables, games, and plot comics are the most abundant. Ever notice how some people stretch their pet lookup images to almost fill the whole page? They can because its a flash file.

You need special programs to download and edit the actual files. That doesn't stop you from using the images though. Your computer should have a print screen button. When you see something you want to use in a layout, press print screen then paste the screenie into an image program to edit it.

Here's the fun part. Remember how I said the images were re-sizable. If you know the flash file's full URL you can see a rather large version of it, free for the screenshotting. Visit these two pages, and click on some of the items:

Background Bonanza
Lilacia's SWF Collection

Nice, right? Now those aren't all the available wearables, far from it. SWF petpages like those are few and far between. There are ways to get the urls of wearables on your own, but they require either sifting through code, or downloading addons. I don't want to try to explain either of those in a beginner guide.

If there is a wearable not listed on either of those pages that you have your heart set on, neomail me the name of the item and a pet that its currently equipped on. If the item is currently in the nc mall, I just need the name as I can try it on my own pet to get the code. I'll reply with the link.


Editing Your Images
For the purpose of my guide, all you have to do is choose a width and stick with it. You can make your images in MS Paint for all I care.

As for the image format, I recommend PNG. The file sizes are larger than formats like GIF or JPG, but most internet speeds can handle that now. With the larger size, your image quality doesn't get reduced, and partial transparency is supported. Partial transparencies are how I accomplish many of the effects that make my layouts look pretty, hurray for see-through images.

I use GIMP as my image editor. Its free, and has most of the features you can find in photoshop.

You can find guides for specific programs via the petpage directory Soroptimist. The program guides are found in the third column of this page.


Uploading Your Images
Once you've made you image, you need to upload it to an image host to be able to use it in a layout. Here are the image hosts I've used with some comments. I can't provide a direct link, you'll have to find these places yourself.

Bandwidth is basically how many times your image can be downloaded to peoples computers and viewed in a certain time frame, so the higher the better. The ideal image host would have no bandwidth or size limits, and minimal downtime. You can get that, but it costs money. Free hosting should be good enough for your gallery layout.

Photobucket: You have a bandwidth limit. There is also a size limit. Free Accounts: 1MB each or 1024 x 768 resolution. They are a very reliable host. If your images are within the limits, and you don't expect much traffic, go ahead and use them.

ImageShack: Much more lenient bandwidth limits. There is no resolution limit, but 5MB is the largest file size allowed before they start "optimizing." Accounts are optional, if you plan on using them I recommend creating one though to keep track of your images. I have had issues with pictures randomly being deleted, most likely due to exceeding their bandwidth. Servers also tend to go down more than I was comfortable with. Use at your own risk and make sure to keep your files saved on your computer just in case you need to re-upload them.

Tinypic: Tinypic has been bought out by photobucket, so the future of the site is iffy. For now, they are my preferred image host. Accounts are not required, but recommended. If you upload an image without being logged in, it will be deleted if no one views it in 90 days. Images on accounts are safe from this. The max image size is 1600x1600, anything larger than that will be re-sized. That is big enough for most purposes. I have not had any issue to date with disappearing images or exceeded bandwidth.

Once your image is uploaded to the site of your choice, you will be given a bunch of different link options. The one you need to use in layouts is called the something like "Direct Link" or "Raw Image." If you copy-paste that link into your address bar, you should get -just- the image. No indication of what site its hosted on. That is what you need when I ask for the URL of the image in a code. Make sure to copy it completely, you need the full URL.
If you try a code and it doesn't appear to be working as I described, please neomail me, leaving your page with the error as is. This guide is new and some of the codes are untested together. I may have also made some typos in a rush to get this out. I will look at your code and see if there was a problem on my end or yours, then instruct you how to fix it. If the problem was on my end I'll fix that section of the page as well.

Can't have a faq without questions. Mail away, before I start making up questions to answer XD.


How do I make sure I'm not missing any code when I copy?

Keyboard commands work wonders. In windows you use the Control (Ctrl) key for these shortcuts. Macs have similar codes, use the Command (⌘) key instead. The + just means press them together, you don't actually use a + in the command.

Click anywhere inside of the box you want to copy.
Ctrl+A to select everything in the box.
Ctrl+C to copy everything selected.
Click inside your desc. box the exact place you want the code to go.
Ctrl+V to paste the code where you clicked.



AHHH! Why is all the text centered?

Centering is built into the base code, to compliment the centered layout that you're building. If you wish to try the layout without the centering code, find and remove this:

td,div{text-align:center;}

Depending on the width and background of your main section, the text could look fine uncentered, or really weird. Its an easy enough fix to add that code back in if you don't like it.

Seeking affies, listers, and a wider variety of linkback buttons. Different colored buttons of the same style are offered to compliment various color schemes, choose what fits best.

Link Back:
Homemade Animated Buttons



Homemade Non-Animated Buttons






Buttons by Danielle (Site Disbanded)



Buttons by Bria of Save The Magic




Affies:




Listers:




Completed Reviews:




Pending Reviews:

None



Site Created: 9/25/2010
Page Views (Started 9/30/2010):
Latest Updates:
7/21/2011 Wow, its been months. That was some drama. Full rundown here. Looks like the sites still in tact and the codes working, so no updates needed.
4/5/2011 Busy busy busy *kicks school* *kicks family drama* Another gallery I did a layout for won spotlight, so gratz to Lilly. Pretty shiny layouts do help, makes them look instead of click to the next entrant.
3/8/2011 Deleted bunch of other sites due to being closed/repurposed/frozen. Left 1 asploded lister for now.


Want to see what other people have done with this guide? Look no further, below are galleries with layouts based on my coding.

If you want to be added, make sure you have a link back button in your layout and neomail me this form. Just click the link, fill in the appropriate info and remove the { and } surrounding the "blanks". Make sure not to delete any spaces or asterisks (*).


The Galleries (in order by date added)
Rundown of the drama.

-Hun and I decide to buy furniture and clean out the last "junk" room of our floor of my parents house, hun had been living up there with me for over a year, we had made other large joint purchases.

-Mother comes with us to buy furniture.

-Mother sees me cleaning the next day and decides to go through trash.

-Mother finds an old fire hazard clock radio and flips out over me throwing it out.

-Mother demands rent in an attempt to get hun to leave. We settle on 400$ plus utilities. She refuses to sign any paperwork. Soooo...

-Mother decides she doesn't like that so she says hun's kicked out (she went into the hes not good enough for me rant right before our 6yr anniversary. Little late. Shes just jealous that we've been happy together longer than her marriage was happy, the difference is I'm not a gold digger)

-At the end of the month hun goes back to his parents, but still comes over to visit. Mother decides visits are bad too and completely bans him from the house. Then she kicked me out too, gave me less than a month to find a place.

-Mother deluded herself into thinking she could have her cake and eat it too. She could either take my money for rent and leave me to my own devices, or be an intrusive parent. Not both. Shes lucky I didn't file a civil suit about my renters rights being violated, as I did pay rent and that means even though its "her" house she had no right to break down my door to get in.

-Grades went south for the semester. Really south. Hard to focus on anything when you are being stalked, doors getting kicked in and fearing for your safety in general. That place was no longer my home and she made sure of it.

-Five years of safe driving, and I get into my first accident. Guess what I was distracted by. Other guy's vehicle was fine and I paid for my repairs out of pocket because I had just gotten my own insurance less than a week prior (guess who got kicked off the previous policy). If we had gone the police+insurance route my ticket+deductible would have cost more than the repairs did.

-There was a silver lining. Day of the accident we had visited an apartment to see it. We had been looking at multi-family houses and noone really called us back, or we got stood up when we went to go look at them. Filled out the forms and turned them in a couple days later. Manager called us back and said we had been accepted. So we set a move in for the first of june. Mother had wanted us to pay 400$ plus ~150 in utilities to live in her badly designed mouse infested house. Splitting this two bedroom with a roomate (a long time friend that was looking for a place closer to his new job, two months later still working out well) we're playing 540$ plus ~80 in utilities. Much nicer location. Bit further from school/work for me and hun but we can deal. So, new apartments working out well. Children+their parents above us need some serious sedation, but we're getting used to the constant yelling/running during daylight.


We're settled in, and right now I just don't see neo as being part of the new picture. I'm sorry to my friends that I've flaked on. I needed a more immersive escape from reality over the past few months which spurred me to get back into WoW. I just logged in tonight on a whim. You guys deserve more than me just poofing and never coming back without a word. So consider this my goodbye. I may check in, I may not. I'm whimmy like that. But for those of you that I actually know that are reading this, if you wish to get in contact with me,drop me a line and we'll work something out.

-Calli



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