Hickory's Guide to BBCodes - CA edition

So after having done a bit of profile editing myself and seeing how it doesn't really seem to be a common thing to do, I figured I'd give it a shot and make a blog detailing a few of the codes currently at our disposal. I know it isn't crazy difficult once you get a basic understanding of how they work - and I'm sure there are a lot of you already familiar with how to use them - but I wanted to compile them here for everyone to see regardless as I know there are probably some people out there looking at a coded profile and going "Huh, how'd they make it all cool looking like that? I wanna have that too!" In order to make any of these codes work, we have to ensure we type them out properly. Since, if I just type the code exactly how it's written, the code will be used and turn invisible, so just keep in mind that that everytime I show a code with an arrow like this < it's supposed to be replaced with a bracket like this [ for the code to work - the same goes for this arrow > being replaced with this bracket ]. Please note that there might be bbcodes out there that work on other sites but which will not work here on CA - I encountered a few when trying to test the limits of what could and could not be done. All codes provided in this blog are guaranteed to work - if you find a code that isn't on this list I'd be more than happy to add it as I am no expert in this whatsoever.

---

Keep in mind that these codes are for profiles and blogs only. Using them anywhere else will get you into trouble.

---

Let's get started with the basics - which I'd say that's the typographical emphasis - AKA bold, italic and underlined. First, however, we need to look at how these codes actually work - it really is quite simple. We'll start off with making a word italic; simply type in <i> before the word and then </i> after the word. So <i>Hello!</i> become Hello! when replaced with brackets. The <i> without the slash marks the start of the code, while the </i> marks the end of the coded text. It is important that you remember to end off any code you start as it can cause weird glitches to happen with the rest of the site if you don't. Where you start and stop the code is completely up to you. You can start a code in one paragraph and have it stop mid-way through the next one, maybe only code a single word, or even the entire blog you're working on! It's all up to you. Since we've gone over how to make something italic in detail, figuring out how to do the other two should be pretty self explanatory. I've compiled a list of all three of them below: <i>For italic</i> makes your text: For italic <b>For bold</b> makes your text: For bold <u>For underlined</u> makes your text: For underlined Combining two or more of these is also an option, simply but both codes before and after the text you want formatted. <u><b>So that this</u></b> becomes this <u><b><i>And that this</i></u></b> becomes this. Let's move on to the next thing; Honestly this one is really simple.... as long as you know right from left. Same rules for how to use the code we went over in the typographical emphasis section applies here so the codes are as follows: <left>Aligns your text to the left - this is the default on site</left> Sometimes you might be working on a part of your profile that's supposed to be split into sections, but adding more spacing between each paragraph just looks kinda silly, doesn't it? Fret not, I have a bbcode that solves that! Meet the horizontal line. Unlike the codes we've previously gone over, this bad boy doesn't need a start or an end, simply type in <hr> to put it in your profile - pretty neat!

---

It looks like this! Next thing I bet a lot of you will find useful is the ability to change font size! Like with most of the codes we've gone over it's important to add a start and an end to your codes. Here we go: <size=1> For text like this <size=2> Is approximately the default size <size=3> For text like this <size=4> For text like this <size=5> For text like this <size=6> For text like this <size=7> Is the maximum Now that we've had our fun with sizes it's time to get real fancy. Color allows you to do a lot of neat things - I do have one request though please don't misuse this and make profiles with rainbow colored text that is hurtful to most people's eyes...... Ahem, to the code. This is how you do it: <color=red>Will make the text red</color> like this What I find neat about the color codes is that you can either type in a name of a color, or use the hexcode for the color you want. A full list of color names can be found here: http://absitomen.com/index.php?topic=331.0 and here's a hex-color picker: http://www.color-hex.com/ Time to go over what a lot of you probably have been waiting for... inserting images. Again, starting and ending the code is important, yada yada, you get it at this point. For this, it is important that you link directly to the image itself and not just the site the image is on. Most images on the net you can right click on and select the option to "Open image in new tab" - that's the link you want to copy and paste when you use this code. As an example let's use the logo of Canterlot Avenue. <img>https://canterlotavenue.com/PF.Site/flavors/newmaterial/assets/logos/CA_Logo_idea.png</img>; becomes Adding in quotes makes your text show up in a nifty 'box'. You can use this to either make a header or a section of your profile stand out more. <quote>The code is like this....</quote> You can also add a title to the box by changing the code to <quote=This is the title>This is the text....</quote> . NEW! I'm not sure when this was added, but it seems like text linking now is finally working! Simply grab the URL you want to link to and replace it with the URL part of the code below. And then replace TEXT with whatever text you want to link-ify! So this; <link=URL>TEXT</link> Will now link back to this blog and becomes TEXT

---

Here's a link back to the full list of guides like this one: https://canterlotavenue.com/blog/502/hickorys-full-guide-to-ca/