How to make fancypants posts with BB Code
You're at the top. Here is the bottom.
A few new BB Code tags have come to my attention and since I intend to be using these tags often in my posts, I decided it would be helpful if I explained how I do some of those fancypants tricks.
First lets start off with a link to the BB Code List from the FAQ section on this forum. If ever the moderators add or remove any of the tags, this list will automatically be updated. Always trust that list, as what I am about to post does not automatically get updated when they do changes.
Make sure your message editor is set to Enhanced Interface - Full WYSIWYG Editing. Although Standard Editor seems to do the same thing for some reason. The Enhanced Interface just makes your life a lot easier by giving you a list of icons you can click after selecting the test you want to add a tag to.
If you use Google Chrome you'll see the BB Code tags in the text box. To see the tags in Internet Explorer and in Firefox you will need to click the http://forum.thesettlersonline.net/i...switchmode.png located at the top right of the text box and above the smilies.
. . .
For the most part you'll be using what you see in the options on the Enhanced Interface but not all tags are shown up there. These are the tags I'll be talking about here along with the last 6 icons in the above list.
http://forum.thesettlersonline.net/i...itor/quote.png [QUOTE][/QUOTE]
Quote:
Placing text between these tags will have the same effect as using Reply With Quote when replying to a forum post.
Quote:
But without specifying a username it's just a cool box with default italic text and bold or color or many other type settings.
Quote:
I suppose you could even use it to make a fancy enclosed list of things.
Quote:
Click
here for more examples of Quote usage.
http://forum.thesettlersonline.net/i...ditor/code.png [CODE][/CODE]
Code:
Of course this will allow you to show code properly in a post but it could be used for other things.
Ever try to add a few spaces between words in your posts only to have them come out as single spaces?
Well with the code tag, if you had a list you had premade with spacing that lined up everything nicely you could just
copy and pasted it in the code tag and voila, your list looks the same.
Items | Amount
----------------------
Smilies | One
Bacon | One Million
Unicorns | Negative One
Anyway lol, you get what I mean.
You can still use type settings here but they won't look as great.
Also you're stuck with the word Code: at the top of the box.
And once you get to a certain point the box will reach it's maximum size and you will need to scroll down to see the rest of the text.
------------------->>>>>------------------->>>>>------------------->>>>>------------------->>>>>------------------->>>>>
But it was this last feature that made this the perfect option for storing the old voucher codes on my Voucher Codes List.
Still all there on the page but never taking more space than the maximum height of the box.
http://forum.thesettlersonline.net/i...editor/php.png [PHP][/PHP] . . . & . . . http://forum.thesettlersonline.net/i...ditor/html.png[HTML][/HTML]
HTML Code:
These work the same way as the Code tag but they will highlight the syntax in different colors so it's best to just keep these for actual code.
<img src="image.gif" alt="image" />
<a href="testing.html" target="_blank">Testing</a>
http://static.cdn.ubi.com/0034/archi...res/strike.gif[S][/S]
This tag is to strike out text with a line. It should probably be with the bold, italic and underline, but that's where it is for now.
http://static.cdn.ubi.com/0034/archi...es/spoiler.gif[SPOILER][/SPOILER]
Click me ???
. . .
Now for the stuff that isn't in the list of icons above.
[thread][/thread] and [post][/post]
You could use this by adding the thread or post number but if you right click the thread title at the top of the thread or the post number at the top right of the post box you can copy the link address and post it as a link using the Insert Link button instead.
[highlight][/highlight]
For the important parts of your posts.
[noparse][/noparse]
I've been using this for all my tag titles. To make the items inside the noparse tag bold or any other type of text setting, you'll need to place the bold tags outside the the noparse tags. Here's an example of how I did that for the highlight tag.
[B][noparse][highlight][/highlight][/noparse][/B]
[clear][/clear]
Clear is something that can be used in combination with the image floating left and right tags.
In this example extra lines were added after the Angel Monument image. The problem with this is that you can't use a set template. The spacing will be different for many of the images as they are not all the same size. Also the spacing between lines might not be the same in all browsers, which may result in the image overlapping the bottom edge of the box.
Actual Item
Angel Monument
- Trade
Other places to get this decoration:
Adventures: Surprise Attack (2.5%); The Black Knights (4.8%)
- Gunpowder (3%)
In this example I placed the Clear tag immediately after the image and followed with the text immediately after the Clear tag. If you select the text and images of both boxes you will notice the bottom one has a gap to the left of the Angel Monument. That's because the Clear tag forced the text below the image. You'll also notice that the text lines up to just below the image.
Actual Item
Angel Monument
- Trade
Other places to get this decoration:
Adventures: Surprise Attack (2.5%); The Black Knights (4.8%)
- Gunpowder (3%)
Clear can also be used for comments or templates like the boxes above, to copy paste later. So long as you don't have another clear tag within a clear tag, no one will be able to see the extra code.
Image Floating Left [ifl]http://static3.thesettlersonline.pl/sites/default/files/servernews_downtime02_1.png[/ifl]
Image Floating Right [ifr]http://static3.thesettlersonline.pl/sites/default/files/servernews_downtime02_1.png[/ifr]
If you want to be able to type text to the right or left of an image this is the way to do it. If you look up at the first box with the Angel Monument, you will see text to the right of the first icon and to the left of the Angel Monument. If you don't want text on the same lines as your image you might want to use the image button above and the align button of your choice instead to align the image.
[t]Table Tag[/t]
Anything placed between this tag will have a dotted line box as above for the two Angel Monument examples and this box right here. Unfortunately there are no table rows and table columns.... yet. :p
[jumpto][/jumpto] & [aname][/aname]
Last but certainly not least, the anchor tags. This will permit you to place anchors that link within your own post. Of course it's pretty useless if you don't have a large post as it won't go very far.
First you set up your anchor. It's a lot more useful to call it something descriptive instead of whatevernameyouwant. For example I called my anchor at the bottom of this page anchor_bottom and the anchor at the top, that's right, you guessed it.... anchor_top. You have to make sure the anchor is connected to some text. If you leave the space between the anchor tag empty then the anchor is connected to nothing and won't work.
My first anchor name. [aname=whatevernameyouwant]This is where people will jump to[/aname].
After that anytime you use the [jumpto] tag with that anchor name it will jump to the words that were placed between the [aname] tags. So for my own anchor I could place a few [jumpto=anchor_top] tags so people could quickly get back to the top. I won't do it for this one since it's not really that long, but the decorations list I made is about to get a makeover.
The place where people end up is [jumpto=whatevernameyouwant]HERE[/jumpto].
To get a better idea of how this works click her to go to the top.
And if you came back by clicking the bottom, you've clicked the second anchor in this post.
