User:JFHavoc/Talk Bubble 101

Welcome to Talk Bubble 101. I've made this page to show users how to create their own talk bubbles. Making talk bubbles can actually help with a lot of things including a better understanding of wiki format and coding. When I first joined the wiki the first thing I did was teach myself how to make a talk bubble. If I hadn't done that I would probably never have done anything on this wiki. Knowing how to make a talk bubble gave me enough knowledge of how wiki's work and how to edit a wiki to turn me into the editor I am today. There are all kinds of talk bubbles and I will be explaining how to make each kind of talk bubble and how to customize them individually. You usually want your talk bubbles to be unique from others. They're kind of like a trade mark. While there is almost an infinite number of possibilities I will try to sum it up as much as I can here on this page.

NOTE: Even with the help of this guide making talk bubbles can be very confusing and people who are new, not just to editing but, to wikis in general may have a very tough time with it. It's important to persevere.

A Basic Talk Bubble
If you were to just have a talk bubble without any coding or customization involved it would look like this:  You'd probably be better off just not using a talk bubble. Talk bubble customization is very easy if you know how to do it. Here is the basic coding for a regular talk bubble called the TalkTextTest2 talk bubble:

If you're a wiki-novice that probably looked like total gibberish. Don't worry you'll understand eventually. Here is what talk bubble coding looks like when all the necessary information is supplied:

If you were to use this coding for a talk bubble you would get something that looks like this:

If you take a look at the coding for the talk bubble you can see that for the "color=" section I put red, thus the top half of the talk bubble is red. For "color2=" I put black so the bottom half of the talk bubble is black. You should probably understand how all that works now, but you may be wondering what those and  things are for. Well if you wanted to use this talk bubble without having to type out that giant chunk of coding every time you use it you'd save it to a template (which I'll explain later on in this page). Whenever you use the talk bubble you'd type something similar to this:

See how I put those "time=" and "text=" sections? Well anything following the equals sign in "text=" will be placed wherever the symbol is in your coding. Since we put on the bottom black half of our talk bubble that's where the text would appear. It's the exact same thing with. The reason I have you put those five squiggly symbols: is because anywhere you type five of those it will automatically put the time there. So if you don't want to type in whatever time it is in that section you can just put those five symbols and the wiki automatically does it for you. If you think you're ready to make your own talk bubble skip down to the Publishing your Talk Bubble section. If not continue on the road to Talk Bubble enlightenment.

A more Advanced Talk Bubble
You should have a pretty good understanding of how talk bubbles work and how to customize them by now. We're going to try a talk bubble that's just a little more difficult this time. Like in the last section I'll show you what it looks like without any coding or customization involved.  You may be thinking that this is exactly the same as the last talk bubble, well it is. Although this one, believe it or not, can do much more than the last one you learned about. I'll show you the coding for this one as well:

Hey look! More gibberish! That is a very long line of coding in the middle isn't it? There is a lot of necessary coding in that line. Anywhere I said "your user name here" You really just have to put your user name. You also have to put the font type and color in quite a few places. If you read through it you'll see I wrote that down a lot. You'll also notice image size, it is recommended that most talk bubbles use an image size of 70px. As for everything else you should notice that it is almost exactly the same as the last one, but if we were to fill in the necessary information on this one it would look something like this:

