Forum > Starting Out
How to use BBCode to make your post more intresting
happyandstable:
So I thought I put up a thread to show how to use BBCode in post to get the effects you want. First I’ll start with the most simple and work my way up to the more complex. BBCode uses tags just like HTML with the exception that instead of using <tag> it uses [tag]. All tags come in pairs with the difference being the closing tag uses a / [/tag]. This is the first post I will be adding to it as I do not want to make it one huge post.
To make words bold you use the bold tag.
--- Code: ---[b]text[/b]
--- End code ---
This would look like this.
bold
To make words italic you use the italic tag.
--- Code: ---[i]italic[/i]
--- End code ---
This would look like this
italic
To make words underlined you use the underline tag.
--- Code: ---[u]underline[/u]
--- End code ---
This would look like this
underline
To make words have a different color you use the color tag.
--- Code: ---[color=Teal]color[/color]
--- End code ---
This would look like this
color
To make words have a different font you use the font tag.
--- Code: ---[font=Times New Roman]New Font[/font]
--- End code ---
This would look like this
New Font
To make words have a different size you use the size tag. The size value is measured in points. Symbolized by a number followed by the abbreviation pt.
--- Code: ---[size=16pt]Large[/size]
--- End code ---
This would look like this
New Size
happyandstable:
Now you combine these simple tags to get interesting effects. The tags need to be nested one inside the other. There is no limit to how many tags can be nested.
To make words italic and bold you use the italic and bold tags.
--- Code: ---[i][b]This is how to nest tags[/b][/i]
--- End code ---
This would look like this
This is how to nest tags
To make words italic, bold, and in a different color you use the italic, bold, and color tags.
--- Code: ---[i][b][color=Teal]This is how to nest tags[/color][/b][/i]
--- End code ---
This would look like this
This is how to nest tags
To make words italic, bold, in a different color, and different size you use the italic, bold, color, and size tags.
--- Code: ---[i][b][color=Teal][size=16pt]This is how to nest tags[/size][/color][/b][/i]
--- End code ---
This would look like this
This is how to nest tags
To make words italic, bold, in a different color, different size and different font you use the italic, bold, color, size, and font tags.
--- Code: ---[i][b][color=Teal][size=16pt][font=Times New Roman]This is how to nest tags[/font][/size][/color][/b][/i]
--- End code ---
This would look like this
This is how to nest tags
happyandstable:
Now lets look at some very interesting ways to nest things. If you noticed in the past I have been nesting tags at the beginning and ending of text It does not have to be like that as long is you have a closing tag for every opening tag.
Let’s take a look at some code.
--- Code: ---[b] This is bold [i] this is bold and italic[/i][/b] [i]This is just italic[/i][size=18pt] Now This is big text[b]This is big text in bold[color=Red]This is big text, bold, and red[/color][/b][/size] [color=Red][b]now we are down to normal size [/b] no longer bold[/color] now no longer Red.
--- End code ---
This is how that looks
This is bold this is bold and italic This is just Italic Now This is big text This is big text in bold This is big text, bold, and red Now we are down to normal size No longer bold Now no longer Red.
More to come later for now I am off to work.
newjason:
˙˙˙sʇɔǝɟɟǝ ǝɹoɯ ɹoɟ ʇıɐʍ ʇ,uɐɔ I
˙ɹɐɟ os lɐıɹoʇnʇ ǝɔıN
happyandstable:
More Tags Now let’s look at some more tags that we can use in our post.
To put a line through your words you use the strikethrough tag.
--- Code: ---[s]strikethrough[/s]
--- End code ---
This would look like this.
strikethrough
To put a shadow behind your words you use the shadow tag. It should also be noted that the Shadow tag only works in Microsoft’s Internet Explorer.
--- Code: ---[shadow=Red,left]Shadow[/shadow]
--- End code ---
This would look like this.
Shadow
Now to get fancy with this Shadow tag you can choose a different color. The predefined color choices are Black, Red, Yellow, Pink, Green, Orange, Purple, Blue, Beige, Brown, Teal, Navy, Maroon, LimeGreen, and White.
--- Code: ---[shadow=LimeGreen,left]Shadow[/shadow]
--- End code ---
This would look like this.
Shadow
You can also create you own custom colors using a hexadecimal format. It consist of a hash mark followed by 6 hexadecimal numbers. The Hexadecimal numbers are 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C, D, E, and F. it would look like this as an example #120AFF. You can use the numbers in any combination as long is you do not use more then six.
--- Code: ---[shadow=#23ACF0,left]Shadow[/shadow]
--- End code ---
This would look like this.
Shadow
Now to make it even more interesting you can also control the direction of the shadow. You can make it go to the right. By changing the word left to right.
--- Code: ---[shadow=#22A0B0,right]Shadow[/shadow]
--- End code ---
This would look like this.
Shadow
To put a glow around your words you use the Glow tag. It should also be noted that the Glow tag only works in Microsoft’s Internet Explorer. The three attributes of the glow tag represtent color, strength, and width.
--- Code: ---[glow=Red,2,300]Glow[/glow]
--- End code ---
This would look like this.
Glow
Here is an example of the Glow tag where I change the attributes you can also experiment with them yourself and see the results.
--- Code: ---[glow=#34DC0F,4,1]Glow[/glow]
--- End code ---
This would look like this.
Glow
Yet another example of the Glow tag where I change the attributes you can also experiment with them yourself and see the results.
--- Code: ---[glow=#34DC0F,1,500]Glow[/glow]
--- End code ---
This would look like this.
Glow
I know this is a lot of information and I promise we will get to some good stuff. But we need to know the basics before we do some exciting things with it. More later.
Navigation
[0] Message Index
[#] Next page
Go to full version