Navigation

Full code Layout Notes Let's Begin! Removal Code Inserting an image Adding a textbox Editing the guild sidebar Adding a background Finishing Notes

Update

November 13, 2010: Much needed update commencing!

December 25, 2010: ...update done! Hope you guys like the new layout + fixed up content. :D Merry Christmas and Happy Holidays~!

February 3, 2011: WOW, the filter change had a horrible effect on this guide! D: I've updated the guide so it's usable now!

February 12, 2011: Good thing that filer change wasn't permanent! Now that textareas are working again, I have changed this guide back to what it originally was.

May 7, 2011: Updated some stuff! I'm probably going to give GC an overhaul later, it doesn't seem to be working in IE. I apologize for that! If you happen to be interested in making lookups, check out my work in progress lookup tutorial!

June 23, 2011:
Well would you look at that, I've somehow beat the 10 000 views mark! :o This calls for a massive update, let me know if there's any thing in particular you want to learn how to do! Thanks so much everyone! :D

Network

UL Tutorial (WIP)

Directories

Affiliates



If you'd like to be affiliates, send me a neomail! :)

Link back











The first two buttons were made by: silvernonsense. The third was by: subtileknives.

Counters



Awards


Thank you Impressions!


Thank you phammon!


Thank you mypooglepwns!

Welcome

Hey there guest, welcome to Guild Coding. I'm moondust_ . I made this tutorial to teach others how to create a full page guild layout. I try to keep this guide updated as much as possible, so it will work with any recent filter changes. This guide shows how I personally make guild layouts, and I like doing things in a simple way, so what you see here is what I think is simplest method to coding guild layouts. I don't think it's necessary to know HTML and CSS already because I try to explain everything clearly but if you'd like to expand upon your coding knowledge I recommend these sites: CSSish, Demioxy and Castilla_xx

Full Code

For your convenience you can simply copy all the coding from this box, but I suggest you go through the whole guide to be able to really understand it all.

Without sidebar and without image map With side bar without image map
With side bar and with image map Without side bar with image map

Your Layout

For neo-related guild layouts, use the pictures from: here. The size of your layout should fit the screen of the average user, which is 1027x768. *don't make it tooo tiny! The size I make them is 800x600 so that there is room on the side for the guild side bar. If you do not want the guild side bar there, you can make the layout bigger. Search up tutorials and come up with an awesome layout, after all it is one of the most important aspects of a guild: it's where the first impressions are made!

Let's Begin!

To make the most basic layout, all you need to use is HTML. To be able to do anything awesome, CSS is necessary. You can think of HTML as the structure of a layout and the CSS is what styles the structure. CSS stands for Cascading Style Sheets. Style codes go inside the style sheet, in other words between the opening style tag (style) and the closing style tag (/style).

You only need to have one pair of style tags. Please don't have several on one page! The way I display the code is simply to differentiate between HTML and CSS so don't just go copy the whole code from the textboxes below, copy the stuff between the style tags and the stuff outside the style tags. Make sure you only use one pair of style tags in the end! =P

Removal Code

On the guild homepage there's a whole lot of stuff you probably don't want to have on your guild layout. For fullpage guild layouts, you'll want the page mostly empty so you can do your own thing. The properties and values that we will use are background: none; border: none; and display: none;



table, td {
background: none;
}
This will remove the basic structure, the guild table thing.

#header, #footer, .sidebar {
display: none;
}
This part removes the navigation header, the neopet footer and sidebar with your neopets and friends.

#main {
background: none;
border: none;
}
We have to make it seem like #main, the white background, is not there. We can't get rid of it entirely so we will hide it by hiding the background and the border.

.contentHeader, .contentModuleHeaderAlt {
display: none;
}
The fourth part gets rid of the guild description and the neighbourhood

#ban {
display: none;
}

#main {
margin-top: 0px;
margin-left: 0px;
}
This part helps get rid of the strange header problem

.content table table img {
display: none;
}

.content table .content table img {
display: inline;
}
This will remove the guild logo!

Back to the top!

Your coding after adding the removal codes

Inserting your image

The next step is to add your image. There are two parts to it, the CSS and the HTML part. What we do is absolute position a div id that contains an image. But what does mean?. D:

An ID is something that has a name, and a # in front of the name. IDs are only used once on a page (in comparison to div classes which can be used several times on a page). In this case, logically we will use an ID for our purposes since we only want one big image.

All the coding inside the style tags is the CSS, and the coding outside the style tags is the HTML. CSS lets you position the image and the HTML is the part of the coding that actually displays the image. HTML works without CSS but CSS doesn't work without HTML.

Now let us look at the coding we have.



#image {
There is a # followed by the word image. So this must be a div ID called "image"!

top: 0px;
This part of the coding sets how far away from the top of the screen you want your image to go to. Right now it's set to the very top!

left: 10px;
Now this part sets how far away you want the image to be from the left of the page. It's 10 pixels away from the left right now!

z-index: -1;
z-index is a handy property you can use to put some CSS elements over and under each other. According to W3 Schools, the z-index property specifies the stack order of an element. Something with z-index: 2; goes above something with z-index: 1;.

We just want to give it a negative z-index to absolutely ensure that it will always be at the very bottom.


(div id="image" style="position: absolute;")
(img src="http://img707.imageshack.us/img707/3053/gclayout.png")
(/div)
As I said already this is the HTML part. The way to actually make a div appear on your page. Now technically style="position: absolute; should be inside the style tags. But it's not. It is CSS, what's it doing outside? D: It's because of the recent coding filters, so we're forced to use inline styles.

