BB Coding for dummies

[Esternial]

BB CODING FOR DUMMIES

---

While there are already several resources containing info regarding BB Coding, such as here, here and here, this thread provides a full overview of all available BB codes.

For BB-codes that can be used gameside, see this dispatch.

I hope it'll be helpful.

Table of Contents
POST #1:

• Introduction

POST #2:

• Basic Formatting
• Changing Text Size
• Changing Text Colour/Highlighting
• Inserting a Horizontal Line
• Inserting an Image

POST #3:

• Linking to... (includes 'anchor')
• Using Quotes

POST #4:

• Using Lists
• Using Tables
• Using Spoilers

POST #5:

• Tabs and Blocktext
• Boxes: Regular, Preformat and Code
• Alignment
• Floatleft & Floatright

This was originally conceived to be a part of P2TM's Depot, though the scale of this project expanded beyond what I had intended to such a size that the entire forum could probably use it, which is why I'm posting it here and plan to link to it via the Depot.

[Esternial]

BASIC FORMATTING

[b]Bold[/b]Bold

[i]Italicised[/i]Italicised

[u]Underlined[/u]Underlined

[strike]Strikethrough[/strike]Strikethrough

[sub]Sub[/sub]Script_SubScript

[sup]Super[/sup]Script^SuperScript


CHANGING TEXT SIZE

[size=150]This is size 150.[/size]This is size 150.

You can either select a size from the drop-down list when writing your post (tiny, small, large or huge) or enter your own percentage.


CHANGING TEXT COLOUR / HIGHLIGHTING