When this coding is applied to a talk bubble you get something like this:  Other than the obvious differences (like color, quotes, etc.) what has changed? First off, You may have noticed that after your user name it says "Talk!" This is a link to your talk page. The other one had this part of the talk bubble down where the time goes. Is it that big of a difference? No, not really. Is it pretty awesome? I think so. You'll also notice that the text on the top half of the talk bubble is much bigger. That's because if you look at the coding you'll see that the size in most places is 3. 3 is a little bigger than your average text. If you don't like your text really big you could change it to 1 or 2. If you think it should be bigger then you can change it to 4 or 5 (but that's getting a little extreme don't you think?) Another thing I feel I should point out since it's new to this talk bubble is the color of the borders. On the top half you can clearly see the border is a different color. On the bottom half you can see that it is also a different color border, although you may have to look kind of hard to see a border at all on the bottom half. If you think that the border should just be the same color you don't have to use the "border2=" option. If you don't include it in your coding the coding automatically assumes that the bottom half should have the same color border as the top half. As for using this talk bubble, it is the same code as last time. Absolutely nothing has changed in the use of this talk bubble. If you don't know how to use it without typing in this giant hunk of coding skip down to the Publishing your Talk Bubble section. As for now, we get to try even more advanced talk bubbles! WOO HOO!

Skinny Talk Bubbles
I'm not gonna waste my time putting that lifeless hunk of a talk bubble that I started the other two sections with. Let's get down to business. What is a skinny talk bubble? It's a talk bubble invented by Troisnyxetienne that has three sections instead of just two. What does the third section do? Absolutely nothing. You heard me, it does nothing. Why do we have a third section then? Because it looks cool. As you're going to find out the majority of additions to talk bubbles are primarily for show. But what other reason is there for improving a talk bubble? The entire reason we use them is because they look cooler than plain old text. Here is the basic coding for a skinny talk bubble:

You'll notice this coding looks similar to the advanced talk bubble. Something I forgot to point out in the last section is "textcolor=" which normally refers to the color of the text in the top half now refers to the color of the text on the bottom half for the advanced talk bubble and the middle half for the skinny talk bubble. This is because in that long line of coding at the center you're already specifying the color of the text and the font type. So "fonttype=" does the same thing. I felt I should point that out in case you get confused. Here is the coding with the necessary information filled in:

