Welcome
Welcome at Inges Layoutguide. First of all, I want to say that I hope you are going to learn something from this guide. A lot of Dutch people already have made a beautyful layout with this guide, so it must be possible for you to make one too! I wish you good luck with making your (first) layout and have a lot of fun making one :) If you have questions you can always neomail me.My templates are for personal use only, which means you are not allowed to use them to make a graphicssite. If you work for a graphicssite, that means you know something about HTML and CSS. If you cant code yourself, you shouldn't work for a graphicssite.
I would really like it, if you leave the credits in the layout you make, so other people can find the guide as wel.
News
July 26, 2008 - Teilie is currently translating the guide into German! It isnt completed, but Ive already put the link on my page. You can find the new language in the sidebar.July 23, 2008 - Since I won the ULS, a lot of people asked for a English version of Helisaems petpage. I was already started translating, but Im still not finished. If you want to follow a tuturial, please see before reading if it's completly done. Theres nothing more annoying than starting something you cant finish.
Tutorials ------ Shop/gallerylayout
In this tutorial I will explain to you, how you can make a shop and gallerylayout. In this tutorial, we will use a code that works in both your shop and your gallery. This is an example of how your layout will look like when it is finished.
For this layout you'll need a graphic editing programm, such as Paint or Photoshop and you need a shop (or gallery). Click here to go to the place where you can edit your shop. If you haven't got a shop yet, you can make one.
Copy and past the code you can see below this text in the white place where you have to put a shop description.
If you've chosen to update your shop and you check the front page of your shop, you will see your shop completely white. We will now start making our layout a little more colorful. The image below is the picture that will appear left in the top of your shop. Save it to your computer and decorate it.
If you have decorated the image, we can go further. We're not ready yet. We have to make a repeating background to complete our layout.
You can make the repeating background by taking a little piece of the bottom of your topimage and save that as a new file. If you do it right, you will get something like this:
If you really cant get it right, you can also take my example and decorate it so it matches your topimage. Make sure it will look like the top image is going further in this image.
Now load your images up with tinypic (dot com). You don't have to enter anything after "Tags". Then press "Upload now" and wait untill the new page has been loaded. After that you copy the link after Direct Link for Layouts.
Now we can code the layout. This isn't hard, because you only have to put the links on the right spots in the code. Go to the code, which you have already pasted in your shop.
You have to put the biggest image, which will appear left in the top of your layout here:
Attention: A lot of people remove the id="dontremovethis" part of the code. If you remove that, your topimage won't be on the right place in your layout. So don't remove it.
The URL of the repeating background, should be here in the code:
You are done now! If you want to, you can change the textcolors and your scrollbarcolors. You can find a color charthere. Also you can for example move your navigation. I think you should be able to do that with the instructions in the code. Congratulations with your new shoplayout!
Tutorials ------ Lookup Style 1
In this tutorial I will learn you to create a lookup like this one:
Drag and drop the images into your browser's address bar or right-click and click on "View Image" to see the full image.
This is the code you'll need to make the lookup:
This lookup needs two images, which you'll have to decorate. Image 1 is the topimage of yout lookup. Image 2 is a repeating background. First you must save the template below to your computer and decorate it. Ive made it a little smaller so it could fit in my guide, if you open the image in Paint or an other graphic editing programm you will see the full image.
If you have decorated this image, you are ready for the next one! I think you have already seen which part of the layout we still have to make. The repeating background. You can make this one by copying a little piece of the bottom of your topimage and save that as a new file. If you do it right, you will get something like this:
If you really cant get it right, you can also take my example and decorate it so it matches your topimage. Make sure it will look like the top image is going further in this image.
Now you are almost ready. We can start changing the code of your layout.
Copy the complete code (which you can find in the top of this tutorial) and paste it here in the about me section.
Now load your images up with tinypic (dot com). You don't have to enter anything after "Tags". Then press "Upload now" and wait untill the new page has been loaded. After that you copy the link after Direct Link for Layouts.
The first things we are going to change, are the URL's of the images. Below you can see where you have to put the URL of your topimage.
If you have done that, you can click on "Preview lookup" to see if you have done it right. If you haven't, you might have removed the id="dontremovetheid" part. Thats mistake many people have already made..
Then we now are going to change the URL of your repeating background. A little more in the top of your code, you can see this:
Just change the URL, and click on "Preview lookup" to see if you have done it right. If it looks correct, you can continue with the tutorial. We still have to change two things. The headers above your stats and the colors of your text and scrollbar. I think you can change those by yourself. In the code are some hints to help you find where to put the right stuff. You can find a color chart here. You can also read there how to change the colors in your text.
Use this template for the headers:
Change it and load it up, then put the link in the code like below:
Then you are done now! Congratulations with your very own lookup!
Tutorials ------ Lookup Style 2
In this tutorial I will teach you how you can make a lookup like in the image below. To see the full image right-click on the image and click on View Image.
The code you'll need for your lookup is below. Please put it in the about me section you can find here.
Then it's now time to make the images. You'll need 1 template for the topimage and a repeating background for this lookup. We will start making the topimage. Below you can see the topimage template. Please save it on yout computer and open it in paint (or another program you can make images with). To see the full image, right-click on the image and click on View Image.
Now decorate it. If you are done we can start with the repeating background. You can make this one by making a new image of the bottom of your topimage (the part with the black lines). It has to look like this.
If you dont understand what Im saying, just take the image up here and decorate it, so it fits with your topimage. To see the full image, right-click on the image and click on View Image.
Make sure there isnt any white around this, otherwise it won't repeat beautifully.
Now we can begin coding our layout =D. Yay.
Now load your images up with tinypic (dot com). You don't have to enter anything after "Tags". Then press "Upload now" and wait untill the new page has been loaded. After that you copy the link after Direct Link for Layouts.
Put the link of your topimage right here in the code (instead of the link already there) you already put in your about me section.
If you changed it, click on preview lookup to see if it works.
Attention: A lot of people remove the id="dontremovethis" part of the code. If you remove that, your topimage won't be on the right place in your layout. So don't remove it.
Then, put the link of your repeating background right here in the code instead of the link already there.
Check if it works with the preview lookup button. Then if it's all working, we still have to change two things; the headers and the textcolors.
This is the template for the headers:
Decorate it, or give it a color which fits better with your layout. Then upload it and put your link right here:
Now the only things you've got to do are the textcolors (and scrollbar if you want to). In the coding you can find some commants, which help you put the colors on the right place. You can find a colorchart right here.
Congratulations with your (first) userlookup!
Tutorials ------ Fullpage Guildlayout
In this tutorial you will learn how to make a guidlayout that will look like this one. To see the full image, right-click on the image and click on View Image.
This is the code you will need, you can put it on the page with your guild preferences.
Ive made a template for you. Save it on your computer and decorate it.
This image is made smaller to fit into my layout. If you want to see the full image right-click on the image and click on View Image.
If you have done that, you have to make a repeating background, which will cover the rest of your layout. Below you can see a example of what you are going to make. You can make this repeating background by taking a few milimeters of the bottom of your topbanner. Or, you can try using my image to make your own.
Now load your images up with tinypic (dot com). You don't have to enter anything after "Tags". Then press "Upload now" and wait untill the new page has been loaded. After that you copy the link after Direct Link for Layouts.
Then we can now start coding. Look in the code you copied in the beginning of the guide. You can put the urls instead of mine here in the code:
The first link is for your repeating background. The second for your banner. Now, the only thing left to do is changing the colors! You can find a color chart here. Just change the colorcodes in the code to colors you like best.
Your done! Congratz.
Tutorials ------ Overlay guildlayout
Note: This tutorial might get you suspended because the guild navigation is not showing on your guild. Using this tutorial is at your own risk.
In this tutorial I will explain you how to make an overlay guildlayout. This is a layout that covers your normal guildnavigation. It has Join and Chat links instead. If you are going to use this tutorial, please keep in mind that a navigation with shops, pet central etc. must be on your layout.
What do you need? Gimp/photoshop/paint or any other graphics editing program, images and some knowledge of coding.
1
Save the image below on your computer and open it in your graphic editing program. To see the full image, right-click on the image and click on View Image.
2
Decorate the image and draw some textboxes on the layout. Dont forget to put Join and Chat somewhere on the layout. If you have a webbie, you can put that on you layout as well. You will have something like this now:
3
We now are going to code the layout. Put the code below at your guilds design preferences.
As you see, you have got my layout on your guild now. We are now going to change the layout, so it has your images on it.
Now load your images up with tinypic (dot com). You don't have to enter anything after "Tags". Then press "Upload now" and wait untill the new page has been loaded. After that you copy the link after Direct Link for Layouts.
Do you see this in the code? You have to change the url into the url of your topbanner here.
The next thing you have to do is give the rest of your layout a nice background, this can be a color, or if you like you can add stripes.
You can put the url of your background right here:
Then we can now start positioning our textboxes. In the code you can see this:
That is the textbox. We just have to put it on the right place. You can move your textbox by changing the numbers behind "top" and "left". Top is the distant between the top of your textbox and the top of your page. Left is the distant between the left side of your textbox and the left side of your screen. You can calculate these numbers quit easily by using the measuring tool in photoshop.
If you dont have a program with a measuring tool, you can just try some numbers. It will take some time, but eventually you will get your textbox on the right place.
Join & Chat - Method 1 (You need GIMP, if you dont have gimp, try Method 2)
We will now make Join an Chat link. We are going to do this with a image map. You can make an image map quite easily with gimp. Choose filters - web - image map as you see in the image below.
If you have done that, this window will appear. With your mouse you can select here the parts of the image you want to link. Which sort of selection you want, you can choose in the options you can see on the screenie.
If you have made the selections, you will get this window. The only thing you have to do here, is input the link. Nothing more.
If you have done all of that you click on view and choose sourcecode.
If you have done that you will see the window below. I took the unnessecary things out of the screenie, because they are doing strange if you put them on neopets. So its best if you do that too.
You must put the blue part of the screenie instead of this in the code. Now you are done coding the Join and Chat links.
Join & Chat - Method 2 (Without gimp!)
You can also make the Join and Chat links without gimp. We dont use image maps now. This way may take some more time, but its a great alternative if you dont want to use gimp.
You have the boxes with Join and Chat on your layout. Cut them out of your layout and save them apart. Like this:
You will have to put these both in a div in your layout. You can find the numbers of the positioning yourself (I just explained how you can do that).
Now you are done positioning Join and Chat.
Neopets rule: You need to have the navigation of neopets on your guild! So please don't forget that. Other people have to be able to navigate away from your guild. Here is a list with the links for the lazy people here xD.
You are done now. I hope you have made a great layout for your guild!
Tutorials ------ Petpagelayout
You want to learn how to make a petpage? It isn't that difficult. In this tutorial you will learn to make a layout like the layouts below. The second one is made by _shutupanddrive_96. To see the full images, right-click on the image and click on View Image.
You don't need a lot of knowledge about HTML and CSS for this layout. The only things you need are paint (or another graphic editing program) and a empty petpage.
Go here and click on the pet who's petpage you want to use. Copy and paste the code below in the white box on that page.
Next thing you have to do, is decorate the topimage. Below you can see the template. Save it on your computer and decorate it. To see the full image, right-click on the image and click on View Image.
If you are done, we can start making a repeating background. You can make this by taking a stroke of the bottom of your topimage and save it apart. Or you can take the image below and decorate it with the colors of your topimage.
If you are done with that, we can code the layout. First you will have to load your images up with tinypic (dot com). You don't have to enter anything after "Tags". Then press "Upload now" and wait untill the new page has been loaded. After that you copy the link after Direct Link for Layouts.
Put the url of your topimage on this place in the code:
Attention: A lot of people remove the id="plaatje" part of the code. If you remove it, your topimage won't be on the right place in your layout.
Below you can see where you have to put the url of your repeating background.
Now your petpage is looking quit nice I guess. To make it even more beautiful you could change the scrollbar colors and the background color, because the repeating background doesn't cover the whole background. You can change the backgroundcolor here:
You can find a colorchart here. So you can choose a color that looks good with your images.
I think you are kind of done now! Congratulations with your layout.
Tutorials ------ News Messages
On graphicssites, you can see most of the times that they are having modules with their news in it. You can make those yourself too, with this code. It's quit standard, but it looks nice, isnt it? Please don't forget to credit me when you use these.
| News |
|
| Posted by: Inge | |
| Date: November 1st, 2007 |
|
text text text text text text text text |
Tutorials ------ Blogs
A blog, is one of the easiest graphics to make. I will explain you how you can make one.Make a new image. This is mine.
Decorate it.
And draw a textbox. Don't make the background of your textbox overdecorated. Otherwise your text won't be readable anymore.
You are now done with the images. Load up your images with tinypic (dot com). You don't have to enter anything after "Tags". Then press "Upload now" and wait untill the new page has been loaded. After that you copy the link after Direct Link for Layouts.
Next thing you have to do, is code the blog, which isn't very difficult. Go to goolde and look for the blogcoder from neoextreme. If you have found it, follow the steps to make a code for your blog.
How to use the blogcoder?
Page 1On the first page of the blogcoder is some text. You can read it, or skip it. Its not very important for your blog.
Page 2 Choose for I want to use an image, and you can enter the width of you image after Content/Image Width (px). Then click on continue.
Page 3 Now you must put your textbox(es) on the right place. Click on define layers. You can shade your textboxes there. If you have done that, click on I'm finished and choose continue.
Page 4 Choose Continue. You can change your text when you are done.
Page 5 You are done, copy your code.
When you have coded your blog, you arent completely finished. Like this, your blog will look good on an offsite site, but not in your shop. You can try to put it in your shop like this, but your blog will be very small.. To make it its normal size, we have to put the actual size of the image in the code.
If you have uploaded your image you can click with your right mousebutton on "features". You can check your image size there. Mine was 400 x 250px. (first number is the width, second the height)
You can see this in the bottom of your blogcode
This is also the place where you have to make some changes. Put the width and height in here just like I did this below.
You are done coding now. Want to know how my blog turned out?? Tadaaa:
Tutorials ------ Petlookup
To make a petlookup, you need two things: a graphics editing program and notepad. This is an example of a petlookup made with this tutorial:
Open notepad and past the code you can find below in it. Im recommending this, because the box of your neopets description is very small. I do think it is usefull for you to open the pet description page.
This petlookup has got a header, footer, inner background, outer background en een tekstbox with a navigation.
First thing we are going to make, is the header. Below is the template for the header. Save it on your computer and decorate it.
When you have done that, you can load up your images with tinypic (dot com). You don't have to enter anything after "Tags". Then press "Upload now" and wait untill the new page has been loaded. After that you copy the link after Direct Link for Layouts.
Put your image instead of the URL from the template on this place of the code:
After the header, we are going to change the footer. This works the same as the header; Decorate the template below.
Then load up your footer and replace the URL of the template footer here in the code:
Now we are going to change the inner background, also called the "main" background. This is the background of the part of the petlookup in the middle. My background is light blue. Give it a color that fits with your petlookup. You can find a colorchart here. You can change the color here:
So, we are done with the inner background, outer background, header and footer now. Now we have to change the colors of the stats. This might be a little confusing, because this part of the coding is quit similar. You will need the colorchart for this.
First we are going to change the background behind your stats (this is the background of all of the boxes). In my case, the background is white. Remember to use dark letters on a light background and light letters on a dark background to keep it readable. You can change the background here:
Now we are going to change the textcolors. You can change theme here (change the both colorcodes you see here, you can choose two different codes or give them the same color).
Next change will be the color of your headers above the stats. You have to change the backgroundcolor and the textcolor, you can do that here:
After that you can change the titles above your text. You can change those here:
We are now almost done! You can change the color of the navigation. This part of the code might be the most confusing. Do you see the code below in you code? This is where the navigation has to be changed.
The part where you see #nav a, #nav a:visited, is for when you are looking at the navigation doing nothing. The part with #nav a:hover is for when you are hovering over the navigation with your mouse. In the upper row you must change the background color and color (textcolor). In the second row you also change the background color and color. Dont remove display: block!!
You are done now. Past the code in your pet description to see if you have done everything right. If you dont like the colors you have chosen, you can still change them. Congratulations with your petlookup!
GIMP Tutorials ------ Downloading Gimp
Gimp is a free image editing program, which you can download on the internet. I can't give you a direct link to a site, but you can search for gimp with google. Personally, I think the site called sourceforge is a great site. If you have found it, download it and install it into your computer.
Codinghelp ------ Codes
Give the outer neopets background a color
Remove the inner neopets background (also called main background)
Give the inner neopets background a color
Give the inner neopets background a background image
Customize your scrollbar
Underline your text
Make your textbold
my text is italic
When you have made a mistake, you can strike your text
Give your text a color
Make your text BIG
Title here
Change the number after the h to make the title smaller or bigger
Give your text a background
Make a little textbox (remove the spaces in the code, otherwise it won't work)
Change the width of your textbox (remove the spaces in the code, otherwise it won't work)
Change the height of your textbox(remove the spaces in the code, otherwise it won't work)
Add a image
Codinghelp ------ Div's
Using divs is a great way to make layouts. For example the layout of this petpage is made with divs. Divs are a part of CSS. With divs you can position your text or images, and you can "style" your page. You can use divs in two different ways. Just a little warning: If this is the first time you are going to make a code, this can be difficult.
Method 1. (the disorganized way to use divs)
I don't recommend using this method, but to be complete, I will tell you how to use this. You can use this to make blogs. As I said, you can use divs to position your text.
This looks quit strange if it is the first time you see it. It also is unclear, because if you have a lot of text and a lot of divs, you can't see where your new div starts.
Though if you visit the site that uses this coding, it will look just as pretty as another site that uses Method 2. Now I will tell something about the words in the code.
In the examplecode you can see the words "position: absolute", this makes sure your div will be positioned absolute. This means your computer calculates the distance between the left top of your screen and the div, so it will be on the right place. In your code you must also include "left" and "top". These two words (with the number of pixels after it) will make sure your div will be on the place you want it to be. Left is the number of pixels your div is away from the left side of your screen, top is the number of pixels your div is away from the top of your screen. Finding out how many pixels your div is away from the top or left side from your screen is not very difficult. If you have paint, you can see a number in the bottom of your screen that changes if you move your mouse. The first number is left, the second number top.
You can make a scrollbar by putting "overflow: auto; in your code. Dont forget the ; between two things, otherwise it won't work.
Method 2. (the best way to use divs)
The difference between Method 1 and Method 2 is that this method is much more easy to use, because all of your style will be in the top of your code. This will safe you a lot of time, searching in your code to change something. See here an example
Further on, this works the same as method 1. Only thing that is diffent is that you can see a # and dot before the names of the divs, a # shows your div is a div ID. A dot before the name tells you the div is a class. You can give the divs whatever name you want. Just make sure your div has in the top of your screen the same name as where your text goes.
Codeerhulp ------ tables
Wat zijn tables nou eigenlijk? Dat kan ik het beste uitleggen met een klein voorbeeldje, kijk dit is een table:
| hoi | hoi |
| hoi | hoi |
Maar hoe maak je dat? Eigenlijk is dat niet zo moeilijk. Je moet gebruik maken van drie tags, namelijk.
En de afsluitingen van deze tags
Jep, maar wat moet je daarmee als je niet weet wat het betekent?
Table Deze tag hoef je over het algemeen maar 1 keer per tabel te gebruiken. Alleen aan het begin en het eind. Het houd je tabel als het ware bij elkaar.
Table Row (tr) Deze tag zorgt ervoor dat je een rijtje met cellen kan maken. Voorbeeldje:
| rij 1 |
| rij 2 |
Table Data (td) Deze tag zorgt ervoor dat je cellen naast elkaar kan plaatsen. Tussen deze tags zet je je tekst!! Probeer het niet ergens anders neer te zetten, want dat werkt niet. Voorbeeldje:
| cel 1 | cel 2 |
Ik neem aan dat iedereen dat begrijpt, maar dit is natuurlijk ook nog heel simpel. Je kan dit allemaal combineren. Hierdoor krijg je meerdere rijen met meerdere cellen erin, net als in het bovenste voorbeeldje.
Een randje maak je door de tag "border" toe te voegen aan je tabletag. Dit heb ik bij mijn voorbeeldjes ook steeds gedaan, omdat dat duidelijker is. Je kan ook de kleur van het randje veranderen.
| rij 1 |
| rij 2 |
Dan heb je nog de tag "rowspan" hiermee kun je rijen samenvoegen.
| hoi | hoi |
| hoi |
En colspan, waarmee je cellen samen kan voegen
| hoi | ||
| hoi | hoi | hoi |
Codeerhulp ------ Verborgen tekst
In deze tutorial zal ik je uitleggen hoe je tekst en plaatjes kan laten veranderen als je op een link of plaatje op een andere plek op de pagina klikt. Dit is een voorbeeld van wat je gaat maken:
Verander het terug
Ik zal beginnen met het stuk van de code tussen de style tags. Eerst codeer je een div die je positioneert op de plek waar je hem wilt hebben. Dit zal alle tekst gaan positioneren.
Daarna zetten we ook twee div classes in de code.
De div class ".hidden" maakt alle tekst in de tekstbox onzichtbaar_ De div class ".visible" zal ervoor zorgen dat alleen de tekst in die div class zichtbaar is.
Nu gaan we ook het stuk buiten de style tags veranderen.
Zoals je kan zien heb ik een div gemaakt die alles omvat. Daarna heb ik de div class die alles onzichtbaar maakt neergezet. Tussen die twee divs staan de zichtbare div classes. Je kan zoveel zichtbare div classes maken als je wilt.
Nu moeten we nog een menu maken, omdat je niet naar de onderste zichtbare div classes kan navigeren over de pagina als je het zo laat staan. Tussen de style tags positioneer je een nieuwe div, die je menu zal gaan positioneren.
Als je dat hebt gedaan, moeten we nog links maken die naar de visible div classes leiden. Om dat te doen, gebruik ik ankers. Zet alle ankers precies boven elke zichtbare div class en geef ze verschillende namen omdat ze anders niet zullen werken. Als je meer zichtbare div classes hebt nummer je verder met d, e, f, etc.
Om het menu te maken gebruik je de volgende code:
Als je meer zichtbare div classes hebt kan je deze links kopieren en plakken en a, b en c veranderen in d, e, f, etc.
Je bent nu klaar! Zet alles in een code en je zult zoiets krijgen:
Als je deze codering gebruikt, kan je veel verschillende dingen op je petpage zetten. Je hebt dus veel minder petpages nodig. Yay!
Codeerhulp ------ Werkende layout in Firefox
Firefox is een browser net als IE, het werkt alleen op sommige punten net iets anders. Firefox is een stuk strenger met de codering, dat kun je goed merken. Ben je een heel klein dingetje vergeten dan werkt het meteen niet meer. Hoe laat je nou je layout werken in firefox? Dat klinkt heel moeilijk, maar is het eigenlijk helemaal niet.Help, mijn tekst staat niet op de goede plek!!
Wat ik vaak zie is dat mensen een layout hebben gemaakt, een hele mooie in IE. Maar als je in firefox gaat kijken staat alle tekst rechts door elkaar. Heel irritant. Maar waar ligt dit dan aan? Nou, dit komt dus doordat jij waarschijnlijk bent vergeten je eenheden achter de cijfertjes van je div te zetten ;)
Dus wat moet je nou doen? Juist ja, de eenheden achter je div gaan zetten. Laat ik het even voordoen met de rommelige variant div aangezien die veel worden gebruikt in gildelayouts.
De div hierboven is dus fout. De div hieronder laat zien hoe het wel moet
Ik hoop dat je het zo een beetje begrijpt ;) Als je het verbetert zoals ik het heb gedaan in het voorbeeld hierboven zou je tekst op de goede plek moeten komen te staan. Als dit niet zo is, moet je even kijken of je het "position: absolute; niet bent vergeten. Als je dat niet hebt krijg je namelijk ook wat raars xD. Maar dat geldt natuurlijk ook voor IE...
Help, de kleuren van mijn tekst zijn in firefox fout!!
Grote kans dat jij het beroemde en veel geprezen # voor je HEX-code bent vergeten, kijk maar eens. Als je dus als code bijvoorbeeld ff0000 (=rood) hebt staan dan krijg in firefox zwarte letters, terwijl je als je #ff0000 hebt staan gewoon de goede rode kleur krijgt. Vergeet dus het # niet!
Codeerhulp ------ Neoforum fonts
Op de borden zie je veel mensen met een leuk zelfgemaakt, of premade fontje. In deze gids zal ik je uitleggen hoe jij dat ook kan maken. Een font bestaat uit twee delen, namelijk het NeoHTML en je siggy (neo-ondertekening)
Hier kan je de plek vinden waar je jouw font kan veranderen. Je komt dan op een pagina waar je alle dingen die te maken hebben met de neoborden kan veranderen. Ga naar het stukje dat je hieronder ziet staan.
Misschien heb je al ervaring met andere codes, zoals op petpages en lookups. Neohtml lijkt er best wel op, maar is toch niet helemaal hetzelfde. Zo gebruik je in NeoHTML niet de driehoekige haakjes, maar de vierkante haakjes. Ik zal hieronder een lijstje zetten met daarin wat wat betekent in NeoHTML, dan ga ik je daarna uitleggen hoe je die codes samenvoegd om er een mooi geheel van te maken.
NeoHTML: Dit woord zet je op de plek waar jij wilt dat de tekst die je post terecht moet komen.
[font] hier de tekst [/font] = de code die je gebruikt om aan te geven dat de tekst die tussen deze tags
staat een bepaalde grootte, kleur en lettertype moet krijgen.
[center] tekst [/center] zorgt ervoor dat je tekst in de midden word gezet.
c = color = je tekstkleur
f = font-family = je lettertype
s = size = tekstgrootte
[b] tekst [/b] Zorgt ervoor dat je tekst dikgedrukt word
[u] tekst [/u] Onderstreept je tekst
[i] tekst [/i] Maakt je tekst schuin
[sup] tekst [/sup] zorgt ervoor dat de tekst tussen deze tags hoger komt te staan dan de andere tekst tussen de font tags.
[sub] tekst [/sub] zorgt ervoor dat de tekst tussen deze tags lager komt te staan dan de andere tekst tussen de font tags.
[br] zorgt ervoor dat de tekst die erna komt op de volgende regel begint
[p] zorgt voor een witregel.
Dit zijn ongeveer alle codes die je moet weten om een mooi font te maken. We gaan ze nu samenvoegen. Ga naar de pagina waar je je font kan veranderen en klik in de bovenste regel. Eerst gaan we ervoor zorgen dat we geen lelijke stippellijn midden door ons font krijgen. Dit doe je door een vierkant haakje dat naar rechts wijst in het bovenste balkje te zetten, en een vierkant haakje dat naar links wijst in het tweede balkje te zetten.
Persoonlijk vind ik het het mooiste als een fontje in het midden staat. Daarom begin ik met een center.
Code:
Balkje 1
[center] NeoHTML [/center][
Balkje 2:
]
Beetje saai zo he? Daar gaan we nu wat aan doen, door de tekst een kleurtje te geven. Ik zal de code die ik net al gegeven heb steeds een beetje aanpassen, zodat we uiteindelijk een mooi resultaat krijgen.
Balkje 1
[center][fontc=#0072FF] NeoHTML [/font][/center][
Balkje 2:
]
De tekst word nu als het goed is blauw. Als je een ander kleurtje wil, kan dat natuurlijk ook. Een kleurenkaart kan je hier vinden. Je kan natuurlijk ook zelf een kleurcode vinden als je een programma als photoshop of gimp hebt.
Je kan natuurlijk ook het lettertype en de grootte van je tekst veranderen. Dat doe je zo:
Balkje 1
[center][fontc=#0072FFs=1f=verdana] neoHTML [/font][/center][
Balkje 2:
]
De screenie is wat verkleind, daardoor kan je het verschil tussen de twee plaatjes bijna niet zien. Maar als je het in je eigen font zet dan zul je zien dat het tweede een stuk flitsender is dan het eerste.
Wat we nu gaan doen is het fontje wat opfleuren met leuke smileys of tekentjes. Onder de tekst maak ik een siggy. Omdat ik altijd last heb van ruimtegebrek, ga ik meestal verder in het eerste balkje, totdat het niet meer past (of ik moet stoppen omdat ik de tags anders niet meer af kan sluiten). Achter de eindtag van font zet ik dus een [br] om aan te geven dat ik op de volgende regel wil beginnen met mijn siggy. Dan zet ik daarachter een nieuwe fonttag, met nieuwe kleuren, grootte etc. Een goed font voor leuke tekentjes is wingdings, die ga ik dan ook gebruiken.
Balkje 1
[center][fontc=#0072FFs=1f=verdana] neoHTML [/font][br][fontc=#FDCB53s=4f=wingdings]u[/font][/center][
Balkje 2:
]
Dan vind ik het leuk om nog zo een tekentje doen in een ander kleurtje. Omdat het nieuwe stuk niet meer in het bovenste balkje paste, staat dit nu in het onderste balkje. Ook heb ik de [/center] verplaatst, omdat ik wil dat alles word gecentreerd en niet alleen het bovenste balkje.
Balkje 1
[center][fontc=#0072FFs=1f=verdana] neoHTML [/font][br][fontc=#FDCB53s=4f=wingdings]u[/font][
Balkje 2:
][fontc=#FF82E9s=4f=wingdings][sup]u[/sup][/font][/center]
Een tekstje in het siggy is ook wel leuk. Dus ga ik die ook er nog even in zetten, zodat je kan zien hoe je dat doet. Om dat een beetje mooier te maken, gebruik je onderstrepen_ dik maken of schuine tekst. Je kan alles dik drukken, maar bijvoorbeeld ook de helft dik en de andere helft schuin. Dat staat best wel leuk.
Balkje 1
[center][fontc=#0072FFs=1f=verdana] neoHTML [/font][br][fontc=#FDCB53s=4f=wingdings]u[/font][
Balkje 2:
][fontc=#FF82E9s=4f=wingdings][sup]u[/sup][/font][fontc=#FF0078 s=4f=serif][i]/~H[u]eli[/u]saem[/i][/font][/center]
Het is eigenlijk gewoon een beetje puzzelen, ik hoop dat je nu snapt hoe je een eigen fontje kan maken. Het is niet zo moeilijk, je moet het alleen eventjes door krijgen.
Als je wilt mag je ook mijn code gebruiken, hierboven, maar zeg dan niet dat jij hem hebt gemaakt. Oke?
Veel plezier met alle fontjes die je nog gaat maken. Zie hier het eindresultaat!
More ------ Kleurenkaart
| #FFFFFF | #FFFFCC | #FFFF99 | #FFFF66 | #FFFF33 |
| #FFE4A3 | #FDD77D | #FDCB53 | #FFCC33 | #FFC412 |
| #FFE4C2 | #FECC8A | #FFB759 | #FFA32B | #FF9000 |
| #FED1C6 | #FFAA96 | #FD8A5C | #FF4B21 | #FF4800 |
| #FFC2DF | #FF83BD | #FF4A9F | #FF0078 | #BE0059 |
| #FFBAF3 | #FF82E9 | #FF49DF | #FF00D2 | #B70097 |
| #F5A8FE | #EE63FF | #E823FF | #E400FF | #9B00AD |
| #E59EFF | #D461FF | #C11AFF | #A200DE | #74009F |
| #C994FF | #A54EFF | #8C1CFF | #7800F2 | #6200C7 |
| #C7AFFF | #9C70FF | #6F30FF | #4500E1 | #3701B2 |
| #B1BAFF | #7989FF | #384FFF | #001EFF | #0019D2 |
| #B9D8FF | #76B3FF | #3690FF | #0072FF | #0048A0 |
| #B6E9FC | #70D8FF | #30C7FF | #00BAFF | #0098D0 |
| #D0F7FC | #88F2FF | #81F2FF | #37E7FC | #00E4FF |
| #ABFFEC | #6EFFDF | #00FFC6 | #01C79B | #009372 |
| #A6FFCE | #60FFA7 | #00FF72 | #00C95A | #019F47 |
| #99FFA7 | #58FF70 | #00FF24 | #00C41C | #008513 |
| #C0FFAF | #87FF67 | #36FF00 | #27B900 | #176E00 |
| #CCFF99 | #CCFF66 | #CCFF33 | #99CC00 | #366E00 |
| #C2DBB6 | #7EAB69 | #43732B | #295A11 | #164200 |
| #E8D6B3 | #CFAF72 | #B37600 | #744C00 | #462E00 |
| #D8A296 | #A15C4C | #682A1C | #732C1C | #4B0E00 |
| #CFCBE3 | #8F87B2 | #564890 | #271869 | #0C003F |
| #CCCCCC | #999999 | #666666 | #333333 | #000000 |
You can use this card when following the tutorials. You can choose a better color than the premade color in the codes. If you have chosen a color, you can copy and paste the color in the place of the old color.
More ------ FAQ
Help I cant enter my guild anymore because I forgot to enter Join and Chat on my Overlay Guildlayout!You can solve this problem easily by yourself. The only thing you need is your guildlink to enter your guild. You can find your guildlink by using the link of another guild and put your guildnumber instead of the number of the other guild. You can find the number of your guild in the link of your guilds main page. For example, if you have collected this information:
Van dit:
http://www.neopets.com/guilds/guild_link.phtml?id=2039488
http://www.neopets.com/guilds/guild.phtml?id=1234567
You can make this link:
http://www.neopets.com/guilds/guild.phtml?id=2039488
If you paste that link into your adressbar you can enter your guild again and change the links at Join and Chat.
What width and height can I use best for my layout?
A lot of people have a screen of 1024 x 768 pixels. From that about 1008 px will be the width of your internetwindow. That is why most of the time, I use a with of 1000px, otherwise a scrollbar will appear (which is NOT pretty). The height of your layout is not very important, just make it not too big.