Reply to Thread
Results 1 to 8 of 8

Thread: How to make fancypants posts with BB Code

  1. #1
    Retired Community Leader
    Join Date
    Nov 2011
    Posts
    286
    World
    Zeus

    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 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. The missing ones are the tags I'll be talking about here along with a few icons above the message box.

    Posting an image using the [IMG] tag or button.
    Click Show VVV
    Spoiler
    • First, you need to take the screenshot, then save it as a jpg. There's a few ways to go about this.
      Press the Prt Scr key on your keyboard which takes a copy of your whole screen then paste it in Paint. Sorry I don't have a Mac so not too sure what's on them.
      Or you can use a screen capture software which gives you a lot more control over what you have in the image. Windows has one called the Snipping Tool

      Note: For the better resolution or just larger images, take the screenshot with your browser at full screen. Pressing the F11 key will activate full screen in Google Chrome, Firefox and Internet Explorer. The full screen option is also in the browser menu. Press the F11 key again to leave full screen mode. You may need to use Alt-Tab to navigate to different windows on your computer, like the snipping tool.
    • Second, you need to upload it to an online image host like Photobucket or ImageShack. Both have free service but you do need to sign up for it. I'm not too familiar with ImageShack since I use Photobucket and as far as help goes for telling you how to get the image link, I thought Photobucket did a better job. See for yourself. ImageShack Help click "Get Links". Photobucket help HUGE difference.
    • Third, you'll need to insert the correct link into your post. Make sure to click the "Go Advanced" button at the bottom right so you can "Preview your Post" and make sure the [IMG] tag was entered correctly before you "Submit your Reply".

    Code:
    http://i1268.photobucket.com/albums/jj565/AquilaPlume/TSO%20Decorations/AngelGate_zps2181cfb0.png
    
    If all you do is click the  button and enter a "Direct" link to the image or simply enter a "Direct" link into your post with no [IMG] tags
    you will get something similar to the following.
    
    http://i1268.photobucket.com/albums/...ps2181cfb0.png




    Code:
    [URL=[noparse]http://s1268.photobucket.com/user/AquilaPlume/media/TSO%20Decorations/AngelGate_zps2181cfb0.png.html]
    [IMG]http://i1268.photobucket.com/albums/jj565/AquilaPlume/TSO%20Decorations/th_AngelGate_zps2181cfb0.png[/IMG][/URL]
    
    The above code is what you will get when you click and copy the "IMG thumb" link in Photobucket. Sorry not sure how
    ImageShack does thumbnails. Note that it automatically adds a link (URL) so you can see the larger image.





    Code:
    
    [IMG]http://i1268.photobucket.com/albums/jj565/AquilaPlume/TSO%20Decorations/AngelGate_zps2181cfb0.png[/IMG]
    
    And here's how you get the full sized image in BB Code. All that is needed is the [IMG] tag and the "Direct"
    link to the image. In Photobucket clicking on "IMG" will get you the right code for a full sized image.
    In ImageShack from the little picture in their help page I could see that forum looks like my previous example,
    so I'm not too sure if that's a thumbnail or just a full sized image that's linked.
    




    No matter what, you can always find and copy the "Direct" link to your image. That would be the one where there is nothing else on the page but your image, just like you see after clicking the plain link to the Angel Gate. Then click the button and paste the link in the popup box. That's usually the way I do it.


    If you ever want to take a quick screenshot, save it and upload it to the internet for others to see, all in just a few clicks, you should try Jing or Gyazo. There's a limit to how many pictures you can have uploaded to these sites on the free versions but that's really all you need if you use it as a spot to store your screenshot temporarily. I've used Jing often when trying to describe to someone where that hard to find collectable was.


    [QUOTE][/QUOTE]
    Placing text between these tags will have the same effect as using Reply With Quote when replying to a forum post.
    But without specifying a username it's just a cool box with default italic text and bold or color or many other type settings.
    I suppose you could even use it to make a fancy enclosed list of things.
    Click here for more examples of Quote usage.
    [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.
    [PHP][/PHP] . . . & . . . [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>
    [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.

    [SPOILER][/SPOILER]

    Click Show VVV
    Spoiler
    Ahh the spoiler tag. It can be used to hide spoilers of course but it can also be used to shorten a really long post by adding secondary info in them. Be careful not to add too much of your post in here, it can be easy to miss that little "Show" button.

    . . .


    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.


    [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.
    Also I've got an icon list in my Decorations List Thread that jumps to each item and links back to the top.


    * * Also take a look at this UK forum thread made by Jamdoggy for even more BB Code tips * *

  2. #2
    Retired Community Leader
    Join Date
    Nov 2011
    Posts
    286
    World
    Zeus
    By the way, if anyone wants me to clarify something I've already written or explain some other BB Code feature, I can add it to this post. Also I'm not a BB Code expert, so if anyone else has a better way of explaining some of these features I'd be happy to incorporate that in the post. Whatever makes it better is good.

  3. #3
    Mayor
    Join Date
    Jun 2012
    Posts
    2,904
    World
    Zeus
    awesome, if you could only show me how to do a screen shot larger than a micro dot. cause i'm screen shot impared

  4. #4
    Retired Community Leader
    Join Date
    Nov 2011
    Posts
    286
    World
    Zeus
    Quote Originally Posted by G_F_M View Post
    awesome, if you could only show me how to do a screen shot larger than a micro dot. cause i'm screen shot impared
    • First, you need to take the screenshot, then save it as a jpg. There's a few ways to go about this.
      Press the Prt Scr key on your keyboard which takes a copy of your whole screen then paste it in Paint. Sorry I don't have a Mac so not too sure what's on them.
      Or you can use a screen capture software which gives you a lot more control over what you have in the image. Windows has one called the Snipping Tool

      Note: For the better resolution or just larger images, take the screenshot with your browser at full screen. Pressing the F11 key will activate full screen in Google Chrome, Firefox and Internet Explorer. The full screen option is also in the browser menu. Press the F11 key again to leave full screen mode. You may need to use Alt-Tab to navigate to different windows on your computer, like the snipping tool.
    • Second, you need to upload it to an online image host like Photobucket or ImageShack. Both have free service but you do need to sign up for it. I'm not too familiar with ImageShack since I use Photobucket and as far as help goes for telling you how to get the image link, I thought Photobucket did a better job. See for yourself. ImageShack Help click "Get Links". Photobucket help HUGE difference.
    • Third, you'll need to insert the correct link into your post. Make sure to click the "Go Advanced" button at the bottom right so you can "Preview your Post" and make sure the [IMG] tag was entered correctly before you "Submit your Reply".

    Code:
    http://i1268.photobucket.com/albums/jj565/AquilaPlume/TSO%20Decorations/AngelGate_zps2181cfb0.png
    
    If all you do is click the  button and enter a "Direct" link to the image or simply enter a "Direct" link into your post with no [IMG] tags
    you will get something similar to the following.
    
    http://i1268.photobucket.com/albums/...ps2181cfb0.png




    Code:
    [URL=[noparse]http://s1268.photobucket.com/user/AquilaPlume/media/TSO%20Decorations/AngelGate_zps2181cfb0.png.html]
    [IMG]http://i1268.photobucket.com/albums/jj565/AquilaPlume/TSO%20Decorations/th_AngelGate_zps2181cfb0.png[/IMG][/URL]
    
    The above code is what you will get when you click and copy the "IMG thumb" link in Photobucket. Sorry not sure how
    ImageShack does thumbnails. Note that it automatically adds a link (URL) so you can see the larger image.





    Code:
    
    [IMG]http://i1268.photobucket.com/albums/jj565/AquilaPlume/TSO%20Decorations/AngelGate_zps2181cfb0.png[/IMG]
    
    And here's how you get the full sized image in BB Code. All that is needed is the [IMG] tag and the "Direct"
    link to the image. In Photobucket clicking on "IMG" will get you the right code for a full sized image.
    In ImageShack from the little picture in their help page I could see that forum looks like my previous example,
    so I'm not too sure if that's a thumbnail or just a full sized image that's linked.
    




    No matter what, you can always find and copy the "Direct" link to your image. That would be the one where there is nothing else on the page but your image, just like you see after clicking the plain link to the Angel Gate. Then click the button and paste the link in the popup box. That's usually the way I do it.


    If you ever want to take a quick screenshot, save it and upload it to the internet for others to see, all in just a few clicks, you should try Jing or Gyazo. There's a limit to how many pictures you can have uploaded to these sites on the free versions but that's really all you need if you use it as a spot to store your screenshot temporarily. I've used Jing often when trying to describe to someone where that hard to find collectable was.


    Hope all that helped. If anything is too confusing to anyone just let me know and I'll try to clarify it.

  5. #5
    Veteran General Asiastrings's Avatar
    Join Date
    Oct 2012
    Location
    Prestaging [Welt 1]
    Posts
    583
    World
    Ares

    BB USA Please see !

    Aquila, Thanks for this too... all ur stuff is so valuable info ....
    hey BB USA Please See - All of Aquila's stuff need to be made Official!!!!

  6. #6
    Retired Community Leader
    Join Date
    Nov 2011
    Posts
    286
    World
    Zeus
    Thank you. I'm happy to see you are finding my posts so useful

  7. #7
    Recruit
    Join Date
    Jan 2014
    Posts
    5
    World
    Ares
    Awesome post, Aquila! I thought I knew all the BB Code for the forums, but I learned some new tricks here.

    Hope you don't mind, but the UK forums (where I am most of the time) didn't have a guide to BB Code, so I created one there based partly on yours, although it seems that the [clear] tag doesn't work over there, so I had to leave that one out...

  8. #8
    Retired Community Leader
    Join Date
    Nov 2011
    Posts
    286
    World
    Zeus
    Wow Jamdoggy, very nice, it's even more fancypants than mine

Reply to Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts