Hi guest, I'm Lauren (but you may also know me as iamkid), and I see you've stumbled across Neopia's very first Full Page Guild Layout Tutorial that thoroughly explains every detail of the procedure from Start to Finish. Come right on in, and have fun!
I am a guild layout maker, and I lurk for sometimes hours on the Guild Message Board. I've seen countless examples of desperate folks who are extremely capable of making an eye appealing and well-coded guild layout themselves, but simply lack the knowledge. Well, I understand completely. All of us layout makers aren't born knowing how to make them; they take time. I myself fiddled around for weeks until I found coding that worked for me. Recently, I found coding that renders my layouts (almost) flawless, so I'm willing to share with all of you my knowledge so you don't have to waste all the time I did.
In this tutorial, I will show you the steps it took for me to create my moon.struck guild layout from START to FINISH, with a detailed explanation at each step. My layouts all have one blog and are all relatively small, so if you want another style you may have to visit somewhere else. The graphics making portion is there for beginners only, but there are a few tips I have that maybe anyone might like to see.
About crediting; No, you do not have to credit me. Yes, you can credit yourself. No, you cannot credit yourself for the coding. However, if you become a famous layout maker due to this tutorial, it would be much appreciated if you linked back here on your examples page.
I really hoped this helped, and good luck with your layout making adventure!
Part One: The Graphics
YOU CAN USE MICROSOFT PAINT FOR THESE LAYOUTS!!!
My layouts are all made on the newest version of photoshop, but you seriously DON'T need such an expensive program. The only reason I'm using photoshop in the graphics making portion of this tutorial is because I'm showing you the complete creation of this particular layout from start to finish, and it explains how I got the cartoony effect that I did.
You can also use GIMP, which is FREE (at gimp.org) and I hear that it has many of the same features as photoshop. I found a tutorial on how to use some of the areas of GIMP here.
However; the graphics are what makes your layout original, so switch it up however you want by blending images, creating "splats", or whatever you want to do. Graphic making tutorials are all over the place, so use your resources! It takes a lot of practice to design a truly masterful layout (which I have yet to accomplish).
For all of those who wish to skip the "graphics" making portion, you can go ahead to the coding as long as the following have been completed (detailed explanations are located within the tutorial):
- Your image size should be about 1000px (width) by 500px (height). If it's larger, then make sure the blog part is at least within these dimensions. I have a code you can use later so that there aren't annoying scrollbars.
- Your image should blend into your background (all the layouts I've seen so far based off of this tutorial have failed to do this).
- You have a designated section for your blog (preferably ONE).
- Your credit is on the image.
- You have a designated area for your Navigation Bar.
- Optional!: You have three areas marked off for "Join", "Message Board", and "Guild Webbie".
- The image is saved as png.
If your already-made layout has been modified to fit that description, then you're ready to code! If not, or you want to know why I have all of those specifications, stick around.
Step One: Open your document
When you open a document, you want it to be 1000px width by 500px height. This is slightly smaller than the typical size of a screen (1024x768) because browser windows are also smaller than the typical screen. It's really annoying for the user if you have a scrolling blog box AND a scrollbar on the side of the browser.
Update: If you really desire the image you make to fill the whole screen, then increase the dimensions to whatever you like. However, later I provide a code that'll remove the sidebars from the right and bottom so they don't interfere with a pleasurable web experience. Just make sure you put the blog box somewhere on the top left. Also, make sure your image still blends into the background.
Sorry about that rather long update. Here's how you should open your document on photoshop:
If you're doing this in paint, press CTRL + E on your keyboard (or go to Images --no_html_comments- Attributes in the toolbar), and it will open up the attributes. Manually type in the dimension.
Step Two: Pictures
Originally, the moon.struck layout was supposed to be a scribble. Since I have no drawing abilities, I decided it'd probably be easier to trace an already made picture of strawberries. To copy this effect you do need photoshop. If you don't have Photoshop, then just add pictures. Or, you can use GIMP (see above.)
Important note: The total image size is 1000x500, but you want to BLEND the picture into your background color. That's the whole point of making the picture smaller to begin with; make the image SMALLER than the picture size, and so that it looks good with the background color that you choose. Even if you have a larger image, if someone has a huge screen, they want to see a blended-in background.
I'm using one blackberry I was originally going to have on the layout:
First, paste the picture you want to trace over onto your document:
Second, create a new layer, and trace using a black pencil line (or brush line).
Third, delete the original picture layer, and make sure all the black lines are connected:
Fourth, fill in using the paintbucket. I find it useful to select a color from the original blackberry (or whatever you're drawing) first. If you haven't deleted the original layer, you can keep it visible while you fill in your drawing. It's sort of fun to watch the blackberries become flat:
I ended up not using the above example in my final layout. So, I put my procedure below with the blackberries I DID use.
To see a larger picture, drag the thumbnail to the address of your browser:
As I've said before, your graphics are what makes your layout unique, so add whatever pictures you'd like to create an image you feel looks good. In the moon.struck case, I did the same draw-over-picture technique for a bunch of random images I searched for on Google. However, I have to mention that the monkey is completely my creation ^-^.
You can add all sorts of effects if you're using Photoshop, too. There are a billion different filters, you can download brushes, and textures, and all sorts of stuff. Tutorials are found all over the place on making awesome graphics. In the moon.struck case, I just gave all of the images a slight drop shadow.
Step Three: Add Text box!
To create a multi-functional layout, you need only one textbox (or "blog" as many call it). Multiple blogs used to be okay, but now-a-days, with the embracement of CSS, we really don't need them and they crowd the image. However, if you can make more than one blog look cool, go for it. It's completely up to you. Just remember that more than one blog means more coding.
Something to keep in mind while you're creating a textarea: the navigation bar. Since this is a FULL page layout, we need to have a link bar soley for the purpose of the "my account / pet central / explore / games / boards / shops / news" buttons that are so required by TNT. I generally create a completely different textarea for this, one that should not be tampered with AT ALL when people add their own text. Personal links should go in the main blog area, not the navigation bar. If you don't want to create a whole other blog, you can easily place the links at the top of the blog (that'll come later; with coding).
In the moon.struck example, I used a blackboard as the textarea, and the bottom portion was perfect for the navigation bar:
In the above example, the images seem to cover the blackboard slightly. I ended up moving them over, so the text wouldn't cut across the pictures; it looks really tacky.
If you have photoshop, a great and simple way to make a textbox is to create a white box and set the opacity so that the background shows through a bit. You've seen this, probably, on other layouts, and it makes a great place to put text. Plus, you needn't worry about "text covering the picture" because you're doing this purposefully.
Step Four: Add Title
Some people prefer not to have the title of their guild on the actual layout, just in case they end up changing it. This is fine, it just makes your job a little easier. Creating the title is always one of my least favorite part of layouts because picking out fonts is sort of difficult.
However, there is an advantage to putting the title on the actual layout: you can use whatever font you'd like. You don't have to worry about other computers compatibility with a funky font because the font is PART of the image. So go ahead and download whatever suits your purpose, if you can't find one in your font list. My only tip is to keep the title extremely visible without crowding the image.
This is the font I picked out across my moon.struck example:
Next, you want to spruce up your title a bit to keep it from looking drab. I suggest (remember; it's completely up to you) not to make it TOO overdone... it looks cheesy. In the moon.struck case I added a slight glow to match the "moon" effect I was going for, and changed the font color to a much lighter version of the blackboard color itself:
Step Five: Add links
A cool coding effect you can use to make your layout super cool is the image map. Using the image map (learn to code the map later), you can make the image itself a link. Using this logic, we can easily create working links to places like "join" and "post". Most guilds also have a webbie, and so I always put that on there as well. The trick is to make sure that the links fit in with the image, and don't look tacky. You can use pictures, words, whatever you'd like, as long as they're clearly labeled.
Here's what I did the moon.struck case:
Step Six: Add Credit
After you've finished the main portion of your layout, the very last addition should be your credit. When you write your credit, don't make it obnoxiously large. Your name should not be the first thing the user's eyes are drawn to. In fact, I like hiding my credit slightly so that it's visible, but not obvious. However, you want it easy to find and difficult to get rid of. I didn't put my credit in the best place on the moon.struck simply because it's easy to get rid of, so I suggest putting it on a complicated part of your image and making it a bit opaque. Here's my example:
Step Seven: Saving/FINITO!
Hey, now you're done! All you have to do is save. I highly suggest that you save as a png form, because (in my experience) it eliminates blurriness more than jpg/gif.
Next, you have to upload the image onto an uploading site. I use photobucket, but there's also tinypic and imageshack. They all essentially do the same thing.
Part Two: The Coding
This is what most of you are probably here for. I am providing the complete coding and how each piece works IN DETAIL. If you don't care about the details, then skip it, but please don't neomail me with questions unless you've read the full tutorial.
I code all of my layouts meticulously, and edit and edit until each blog is placed perfectly. Understand that you too, need to do this. I also make sure the coding works in both Firefox AND Internet Explorers (I haven't tested it out in Safari, as of yet). I have seen sooo many layouts that only work in IE and it bugs the heck out of me. The people's response? "Well it works fine on my computer." That's all fine and dandy, but if WE can't see it, then why are you making them to begin with? The World Wide Web is accessible by everyone, not just you. I'm not that great at explaining my position on the matter. All you need to know is that you need to make your layouts compatible with as many browsers as possible.
If you skipped the graphics making portion, that's fine. I just threw that in there for those who have no idea what to do. However, there are several aspects of your saved image that you need to update to make sure the coding works:
- Your image needs to be around 1000px (width) x 500px (height). When you have blog boxes, it's tacky to have to scroll in any other part of the -blocked-
- You only have one blog. You can have more than one, of course, but this leaves the owner of the layout more flexibility, more room for the graphics section, and it just looks better.
- Your image is saved as a png. So far, it's eliminated blurriness much better than all other forms I've used yet.
So, if you've done all that, you're ready to code!
Step One: Know a Little Bit
Alright, in order to understand what you're doing, you need to be a fast learner. I'll do my best to explain fully everything I'm doing, so this tutorial will take a looottt of time. My suggestion after you're finished is to save the coding, and then replace all the allotted numbers (makes it much faster, trust me :D)
Also, you'll need a guild to test everything out. If you're the owner of a guild already, then fantastic. Just warn all your members that the guild may be inaccessible for some time while you complete the layout. If you do not own a guild... then either make one or access one on another account. Either way, you'll need something on which to test the code (pet page won't work..)
Because this portion of the tutorial can be for all sorts of graphic makers, I'll mention to you that you do NOT have to have photoshop to code, or any other fancy image program. All you need is MS Paint, which all PC's have.
The following is the FULL CODE that you need for your layout. I didn't originally have this in here, but people kept messing up the order of each particular piece (even though I have EXACTLY where each piece needs to go). Make sure all of your code is in this order, and then go through the rest of the tutorial to figure out which parts you need to change:
Step Two: The Base
Alright, before we start, you need to put the following code in the "welcome" message of your guild:
ALL of the coding I tell you to put in your welcome message from now on, will be inside of the two "div" tags. Sometimes, I'll tell you to put the code in the style tags, and sometimes it will be before the style tags (but still after the div tags). When I tell you to do this, just hit return a couple of times from the last coding you added, nothing will be affected. Other times, I'll tell you to put code in the body. Notice, nothing says "body" in the base codes above. All it means is place the code after the style tags (but before the end "div", remember). It's very important that you listen to the direction on WHERE to put the coding; if you misplace it, your layout WILL NOT WORK.
If you know a bit about coding, all of this should sound incredibly simple to you. However, if you're having trouble understanding the very basic instructions, you may need to rethink continuing on with this tutorial, or at least read up on some basic html.
If you're really messing up the coding, I provided the whole crust of the layout in step number one. I'm a little bit annoyed I had to do that, but people were seriously not figuring it out
Step Three: The Removal Code
The following code removes all the unnecessary information. You don't need to know the purpose of all the code except that without it, your layout WILL NOT WORK; the point is, you just need to stick them inside your style tags:
Step Four: Add in the picture
Okay, now that you've put in the "random" code, you're going to place in your image. I want you to put the following code before the style tags, (but after the "div" tag):
This code is pretty straight forward, but I'll explain all of it nonetheless. The only part you should be changing is the photobucket image with the url of your picture. Neopets doesn't block pictures. Also, if your image is NOT 1000x500 like I specified, then change the height and width of the picture where needed.
If you made your image really large, make sure your blog box is within the dimensions given (1000px width and 500 height). In fact, you should probably put the blog box somewhere on the top left of your screen, because if you use the following code, the user will not be able to scroll up and down the screen. Essentially, this cuts off the scrollbars on the browser so the user won't scroll twice (really useful). It also cuts your image off so that it can be truly full-screen.
So, to put the following code in your layout, put it within your style tags (they're body attributes):
The "usemap" section is your image map, where we'll put the links to the "join" "post" and "webbie". If you didn't put the links on your image, don't sweat it. It makes your job a whole lot easier (just get rid of the "usemap" part).
The reason I'm putting the "style" of the image within the tag is so that it doesn't crowd up your style area. This is stuff that'll never change, so it's easier just to keep the information with the image. The "left" and "top" means that the picture will be all the way to the top and all the way to the left of your browser. Pretty nifty, eh?
Step Five: Position Blog Box
I hate this part (almost as much as the image map part haha). There are a bunch of numbers you'll have to keep track of, and for people who are not math-inclined it may get a little tricky. It's not hard, and if you have a pen and paper it doesn't take that long (so... go get a pen and paper).
So, the first thing I want you to do is put the following code in your style tags:
And put the following code in the body section of your code (after the style tags):
Explanation time!!! The second textbox indicates WHAT goes in the blog. This is pretty easy. The first textbox, the code within the style tags, designates WHERE I'm going to put my blog. If you know a lot about css, you can even put a border and stuff on there. We'll worry about that later. The code I gave you is pretty straight forward. Where it says "00" you need to replace it with the correct numbers.
The "top" attribute designates how many pixels from the top your blog will be. The "left" attribute designates how many pixels from the left your blog will be. The width attribute designates how wide your blog will be and the "height" attribute... you get the picture. It's pretty straight forward. But now I'm sure you're asking yourself: How in the world do I find all of these numbers? Well, that's easy. Just get out your handy dandy paper, open up your image in MS Paint (that's right! Paint), open up calculator (if you're like me and don't like to subtract manually) and get ready to jot down some numbers.
To view full picture, drag to address bar
This is basically how it's done. The "X's" are there to identify where I need the edges of my blog box. Notice all the arrows? These point to the numbers (coordinates) that are always hanging out at the bottom of the paint screen. Maybe you've wondered why they're there. I can't tell you that, but they sure are USEFUL. If you move your mouse around, they tell you exactly how many pixels from the top and how many pixels from the left your pointer is at all times.
To find "left" attribute: Put your mouse in the top left corner of your blog box. The first little coordinate is the number of pixels from the left. (Write this down)
To find the "top" attribute: Put your mouse in the top left corner of your blog box. The second little coordinate is the number of pixels from the top. (Write this down)
To find the "width" attribute: This is where it starts to get slightly complicated. Put your mouse all the way over to the bottom right of your blog box. Take the first little coordinate number you see and subtract the first number you found (the "left" attribute). The resulting number is then your blog's width. (Write this down)
To find the "height" attribute: Put your mouse all the way over to the bottom right of your blog box. Take the second little coordinate number you see and subtract the second number you found (the "top" attribute). The resulting number is then your blog's height. (Write this down)
Okay, so now we can position our blog perfectly. Warning; you'll need to check several times. I may have found those numbers when I was on paint, but they may have been a couple of pixels off. The trick to making it look great is for perfection. So keep fiddling with the numbers until the blog's in the exact right place.
To test it all out, you may need to put more than one line of "texthere" in the box. Put a lot of stuff so you can see the scrollbar, then you'll truly be able to see where the bottom of your blog box is.
Step Five and a Half: Nav Bar
The navigation bar is vital for your full page layout. Without it, you're not following neopets rules.
The next code goes in the body section of your code (RIGHT after the style tags):
Calm down! This is done the EXACT same way as the Fifth step. The only difference is that we put the style in the actual html instead of in the style area above (this way saves space). The only parts you need to change are how many px from the top and left, and what the width of the text box is. Keep all of the links in there, they're all necessary, and don't add any other links because they DON'T go in the navigation bar area.
Step Six: MAPPING
This part may seem complicated to code, but it's really much simpler than it seems. Once again, you'll be using that nifty coordinate device from step number Five.
This code goes RIGHT BEFORE the style tags, and right after the image coding you added in step 2.:
Alright. The first link you need to put in is to your guild's link page. Basically, you can't join a guild from anywhere but the links provided by neopets that say "join". However, on your sidebar notice it says "guild link"? Well, for the "join" section of your map, use this link (NOT THE LINK THE PAGE GIVES YOU, THE LINK OF THE PAGE). The second link is to your guild board, and the third link is to your guild webbie, which is typically a pet page. If you don't have a guild webbie, then you shouldn't have put this on your image :D
Warning: if you save your code BEFORE you put the links in, and then you left, you're not doomed! You can STILL get back into your guild. Go all the way down to this tutorial and read the second question to fix this problem.
Now, for the coordinates. Luckily, you don't have to find the pesky height/width like you did in step four, but you will need to open up Paint again. Take a look at this picture:
To find the FOUR COORDINATES you need for the "join" link, it's quite simple. Place your mouse in the top left corner of where you want the link to start. Those little coordinates at the bottom? Those are the first two numbers on your four coordinate code. To find the second two, place your mouse in the bottom right of where you want the link to end. Simply repeat for the other two. (Basically, wherever I have a dot, I'm recording the coordinates.)
Tip: Use a pen and paper and write all the coordinates down so you don't have to keep switching windows. That's a big pain in the butt.
Step Seven: Scrollbars and Background Color
Your background color needs to match the color of your image background. If you have internet explorer, you can also alter the scrollbars. So, put the following code in your Style tags:
All the #NUMBER I put in the scrollbar are actually hex codes for certain colors. You can look up hex codes online_ if you want, but the point is that they're necessary to get the look you desire. Scrollbars only show up in internet explorer, so I don't even bother with them, really, but they're sometimes fun to play with.
Alright, the important part: the background color. In order for your image to blend into the background, it needs to be the EXACT SAME COLOR. Assuming that you can only use paint, I'll show you how I used to find out the hex color codes for the backgrounds I use..
First, open up your image in Paint. Then, take the eyedropper tool and click the background color. Voila, the color you want your background to be is selected. Next, go to Colors in the top toolbar, and then Edit Colors. You'll see the following:
Notice the Red Green Blue levels? You'll use this to find the hex codes you need. Next, I go online and find a useful tool that converts these values into a hex code. You can use the following site if you want:
To view full picture, drag to address bar
The numbers in the image don't match the one before, but once I toggle the arrows to the exact number, the hex code it provides will be the exact same color as the background.
This may seem like a complicated process to get the color you want. If you have photoshop, this is much easier (you eyedrop the background color, and it automatically gives you the hex code), but I'm making it as low-tech as possible.
You can repeat this technique for the next step (CSS) and finding all the colors you want. I always use colors from my image for the CSS itself to make it look more natural. Just a helpful tip!
Step Eight: CSS
Yay, now for the fun part! CSS basically codes the font, color, headings, etc that you want to use. It's the reason why you don't really need more than one blog box, and it's not that hard to figure out. In the following textbox, I'm giving you all the coding for the CSS I used for my moonstruck layout.
Put this coding within the Style tags:
As you notice, this doesn't seem like a lot. If you want a more detailed CSS tutorial, then feel free to visit elsewhere. Just keep in mind that there is a character limit in your welcome message.
So the first part (td/p) formats my paragraphs. The color is a hex code, that you can change. The font has both the size and the font face, and the letter spacing spaces out the letters 1 px. It's pretty self explanatory. It basically means that everytime I use the the paragraph in my html in my main blog box, it will be formatted exactly like I have shown there.
For the H4? Yeah, that's my heading. You can have H1, H2, H3, etc, but here I used H4 for some reason. So, I gave my heading a border for the top and bottom so whenever I use H4 in my blog box, it'll be formatted like so.
The a:link, a:visited, and a:active area are my link attributes. The a:hover is my link attributes when I hover my mouse over it.
The following coding is what I'd put INSIDE by blog box (which is created in the second textbox in step Four) in place of the words "TEXTHERETEXTHERE":
Step Nine: Finished!
So, now click "save" and take a look at your new layout! After doing all of this, you may need to work out some kinks in spacing, etc. And I have one majorly big tip: Make sure you it works in BOTH Internet Explorer and Firefox.
And now? Congratulate yourself on a job well done!
Frequently Asked Questions
Hi again everyone! If you are having difficulties with your layout, then make sure you check out the following...
I don't have photoshop. Can I use MS Paint instead?
Yes of course! I mentioned this a couple of times earlier. You just need a properly sized image for your background (standard: 1000x600, but it can be smaller. I personally prefer 500-550), one blog somewhere on there, "join/post/webbie" links (if you want to do the mapping), a place to put your navigation bar, and (of course) your credit. You can do all of this in paint! Then skip ahead to the coding. The part of this tutorial that you CANNOT do if you're in paint is the step where you add pictures.. that's bridging on a photoshop tutorial.
How do I add another textbox?
Like I said earlier, I personally think one blog is the best way to go. However, if you can make a layout work with more than that, then go for it. To add another blog, you basically follow the exact same instructions as the regular blog; however, there are some changes you need to make. The part of the code that says "#textbox" needs to be copy/pasted to an area RIGHT BENEATH IT. Then you need to change the word "textbox" to something else (doesn't matter what word you use). Next, you need to copy/paste the div and /div that defines your textbox into the code AFTER the original textbox. Finally, change the ID of the box to the word you named it earlier (#WORD).
I didn't finish putting in my "join/post/web" links, and now I can't get back into my guild!! Help?!?
Never fear, Lauren's here! This used to happen to me ALL the time when I was making guild layouts because I would link to other people's guilds and stuff IN my layout. Calm down and return to your homepage and find the guild ID in the URL browser. See it? Now replace MY guild id with your own guild id in the following url:
Do I really need to put the navigation bar in there? Like, is there a rule or something?
I have no idea, to tell you the truth. I have yet to find the rule that says you /need/ a navigation bar, but all layout makers pretty much agree that it's against the rules not to link back to neopets. Plus, it's much more user-friendly to have that link. Neopets users feel a little safer having that lifeline back to the homesite, and will subconciously be more likely not to join if you don't have it.
What's the code for putting in the guild council sidebar thing?
Currently, I only have knowledge on this really simply completely full-page layout. This summer (summer 2008), I plan on expanding my knowledge and creating another, alternate-section to the tutorial that explains how to add the sidebar, but until I become an expert in working with it, you'll have to look elsewhere for this information. I recommend looking at source codes (NOT COPYING SOURCE CODES, JUST LEARNING FROM THEM) at layouts with the sidebars until you figure out what works and what doesn't. That's what I plan on doing, anyway.
NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., (c) 1999-2008.