Now let's see what these skinny talk bubbles look like shall we:  You may now begin ooohing and ahhhing. You see why it's called skinny now don't you. Even the text is small. You also understand the pointlessness of the third section, but it wouldn't be the same without it. It also kind of frames the text, and I believe that if it wasn't there this would just be a pathetic sliver of color and text. That extra one or two millimeters really makes the difference. A few things you should notice about this one. First off, where's the time parameter? I saw it in the coding where did it go? It's directly after the quote, but unless you're actually using the code that I showed you in the first section you're not gonna see it. Also, for skinny talk bubbles I recommend using an image size of 60-65px instead of seventy. Lastly, you should notice... actually... I'm pretty sure that's all I have to point out. You're a smart person right? You should see all the differences. I figure after reading all the stuff on this page (you didn't just skip to this section did you?) you should pretty much understand how talk bubbles work. So I guess now we'll move onto the final kind of talk bubble.

The Skinny Inverse Talk Bubble
A Skinny Inverse Talk Bubble? Inverse... where have I heard that before? Oh that's right, I heard it in math class! What is math doing in a talk bubble? Well if you guys remember what an inverse is it is basically reverse. So what can you assume out of that? Well I won't spoil the surprise, unless you already figured out what it is. If you have then you have a bright future! If you haven't you have a pretty bright but slightly dim future. (Just kidding). Before I show you the basic coding I feel I should give Troisnyxetienne credit again for creating this kind of talk bubble. Now the basic coding:

Well, have you figured out the secret of the skinny inverse bubble yet? I don't have anything to explain here really. You guys know what goes where by now. So here is the coding with the necessary information:

Have you figured it out now? Okay okay, I'll show you what it looks like: 

Yup, that's the secret. The text goes on the top and your user name and quote go on the bottom. This is probably one of the most difficult talk bubbles to make because it's so... unusual. Like the normal Skinny Talk Bubble I recommend 60-65px on images. The time is also after the quote like on the last one. Other than that it's pretty much what I've been teaching you this entire page. That's every style of talk bubble currently on the KHWiki. Onto the next section!

Accessorizing your Talk Bubble
By now you must be thinking: "How much more can we learn?" Not too much more, we're almost finished. In this section I'm going to show you how to add a little extra flair to your talk bubble. I've already taught you how to make the four types of talk bubbles, but if you really wanna spice up your talk bubble this section is for you. If you're fine with the way your talk bubble looks already you can go ahead and skip down to the next section. So, what do I mean when I say accessorize? Well as an example, let's take the advanced talk bubble I used in section two.  This talk bubble features Roxas, so let's say whoever is using this talk bubble has a Roxas character theme. They may want to add a couple more things to this talk bubble to really show qualities of Roxas. One of the most basic ways to do this is to add a small (about 5px-20px depending on the image) image right before the tag. If we did that with Roxas, it would look something like this. Now, you should notice that the coding I just put in is identical to the coding used to make the talk bubble originally, with one small difference. In the "text=" section, right before the tag I added a small image file. Let's see what the talk bubble looks like with that image there.  So what's changed? One small thing. The symbol from Roxas's necklace at the beginning of Kingdom Hearts II is now at the beginning of the text section. This doesn't affect the way the talk bubble works at all. What's the point? You should know this by now. To make it look cooler. Any and all talk bubble innovations are just to make them look cooler. Talk bubbles were invented just to make text look cooler! So, now that we've added a little flair to this Roxas talk bubble, are we good to go? Well, maybe, but I think we can do better! Roxas was a member of Organization XIII for a good long while, so why not add an Organization Sigil in there? I saw we go for it! Let's see what the coding would look like with that. You have to scroll right on the scroll bar to see the difference. So what've we done now? Well, just like last time we've inserted another image into the coding. This time it's up at the top before the main quote. So let's see what it looks like now, shall we?  I'd say it's looking pretty good right about now. Could we go even further? Of course we could! But, if I were to cover every possible aspect of accessorizing your talk bubble this section would go on forever. So I'm just here to make sure you get the general idea of how to accessorize your talk bubble. Remember, you can add an image into your talk bubble almost anywhere, as long as you don't disrupt the coding. With talk bubbles the sky is the limit, so use your imagination, be creative, and be unique. It's your talk bubble, so do what you want with it. As for now, I think it's about time we figured out how to publish our talk bubbles. Next section, here we go!

Publishing your Talk Bubble
With my guidance I hope you were able to create and customize a unique talk bubble, one that you're proud of. Now we must show the world your creation! Let's publish that bad boy! The first thing you need to do is create a new article on the wiki. Name the page "Template:your user name here. For me it's: Template:JFHavoc. Now take the coding for the talk bubble you've created and put it on the page. Now you simply save the page. Wow, that was easy. Now instead of typing that giant wall of coding every time you want to use your talk bubble all you have to do is type this:  Whatever you want to say goes in between "text=" and the ending brackets. For me it looks like this:   When I type that code I get this:  That right there is my customized talk bubble. As you can see I use the Advanced talk bubble, but you can use whatever talk bubble you thought was the best. So we're done with this page right? WRONG! To the next section!

Publishing Multiple Talk Bubbles
One trend on the KHWiki is having talk bubbles to represent multiple emotions, or just having multiple talk bubbles for the fun of it. You may be thinking that you can just put another talk bubble on your template page if you want another one. ''' WARNING! DO NOT DO THAT!''' That can only lead to bad things. If you want more than one talk bubble this is what you have to do. First off, put this coding at the beginning of your template: {{#if:{{{text|}}}| Directly after that put either TalkTextTest2 or User:Xiggie/TalkTemplate depending on which one your talk bubble uses. Then below that you can put the rest of your first talk bubble. It would look something like this: {{#if:{{{text|}}}|{{TalkTextTest2 }}
 * image=Sora-Normal.jpg
 * color=red
 * color2=black
 * textcolor=white
 * textcolor2=white
 * line=white
 * fonttype=arial
 * name=JFHavoc
 * sig=My friends are my power!
 * time={{{time}}}
 * text={{{text}}}

So you've got that down. Let's say you want to add a happy Sora Talk bubble. You'd do the exact same thing as last time (but don't but ) Except this time instead of putting {{#if:{{{text|}}}|{{TalkTextTest2, you'd put {{#if:{{{happy|}}}|{{TalkTextTest2 See what I changed? Instead of text it is now happy. I'll explain this more later on. You'll also want to replace {{{text}}} with {{{happy}}}. So now your template page would look something like this: {{#if:{{{text|}}}|{{TalkTextTest2 }}|{{#if:{{{happy|}}}|{{TalkTextTest2 }}
 * image=Sora-Normal.jpg
 * color=red
 * color2=black
 * textcolor=white
 * textcolor2=white
 * line=white
 * fonttype=arial
 * name=JFHavoc
 * sig=My friends are my power!
 * time={{{time}}}
 * text={{{text}}}
 * image=Sora-happy.png
 * color=red
 * color2=black
 * textcolor=white
 * textcolor2=white
 * line=white
 * fonttype=arial
 * name=JFHavoc
 * sig=My friends are my power!
 * time={{{time}}}
 * text={{{happy}}}

Cool, but maybe you want to add a Riku talk bubble just for the fun of it. It doesn't have to represent an emotion, you want a Riku talk bubble and you're getting one! So add |{{#if:{{{riku|}}}|{{TalkTextTest2 to your template and then the coding for your Riku talk bubble. Now your template should look like this: {{#if:{{{text|}}}|{{TalkTextTest2 }}|{{#if:{{{happy|}}}|{{TalkTextTest2 }}|{{#if:{{{riku|}}}|{{TalkTextTest2 }}
 * image=Sora-Normal.jpg
 * color=red
 * color2=black
 * textcolor=white
 * textcolor2=white
 * line=white
 * fonttype=arial
 * name=JFHavoc
 * sig=My friends are my power!
 * time={{{time}}}
 * text={{{text}}}
 * image=Sora-happy.png
 * color=red
 * color2=black
 * textcolor=white
 * textcolor2=white
 * line=white
 * fonttype=arial
 * name=JFHavoc
 * sig=My friends are my power!
 * time={{{time}}}
 * text={{{happy}}}
 * image=Riku2-ChofMem.png
 * imagesize=67px
 * color=#B0C4DE
 * color2=#87CEEB
 * textcolor=#000000
 * textcolor2=#000000
 * line=#000000
 * fonttype=Trebuchet MS
 * name=JFHavoc
 * sig=How am I gonna face everyone ?
 * time=Darkness !
 * text={{{riku}}}

You're pretty content with those three talk bubbles. But you can't just leave your template like that. That will lead to a lot of problems. To finish up we have to add a few more things. After the last two } symbols on your template put a space and then put two of those symbols for every talk bubble you have. If you have three talk bubbles you put six of those symbols. If you have twelve talk bubbles you put twenty-four of those symbols. The put: After that on the line below all the } symbols you have to put in the coding I taught you in the previous section for each talk bubble but a little differently. Like: {{JFHavoc|text={{{text}}}|time={{{time}}}}} Do that for each talk bubble (but put your user name not mine) and change "text=" and "{{{text}}}" to whatever you replaced them with in the template. For the happy one it would be: {{JFHavoc|happy={{{happy}}}|time={{{time}}}}} And for the Riku one it would be: {{JFHavoc|riku={{{riku}}}|time={{{time}}}}} This is a difficult process isn't it? But it'll all be worth it! The final thing you have to put on your page is. After that you can save the page. It should look something like this right about now: {{#if:{{{text|}}}|{{TalkTextTest2 }}|{{#if:{{{happy|}}}|{{TalkTextTest2 }}|{{#if:{{{riku|}}}|{{TalkTextTest2 }} }}}}}} {{JFHavoc|text={{{text}}}|time={{{time}}}}} {{JFHavoc|happy={{{happy}}}|time={{{time}}}}} {{JFHavoc|riku={{{riku}}}|time={{{time}}}}}
 * image=Sora-Normal.jpg
 * color=red
 * color2=black
 * textcolor=white
 * textcolor2=white
 * line=white
 * fonttype=arial
 * name=JFHavoc
 * sig=My friends are my power!
 * time={{{time}}}
 * text={{{text}}}
 * image=Sora-happy.png
 * color=red
 * color2=black
 * textcolor=white
 * textcolor2=white
 * line=white
 * fonttype=arial
 * name=JFHavoc
 * sig=My friends are my power!
 * time={{{time}}}
 * text={{{happy}}}
 * image=Riku2-ChofMem.png
 * imagesize=67px
 * color=#B0C4DE
 * color2=#87CEEB
 * textcolor=#000000
 * textcolor2=#000000
 * line=#000000
 * fonttype=Trebuchet MS
 * name=JFHavoc
 * sig=How am I gonna face everyone ?
 * time=Darkness !
 * text={{{riku}}}

Now if you were to type: {{JFHavoc|time=|text=}} Assuming we're using the example template I used we would get the normal Sora bubble. If we typed: {{JFHavoc|time=|happy=}} We would get the happy Sora bubble. Finally, if we typed: {{JFHavoc|time=|riku=}} We would get the Riku talk bubble. Now onto the final section.

Talk Bubble Ranks
If you read even just one section of this guide it is possible that you qualify for one of five talk bubble making ranks. The ranks, along with the conditions to achieve said ranks will be posted below.
 * Talk Bubble Novice - A Talk Bubble Novice is a user who has created at least one Talk Bubble, posted it to a template, and successfully used it in a conversation.
 * Talk Bubble Pro - A Talk Bubble Pro is a user who has met the requirements to become a Talk Bubble Novice and must also have created a Talk Bubble for another user.
 * Talk Bubble Expert - A Talk Bubble Expert is a user who has met the requirements to become a Talk Bubble Pro and must also have successfully posted more than one Talk Bubble to their Talk Bubble Template.
 * Talk Bubble Master - A Talk Bubble Master is a user who has met the requirements to become a Talk Bubble Expert and must also have created one of each kind of Talk Bubble along with creating a Talk Bubble for at least five other users.
 * Talk Bubble Legend - A Talk Bubble Legend is a user who has met the requirements to become a Talk Bubble Master and must also have posted at least seven Talk Bubbles to their Talk Bubble Template along with teaching at least ten other users how to make a Talk Bubble.

Summary and Links
I hope you learned a lot by reading this page. You should have learned how to make four different kinds of talk bubbles, how to customize them, how to publish them, and how to publish more than one. If after all this you still have questions feel free to leave me a message on my talk page and I'll be happy to help you in any way I can. If you're out of ideas you might want to check out this page. Talk bubble images can be found here and a list of colors is on this page. Also, if you would like a custom talk bubble image made I recommend asking Saxisai or LegoAlchemist for help. They're really amazing image editors and I'm sure they'd be more than happy to help you. If you would like a custom image similar to the one used on my talk bubble I can try to make one for you. A custom image makes your talk bubble even more unique. If you'd like to find some of the small theme images used for accessorizing your talk bubble LegoAlchemist has a couple of them here, along with other images he's created. (Not necessarily for talk bubbles). If you have any input or questions about this page place them on my talk page, and I'll get back to you as soon as I can. As for now, go and share your beautiful talk bubbles with the world!

Links Mentioned Above

 * My Talk page.
 * Troisnyxetienne's Talk Template Archive.
 * KKD's Talk Bubble Lab.
 * LegoAlchemist's Talk Bubble Image Archive.
 * LegoAlchemist's Image Gallery.
 * List of colors and their HTML codes.