The image code goes inside the div, and the image will do whatever you told it to do in the CSS. (In my case it'll go to the top left most corner.)


Back to the top!

Your coding after adding the image

Your image with an image map!

It's very common to have your guilds links directly click-able on your image. You need to use an image map do this, and it's not very difficult to learn!

First you need to read up this very well explained page: TutorialZ's Image Map Tutorial

Now after you've read it, you will just need to incorporate it into the guild coding somehow. Note: Are you having difficulty with figuring out the coordinates? Look to the right for my easy method of figuring out the coordinates (drag to address bar for full view)

You know how for the last section you put the image code inside the div? This time you'll need to put both the image map code and the image code inside the div!

I won't bother going through all the details, as the link I provided above explains it thoroughly and I took the coding directly from there. But, you can see how exactly you put the image map code in with the image code!

Most people have links to their board/chat, their join link (which needs to be the LINK page, don't try to take the actual join link from sidebar, that won't work!) and their guild website. Take note that you don't need to include the neopets.com part at the front, it's simply better if you just use /~PETNAME !

Back to the top!

Inserting your textbox

The next step is to put in a box of text. Most layouts have one big one. This is done in a similar way to do the way we inserted our image in the previous step, however this time, we will put text in the place of the image code.

You should be familiar with half the coding!

#textbox {
A div ID called textbox!

top: 70px;
The textbox is 70px from the top.

left: 40px;
The textbox is 40px from the left.

overflow: auto;
New code! This part of the coding allows your textbox to scroll.

width: 430px;
This sets the width of the textbox, my textbox is 430px in width.

height: 480px;
This sets the height of the textbox, my textbox is 480px in height.

font-family: verdana;
This part lets you choose the type of font style you want the text in your textbox to have. You have choices like georgia, verdana and tahoma.

color: #551a4d;
This part sets the colour of the text in your textbox. There is no u for the CSS code. :( so make sure its color and not colour.

z-index: 4;
The z-index for the textbox will just make sure it's right at the top.

Please note, your textbox will NOT scroll if you don't have enough text in it! And the seemingly random text in the textbox is called lorem ipsum, which is just filler text. I just put it there because I need to fill up space. x)

How do you know what the top and left values are? You can experiment until you get it in the right place, or you could use a graphic program to speed the process too. (For example, you might try top: 400px;, which turns out to be too low so then you'd try top: 200px; then top: 230px;, and then get to top: 235px which is just right!)

Back to the top!

Your coding after adding the textbox

Additional textboxes

I get asked a lot about how to add more textboxes to guild layouts. So if you want more than one textbox, its basically the exact same as how you made the first textbox, except you just need to change the ID name to something different.

For example, if I had three textboxes, I would call the first one #textbox1, the second one #textbox2, and the third one #textbox3.

I included the bare minimum coding necessary for a scrollbox, so you need to add font-family, and color stuff yourself, like the way you did for the other section.

How do you know what to call your div? Well you can call it anything you like! You could use #apple, #orange, #banana, or #twilightisthegreatest if you very well wanted to. XD There's no reason to do this though, and it's better to keep your coding organized with div names that make sense like #textbox1 and #textbox2.

Back to the top!

The guild side bar

You must have noticed that I didn't get rid of the side bar with the council and links in the removal code. I personally like to have the side bar, but if you don't you can get rid of it with this. (table table table table gets rid of the side bar and the .content p part hides the guild home/guild help/my guild links at the top.

But say you want to have the side bar there, then what do you do? It used to be very easy, all you had to do was add the CSS codes to the selector table table table table, say you wanted to change the position of the side bar to go beside the layout: you add position: absolute; top: 0px; left: 600px; to it, and then you'd be done!

But we can't have position: absolute; inside the style tags because of the filter changes. So we're forced to use a more complicated version. (as a note, if you know the position fix for lookups don't use it for guilds, since it doesn't work at all in Chrome)

table table table table {
margin-left: 700px !important;
margin-top: 0px;
z-index: 6;
}
This is the most important part, you need to change the margin-left and margin-top values to change it's position.

table table table table table {
display: none;
}
There's this strange problem with the guild poll when you try to move it around, so this part fixes that.

.content p {
margin-top: -20px;
}

.content table p {
display: block;
}
The .content p part hides the guild home/guild help/my guild links at the top.

table table table table font {
font-size: 6pt;
color: #286f20;
font-family: verdana;
}
This part lets you make the sidebar pretty, you can change the font-size, color and font-family.

Back to the top!

Your coding after adding the sidebar code

The background!

The last thing I'm going to show you is how to change the background. You need to apply the background code to the body selector. The background CSS code is background-color: red; and background-image: url(IMAGE URL HERE);
There's all sorts of awesome things you can do with the background, you can read up more on it here: CSSish's CSS tutorial.

Back to the top!

What your coding should look like!

The End!

You have come to the end of my tutorial! Thanks so much for reading, and I really hope that it's helped you out in some way.

Do you have any questions or comments? Feel free to neomail my my main account. I will be very happy to help you out!

(please don't send anything to 1plus4is14, I don't log on there everyday, so I probably won't get to your question for a long time.)

It's cool if you don't want to link back, but you're SUPER COOL if you do! ;) You can find some link back buttons on the side of the layout.

Good luck with your guild guest! :D

Back to the top!




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