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.

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!

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.

Summary
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 need to find images or are having trouble deciding on colors etc. you might want to check out this page and 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. As for now, go and share your beautiful talk bubbles with the world!