[color=#FF0000]Coloured[/color]Coloured

[background=#FF0000]Highlighted[/background]Highlighted

Both [color=] and [background=] use either hexadecimal RGB codes or simply colour names (e.g. red, blue, yellow, etc.).
When using "font colour" the post editor also provides several samples to choose from. This feature does not apply for [background=], but the same codes can be used.

! making your posts too garish (excess font size and/or usage of colours) may be considered spam.

INSERTING A HORIZONTAL LINE

[hr][/hr]

Output:

---

Horizontal lines are useful to organize your text and introduce structure to large posts. Note that any text between the tags will not appear in your post.

An alternative, which is used by me in this guide, is to use the "table" and "tr" tags (not the "td" tag!).


INSERTING AN IMAGE

[img]http://www.nationstates.net/images/violet.gif[/img]

Output:

Make sure to put a DIRECT link to the image between both tags and use spoiler tags for large images. Images are limited to 900 pixels high and 900 pixels wide.

! all forum rules apply to images as well. Do not spam or post imagery that violate the rules.

[Esternial]

LINKING TO...

If you want to post a link to any webpage on NS, it suffices to post a working link and the forum will automatically allow you to click on it in your post.
To customize the text displayed, however, you'll need URL tags:

[url=http://www.nationstates.net]Example[/url]Example

Nationstates also provides other specialized tags:

• To link to either a nation page or a region page:
  
  
  [nation]Reploid Productions[/nation]Reploid Productions
  
  
  [region]The Rejected Realms[/region]The Rejected Realms
  
  
• To link to the page featuring the regions that use a certain region tag:
  
  
  [region-tag]silly[/region-tag]silly
  
  (This tag can display custom text just like the URL tag. There is a button that automatically includes an equals sign in the post editor.)
  
  
• To link to a WA proposal:
  
  
  [proposal=][/proposal]
  
  (1) Go to the WA Proposal Page (the GA or SC specific pages are fine) and find the proposal in the list.
  (2) Right above the title of the proposal, there should be a line that reads: ID: nationname_234189435 (the numbers will be random). Copy this text (not the link) and paste it after the equals sign IN the tag (e.g proposal=nationname_234189435)
  
  
• To link to a post on the forum (there's no button for it):
  
  [post=16394943]This links to the One Stop Rules Shop.[/post]This links to the One Stop Rules Shop.
  
  "976627" corresponds with the numbers after ?p= in your address bar, also known as your "Post ID".
  
  
• To link to a specific part in a post using anchors (there's no button for it):
  
  
  [anchor=JUMPHERE][/anchor]Useful for tables of contents.
  Jump to [url=http://forum.nationstates.net/viewtopic.php?p=22797689#JUMPHERE]my anchor[/url].
  
  Useful for tables of contents.
  Jump to my anchor.
  
  You can freely customize the anchor tag. For example, this guide uses the tags 'anchor=001', 'anchor=002', etc.

Note that for almost all these specialized tags you can just as easily use an url tag to link to the relevant page.

TIP (by Mousebumples)
This image or is a direct link to the post in question. You can either use your mouse to Copy Link Location or click directly on that image. If you click on the image, the page you are directed to is the direct link to that post - Copy/Paste the url from your browser.

USING QUOTES
To reply to/quote a post, use the "quote" button in the top right corner of the post you want to quote. Then it's a simple matter of copy/pasting the provided code.

Sometimes, you'll need to build your own quote from scratch (or you want to use the structural element of a quote box), in which case you can do so "manually" using

in your post editor.

A quote tag can have two optional parameters, being a name and a reference link. When quoting someone using the "quote" link this will be filled in automatically, but when you have to build a quote yourself you will need to add this to the quote tag and make it look somewhat like this: quote="NAME";p="POST_ID" (the " are required!)

Example
[quote="Reploid Productions";p="10372095"]I, for one, blame the server hamsters for not running hard enough in their little wheels.[/quote]

Output:

I, for one, blame the server hamsters for not running hard enough in their little wheels.

! Editing the content of a quote for certain nefarious purposes may be punished.

[Esternial]

USING LISTS

To make a list, you need to use "List" tags in combination with asterisks [spoiler=*][/spoiler]. Each asterisk represents a point in your list. Alternatively, you can use numbers, the alphabet or roman numerals by using the list button with the equals sign and inserting a parameter ("1", "a" or "i" respectively).

Example
[list=1]
[*]This is an example of a numbered list.
[*]This is an example of a numbered list.[/list]

Output:

1. This is an example of a numbered list.
2. This is an example of a numbered list.

USING TABLES

When creating tables, use

to create a row and

to create cells within this row.
While it may be convenient to use line breaks to add some structure to your table in the posting form (like when making lists), the resulting table will add all these enters AFTER the table, resulting in a lot of unintended whitespace.
So, before posting your table, make sure the code is an entire, uninterrupted sequence without any breaks.

Example
[table][tr][td]A1[/td][td]A2[/td][/tr][tr][td]B1[/td][td]B2[/td][/tr][/table]

Output:

A1	A2
B1	B2

USING SPOILERS

If you want to hide some text, for whatever purpose, you can use spoilers. Note that spoilers will always cause a line break and occupy an entire line, unless combined with float tags.

Example
[spoiler]This is a spoiler[/spoiler]

Output:

This is a spoiler

• Spoilers can display a customized text (Thanks to Spartzerina):
  
  [spoiler=Customized]This is still a spoiler[/spoiler]
  
  Output:
  This is still a spoiler
  Most symbols are not accepted as input in this tag (except for a period) and will break your spoiler.
  
  
• Spoilers can be nested to organize your data:
  
  [spoiler=Nest]Look at all the spoilers I have!
  [spoiler]This is a spoiler[/spoiler][spoiler]This is a spoiler, too![/spoiler][/spoiler]
  (Both nested spoilers were placed on the same line, otherwise there will be an empty line between them.)
  
  Output:
  Look at all the spoilers I have!
  

  This is a spoiler

  This is a spoiler, too!
  
  You must not customize the text of your nested spoilers or you will break your spoiler.
  
  
• Spoilers can be combined with float tags to create floating spoilers:
  As mentioned before, spoilers usually bump the text on the same line to the next one, except when combined with float tags. This allows you to do the following:
  
  [floatleft][spoiler=One]Text[/spoiler][/floatleft][floatleft][spoiler=Two]Text[/spoiler][/floatleft][floatleft][spoiler=Three]Text[/spoiler][/floatleft]
  
  Output:
  
  Text
  Text
  Text

[Esternial]

TABS AND BLOCKTEXT

[Tab=20][/Tab]This is an indentation of 20 pixels.

This is an indentation of 20 pixels.

The "Tab=" tags generate an indentation of X amount of pixels, depending on the value you entered after the "=" sign.

[Blocktext]All text between the Blocktext tags will be put in this block.[/Blocktext]

The following is a section of blocktext followed immediately by some regular text:

It seems that of the things llamas and alpacas like to do best rolling in the dirt and seeing how many burrs they can gather in a 24-hour period are at the top of the list. To add to the problem llama and alpaca wool felts best when still on the animal and mats and tangles, especially in older animals, are a constant problem. Dealing with these problems without making an enemy of the animal and without undo damage to the wool can be a real challenge. Quality Llama Products carries several tools to make this job easier.

One of the best investments you can make is a good blower. The blower can be used to blow garbage out of the wool, blow conditioner into the wool and to desensitize the legs without the danger of getting kicked. If you only have a few animals to do the mini circuiteer will work fine. If you are on the show circuit and need to do a lot of animals in a hurry or have a large herd to prepare for shearing you will want to consider the larger more powerful circuiteer

Blocktext will add margins of 75 pixels to both the left and right side of the included text, causing an indentation, and will also add spacing at the top and bottom.


BOXES: REGULAR, PREFORMAT AND CODE

[box]Text[/box]

These tags will create a separate box.

[pre]Text[/pre]

These tags will create a separate box that will conserve any    spacing    you include in your formatting and will generate a scroll bar for lines that are too long rather than continue the sentence on the next line.

[code]Text[/code]

Code: Select all

These tags will create a separate box that will ignore [u]all[/u] coding and simply print out any tags you might add between its "code" tags.                 Spacing is also conserved.

ALIGNMENT

Example
[align=right]Right foot, let's stomp[/align]
[align=left]Left foot, let's stomp[/align]
[align=center]Cha-cha real smooth[/align]

Output:

Right foot, let's stomp

Left foot, let's stomp

Cha-cha real smooth

FLOATLEFT & FLOATRIGHT

or

These tags' primary function is to float an image/wrap text around an image
(thanks to North Mack for the help and Glen-Rhodes for the sig-proof adjustment!)

Example
[floatright][img]http://rpstudios.ian-justman.com/junk/CGgoods/RepProdtheModsig2.JPG[/img][/floatright] <snipped wall of text> [floatleft][img]http://rpstudios.ian-justman.com/junk/CGgoods/Modsig2.JPG[/img][/floatleft] <snipped wall of text>

Output:

If this works right this should float the image to the right side of this block of text because being able to wrap text around an image would be a really neat formatting tool that a player suggested and even figured out so I didn't have to do a lot of work besides input and testing and I hope it works right because I agree it would be neat and awesome for RPers and stuff and junk like that who like to illustrate posts with images and wow this is a huge run-on sentence that most people would probably groan at because it's a wall of text and walls of text are evil eyesores and people who use them should be smacked or something except then I would need to get smacked too for writing a wall of text even as a joke or to test a new BBCode and it's about time I tested

the left-hand float so let's see if it works with my shiny current moderator sig because I didn't want to just use the same image two times so I used one of my old mod sigs and my newer mod sig with the updated 3-D model of the third version of Firefury all ready to whoop some ass with the big Sword of DEAT and I wonder why some players think to call it by it's proper name "Kiritateru Teikoku" is blasphemy it just means something to the effect of "slayer of nations" unless I completely and totally butchered the Japanese wording which is very possible since I don't know much Japanese except for the occasional vulgarity and no I will not tell the players what those are because that would not be very modly of me and they can Googlefu it themselves if they really want to know how to call people nasty names in a foreign language and too bad you can't float an image in the center of a wall of text I know because I checked in Dreamweaver and if you can it's a lot more complicated to do than would work for BBCodes in this forum which is kind of a bummer but oh well and you know I think that's a large enough wall of text to float images in so let's see if it works!

[Esternial]

Extra reserved post, just in case.

[Ever-Wandering Souls]

This is quite extensive and helpful, and in my (meaningless in the grand scheme of things) book deserves a pin at least, if not a link in the FAQ itself. It consolidates information from several areas into one, easy to read and navigate page, with clarity. Thanks, Esternial!

[Esternial]

This is quite extensive and helpful, and in my (meaningless in the grand scheme of things) book deserves a pin at least, if not a link in the FAQ itself. It consolidates information from several areas into one, easy to read and navigate page, with clarity. Thanks, Esternial!

Certainly things can always be improved upon, so any suggestions or remarks would be welcome.

If anyone's confused by some of my phrasing, don't hesitate to mention it. I'd like this to be a comprehensive as possible.

[Ever-Wandering Souls]

Certainly things can always be improved upon, so any suggestions or remarks would be welcome.

If anyone's confused by some of my phrasing, don't hesitate to mention it. I'd like this to be a comprehensive as possible.

Well, one thing so far. The text with the raw code is a little hard to read on vanilla NS (especially on higher brightnesses), and not very noticeably different on Dark. While it's understandable if both cannot be satisfied, perhaps some other method of differentiation would work better?

May be worth remarking that if you'd rather use names than hex codes, you don't have to stick to the base colors. Any name that relates to a hex code works - Goldenrod, for example, was often used in WFE's I used to make, as it was easier to remember than the hex code for Goldenrod

[Esternial]

Certainly things can always be improved upon, so any suggestions or remarks would be welcome.

If anyone's confused by some of my phrasing, don't hesitate to mention it. I'd like this to be a comprehensive as possible.

Well, one thing so far. The text with the raw code is a little hard to read on vanilla NS (especially on higher brightnesses), and not very noticeably different on Dark. While it's understandable if both cannot be satisfied, perhaps some other method of differentiation would work better?

I could go for a darker grey or just abandon my love for simple colours and crack open the bright blue.

[Ever-Wandering Souls]

Since they look the same already on dark, maybe just making them the same in Vanilla would work

Also, I furthered edited the above post before seeing the reply

May want to provide a slight explanation for direct link vs hotlink

[Esternial]

Since they look the same already on dark, maybe just making them the same in Vanilla would work :)

Also, I furthered edited the above post before seeing the reply :P

May want to provide a slight explanation for direct link vs hotlink

Ah, I see. I've never tried using names since I wasn't aware of what you could use. I'll add that in tomorrow, and find a nice but not too clashing colour for the code.

Thanks for pointing that out, by the way.

[Ever-Wandering Souls]

oOu're welcome!

"If you want to post a link to any webpage on NS, it suffices to post a working link and the forum will automatically allow you to click on it in your post."

would hyperlink it/make it a hyperlink be simpler, or more confusing?

"(This tag can display custom text just like the URL tag. The equals sign is automatically included when pressing the button in the post editor.)"

What do you mean by this? There's a "-" in the code, but if you want to make it This is a link to the "silly" tag you need to add the "=silly" yourself

This is a little silly, but it may be worth considering linking viewtopic.php?f=16&t=311321 or something else currently instead of the other mod post, since among other things it doesn't mention the [report] tags. Nitpickey, and unlikely to mean anything to anyone, but it seems weird to link something outdated in a few ways.

A lot of people are very confused by anchors, may want to elaborate a bit more there, maybe on their potential uses? Like, mention a Table of Contents?

Under quoting and manual quotes, might it be worth mentioning that author and post number are not needed to make the nice box, that this is useful for quoting posts in lcoked threads, but also a warning that it's not good to quote material that *got* the thread locked in most cases?

Would a spoiler showcasing the effects of blocktext on a large block be worthwhile? (like you did with floatright and floatleft)

I liked what you did with the align tags

[Ever-Wandering Souls]

Since they look the same already on dark, maybe just making them the same in Vanilla would work

Also, I furthered edited the above post before seeing the reply

May want to provide a slight explanation for direct link vs hotlink

Ah, I see. I've never tried using names since I wasn't aware of what you could use. I'll add that in tomorrow, and find a nice but not too clashing colour for the code.

Thanks for pointing that out, by the way.

You're welcome!

To clarify, it's the HTML / CSS Color Name, which all have no spaces. Non HTML Color Names, with spaces, seem not to work. A few examples.

That's all I've got, hope that helps

[Ballotonia]

See also: https://www.nationstates.net/page=dispatch/id=330837

Ballotonia

[Cerillium]

Nicely done. (Now we need to add it to the Depot listing.)

[Esternial]

See also: https://www.nationstates.net/page=dispatch/id=330837

Ballotonia

Completely forgot about adding this to the OP. Sorry for the (massive) delay.