Made by shadowsquid86Markup Magic: a Guide to Markup
Introduction and HistoryThe year was 2008. I noticed a new member posting a thread asking the same question as everyone else. “How do I make color?”. I had answered this question about a dozen times before, pointing toward the “Using Markup” under the emotes. But it was this time, where I sat and thought. That explanation was so limited, it barely scratched the surface. So I began writing a guide. Simply named “A guide to Markup”, the guide covered colors, tricks, and all sorts of tips on using markup. My plan was to post a link to this guide whenever someone asked the question, rather than posting a link to ACC’s guide. But then, the guide on its own became popular, simply among the Site Support. I changed the title to “Markup Magic: a Guide to Everything Markup!” and then later rewrote the guide using new information gathered. Upon its anniversary, I revamped the guide to include a colored color list, rewrites of sections, and even some new sections. Not to mention a little bonus markup added to the guide. The original is now spiraling towards 1000 posts, at the time of this writing it is near the 800 mark. Months later, the guide was stickied by BowserBasher. The version you read now is an edited “official version”.
I’d like to thank BowserBasher for the sticky, the rest of the community for your support, and all the guide’s fans over its life. Proceed to view the actual guide. Feel free to ask questions, but keep the rules in mind. Enjoy.
-shadowsquid86 (June 23rd, 2009)
Over the many years of ACC, there has been an oft repeated question. “How do I make color?”. The answer would be through markup. Perhaps you’ve heard of the “Using Markup” guide under the emotes. This guide covers more then simply how to color words, but how to manipulate text in ways you never knew possible. This is a decent sized guide, so I recommend using Cntrl+F to search if you are looking for something in particular.
Table of Contents:I- What is Markup?a) Defining Markup
b) The Basics
II- Colorsa) Using Colors
b) Color List
c) Gradients (Tektek)
d) Word/Name Colors
III- Other Markupa) The Big Three
b) Spoiler
c) Blockquote
d) Horizontal Rule
e) Hyperlink
IV- Emotesa) Using Emotes
b) Emote Issues
c) Other Info
V- Advanced Tricksa) Showing Codes
b) Hexadecimal
c) Centering Text
b) Combined Codes
VI- Additional Informationa) Donations
b) Overuse of Markup
c) Admin Markup
d) Reference Links
Section I- What Is Markup?
(1a) Defining MarkupMarkup is a code that changes the appearance of your text, or can give it new attributes. The point of this is to add emphasis, but you can use it many ways. You can find the most basic of information at
(?) Using Markup under the emotes while making a post, but that just scratches the tip of the iceberg. With Markup, you can make your profile a rainbow, add emphasis to a name, or link friends to a favorite picture. It’s not very hard, and the possibilities are endless!
(1b) The BasicsEssentially, Markup is done by entering various codes inside “[]“ brackets. You enter the markup you want in the brackets preceding your text, and reenter the code with a forward slash “/” before it (keep in mind that backslashes don’t work). So usually a markup code would look like [code]text[/code]. You might think, “Hey, that’s not the text I wanted! Nothing changed!”. However, when previewing or posting your message, the text between the codes will have changed, while the code itself will not appear. Only the text surrounded by the markup codes should be affected. If something came out wrong, make sure you entered everything correctly. You can use as many kinds of Markup as you want on even the same text, or different markups within different parts of the same word! All of which will be covered later in the guide.
Section II- Colors
(2a) Using ColorsCode: [color=*]TEXT[/color]
Display: TEXT**
Code: [colour=*]TEXT[/colour]
Display: TEXT**
(*Denotes a color name or code.)
(**The blue color is for demonstration purposes. Blue isn’t the only color you can make.)Colors are likely the most popular markup codes, and also the most variant. Admit it, this was the only reason you read the guide. Color codes change the color of your text to any hue imaginable. After the “=” sign in the code, where the asterisk is placed above, type the color that you would like your text to be. It’s a good idea to preview the post to make sure it’s the color you wanted. Note that the other spelling, “colour”, works as well. Keep in mind that you only need to enter the actually color and equal sign in the code preceding the text, not the one afterwards, meaning you enter [color=red]TEXT[/color], not [color=red]TEXT[/color=red].
(2b) Color ListThis is a very expansive list of colors that can be simply plugged into the code to generate the color you desire. Some are very similar, and some are hard to see, but it is a great list nonetheless. Note that this is not a full list, as you can put any slight change of color in the code. Check “hexadecimal” in Section 5 to find out more. This list was taken from the profile of
BargainBob, so give him the credit for the list. It was, however, colored and tweaked by me. The bullet next to the color is what the color will display as.
Please note, using the bold tag ([b]) may produce a slightly darker shade when using colors for text.
• Cornsilk
• LightYellow
• LemonChiffon
• PapayaWhip
• Moccasin
• PeachPuff
• FireRed
• BlanchedAlmond
• PaleGoldenRod
• Khaki
• LightCoral
• Salmon
• DarkSalmon
• LightSalmon
• LightPink
• HotPink
• Crimson
• Carrot
• Red
• Devil
• DarkRed
• IndianRed
• DeepPink
• MediumVioletRed
• PaleVioletRed
• Coral
• Tomato
• OrangeRed
• DarkOrange
• Orange
• Gold
• Yellow
• DarkKhaki
• Pink
• Plum
• Violet
• Orchid
• Fuchsia
• Emerald
• DevilRed
• Magenta
• MediumOrchid
• MediumPurple
• BlueViolet
• DarkViolet
• Apple
• DarkOrchid
• DarkMagenta
• Purple
• Indigo
• SlateBlue
• Thistle
• Lavender
• GreenYellow
• Chartreuse
• LawnGreen
• Lime
• GoldOchre
• LimeGreen
• Jean
• Grass
• Ruby
• PaleGreen
• LightGreen
• MediumSpringGreen
• SpringGreen
• MediumSeaGreen
• ForestGreen
• Green
• DarkGreen
• YellowGreen
• BlueJean
• CornerFlowerBlue
• OliveDrab
• Olive
• DarkOliveGreen
• MediumAquamarine
• LightSeaGreen
• DarkCyan
• Teal
• Aqua
• Cyan
• OliveGreen
• GreenBean
• LightCyan
• PaleTurquoise
• Aquamarine
• Turquoise
• DarkTurquoise
• CadetBlue
• SteelBlue
• LightSteelBlue
• PowderBlue
• LightBlue
• SkyBlue
• LightSkyBlue
• DeepSkyBlue
• DodgerBlue
• MediumSlateBlue
• RoyalBlue
• Blue
• Lipstick
• Saphire
• MediumBlue
• DarkBlue
• Navy
• MidnightBlue
• DarkSlateBlue
(2c) Gradients (Tektek)http://www.tektek.org/color/ is a great place to add radiance to your posts. There you can select two colors from the entire spectrum, and type in text which will have a gradient color that will fuse the two colors into a blended one. Additional options include having the color blend out from the center of the text, making it into a rainbow of colors, or changing each letter to a randomly selected color. After you type in what you want your post to be, click the
Generate Code button. Copy and paste the code displayed into your post on ACC, and the code will automatically translate into the text you typed with the gradient colors you selected. This ends up looking very cool, if not overwhelming.
Here's an example. Tektek generates a long code, so these colors should be used sparingly. Please note that you do not need to post any other text, just copy and paste the code.
(2d) Word/Name ColorsEnter anything into the code as the color, any random word, name, or number. It will still make a color. Why? Well, it has to do with the hexadecimal system, so it will convert anything you put in into a color. A fun thing to do would be to try your username as a color, and then other words. For example,
this is color=shadowsquid86.
This is color=markupmagic. Experiment, and find something you like. To discuss in more detail, I recommend you move to the
Word/Name Colors Thread on the Off Topic.
Section III- Other Markup
(3a) The Big ThreeCode: [b]TEXT[/b]
Display: TEXTCode: [u]TEXT[/u]
Display: TEXTCode: [i]TEXT[/i]
Display: TEXTBold, Italics, and Underline. The big three. These are three markup codes that you will recognize if you use Microsoft Word, and you will use them often. Bold will be used the most, and should be used when you want people to notice that particular text, or for adding emphasis to posts. Underlining should be used for titles, or for emphasis. Italics can be used for irony or clarification, or for emphasis. You’ll see these three all the time.
(3b) Spoiler
Code: [spoiler]TEXT[/spoiler]
Display: TEXTCode: [color=D3E0F]TEXT[/color]
Display: TEXTSpoiler is a markup that isn’t used all that often, and is in a way like another color. As the name implies, spoiler markup is used to hide text, so that members who do not want to view the text do not need to. You can also use it to slyly hide text from other users. I too am guilty of this behavior. Spoiler changes the color of the text to the color of the forum background so that the only way to see what the text says is to highlight the text by dragging your cursor over it. Highlight the blank area to reveal a message: [
I wrote most of the original guide while on vacation in California!] Note that spoiler markup will not work in profiles, as the background is a different color. It is hard to read, but still visible. Instead, use the hexadecimal code [color=D3E0F8]text[color] to hide text in profiles.
Animal Crossing is really boring. I’m not kidding. Play more Halo.(3c) BlockquoteCode: [blockquote]TEXT[/blockquote]
Display:"TEXT"
Code: [bq]TEXT[/bq]
Display:"TEXT"
For a long while, the “Using Markup” guide only gave the long version of this code: “blockquote”. This is why it drove me crazy to find that all that time, I could have used “bq” instead! Thank goodness the guide was amended. As for using it, it’s main use is for quoting other users, taking something someone said in a post above yours, for example. We don’t have a quote button, so use this instead.
(3d) Horizontal RuleCode: [hr]
Display:
This markup is unique in the way that it only uses the first part of the code. In other words, [/hr] is useless. Horizontal Rule adds a horizontal line to the space above it, and should be used to divide text in a post. Not much else can be said about this kind of markup.
(3e) HyperlinkCode: [link=URL]TEXT[/link]
Display: TEXTThis markup is used quite often, and is quite useful. The text will turn a cerulean blue color, and will underline if the cursor is moved over it. If the text is clicked, you will load onto a webpage. This can be used to trace back to threads, give links to patterns, or just about anything else. You will use this often, as you will often need to link to other pages.
Section IV- Emotes
(4a) Using EmotesEmotes are the faces expressing emotion in the box right of your text in a post. They are rather unique markup, as they require simple codes that are entered simply by clicking on one of the emotes while posting. You can, however, move your mouse over an emote and it will show the full code. There are a total of 36; 18 emotes, with a femote (female emote) counterpart for each. The only difference with femotes is that a “less-than sign” (<) is added before it, signifying the Animal Crossing hat worn by female characters. Emotes should be used when you want to show emotion through text, and should often be added to the end of sentences or posts.
These are emotes:
...And these are femotes:
(4b) Emote IssuesThere are some issues with emotes that can be irksome at times. The top of the (f)emote extends pass the context of the line, creating a small space above the text. Overall, this isn’t really an issue, but using an emote mid-post will make your text look uneven if you don’t use an emote on every line. Also, as you can manually type the emote code, some accidental placement can result in wrong emotes and changed text. For example, using face_happy inside a code such as hyperlink will result in a face_devil with a broken code before it. In addition, placing a face_blank at the end of a question will result in a face_confused with no punctuation. Spacing emotes apart and previewing posts is the best way to work out these issues.
(4c) Other InfoThere are limits to emotes. You can only place 10 per post, any other will appear as the simple text. This is to prevent emote overuse, which qualifies as overuse of markup. Emotes can also be blocked to show the original text, such as if you want to show :P instead of it’s emote counterpart. See section 5a for more information. It should also be noted that emotes are not affected by markup other than links, where a blue box encases the emote, turning purple when clicked. And since it is not affected by spoiler, you can’t hide text that contains emotes, as the emote will give it away.
Section V- Advanced Tricks
(5a) Showing CodesCode: [code[/*]]TEXT[/code[/*]]
Display: [code]TEXT[/code]
(*Denotes any markup code.)You may have noticed that I can type codes without it displaying markup. If you want to show the code for your markup, usually for telling others how to use it, enter a [/b] just after the [ on each side of the markup code. This can be done with any markup code, and can be done anywhere in the code, but I find the one letter codes ([/b], [/u], & [i]) are the easiest. Note that when showing link and color codes, you have to place it before the “=” sign, any point in the link or color name won’t cause the code to break. You can also use this for emotes, as mentioned previously.
(5b) HexadecimalCode: [color=XXXXXX*]TEXT[/color]
Display: TEXT**
(*Each “X” is a digit. Do not actually enter “X”. Or the asterisk for that matter.)
(**Green is used as an example. You can also create any and every other color.)This is a system that can be used to create any color from the spectrum. It’s a bit complicated, but I’ll explain it as best I can. It is six digits, inserted in place of a color name. The digits are the numbers 0-9, and the letters A-F. The code shows the amount of colors in a single color. The first two digits are the Red Value, the second two digits are the Green Value, and the last two digits are the Blue Value. How you enter the digits determine the amount of Red, Green, and Blue that is in the color. Now, the numbers and letters I mentioned are ranked in order of amount, so 0 means none, and F is the most. Meaning, they are ranked as so: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Inputting them into the R,G,B values will change the amount of color. So [color=#0066FF]TEXT[/color] will have no red, some green, and a lot of blue. In the end, it the color it becomes is
this. It’s difficult to explain, and if you would like a better understanding, I would recommend reading
this. If you would like to be able to use these colors, but do not know how to use hex, I strongly recommend
this site.
(5c) Centering TextCode: [color=d3e0f][bq][/i][/color]TEXT[color=d3e0f][/bq][/i][/color]
Display: "
TEXT
"Code: [color=d3e0f]xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*[/color]TEXT
Display: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxTEXT
(*The character “x” is a placeholder. Anything will work.)This is by far the most asked question on the other thread, so I
needed a section on it. The codes you see above use the d3e0f color code, as they are mainly used for profiles. However, you can use the spoiler code for regular posts. Now, you may have noticed people that have text in the center of their profiles. There are two ways to do this, both listed above. The first is a long string of codes, but is the genuine code for centering. You can add multiple [bq]’s for farther to the right centering. Now, the second one is more controllable, but you have to do a new code for each line. The “x” characters can be replaced with anything, and the amount is up to you. The more you have, the more to the right it goes. These can add flair to profiles or center titles for effect.
(5d) Combined CodesMarkup codes aren’t limited to one type; you can use several in combination of each other. Such as
this, using the bold, italics, and underline code to add a lot of emphasis to that particular word. Another popular example is colored links,
check out this one! Do you like green links and ham?. You can even used an insane amount of codes to make something like this:
"Falcon...PAWNCH!!!
"Don’t get too carried away, though. You don’t want to get reported for Overuse of Markup.
Section VI- Additional Information
(6a) DonationsDonations aren’t a part of markup, but they do affect it. When you donate $5 or more to ACC, you can now use markup in signatures. Previously, you can only use normal text within it. Also, by donating $10 or more, your signature capacity will increase. Then, by donating $20 or more, you can have even greater capacity for both signatures and the “All About Me” Section of your profile. While you might think that this would not affect markup, it does. As some markup requires extra room, a higher character cap will allow you to use more markup.
Donate sometime, it’ll help you and the site!
(6b) Overuse of Markup" Forum Rules-2.10-Overuse of Markup
There are certain special markup tags that you can use in your message board posts to make text bold or italic, or to change the color of your text. These are intended to be used for emphasis or to make one particular part of your post stand out from the rest of it. They are not for making every word of every post a different style text. So please use markup tags only when needed for emphasis, or in the special cases of making a link with the [link=][/link] tags or posting a spoiler with the [spoiler][/spoiler] tags."
This is a violation you might receive for being a little too enthusiastic with markup. I know that after reading my guide you will want to use markup for every letter and post, but please don’t. It is not only annoying and wasteful, but it is painful for those with sensitive eyesight. Markup was meant to be used sparingly, to give emphasis. If you emphasize all your text, the only thing you are emphasizing is how much you need a notification. Is that the kind of emphasis you want?
(6c) Admin MarkupThere are some markup codes that aren’t available to regular users. Administrators have special markup codes that allow them to post images without links, create lists with bullets or numbers, and more. The must be an admin to use these codes, even if you know them, they won’t do anything. And considering we’ve had never had more than a couple admins at one time, it’s not likely you’ll see them often. They’re mostly used for announcements and official threads, so if you’d like a glance of this rare markup, check out those threads.
(6d) Reference LinksHere are some links you might find useful to further your understanding of markup.
ACC’s “Using Markup”
Site Rules
TekTek
Color Generator
Basic Hex + Chart
Extensive Color Chart
Hexagonal Chart
Color Converter
More Hexadecimal
Advanced Hex
Username Colors 
5:42am
Posted: 10/4/2009 9:10am Edited: 7 Staff Edited
100
