I was bored so I decided to do a tutorial on forum posts style.

[Corile]

Forum Style Guide

Tips & tricks, effects and hints

---

-- Intro

This tutorial is something similar to what I did over half a year ago on signatures. I actually wanted to do this for a while, to explain some things and clear up some confusions. In general, the purpose of this thread is to make some factions who have good RP get a good-looking writeup as well, as the form is equally important as the content. It will touch on subjects of design in general, so these tips may come in useful in other areas as well. I will not go super into detail about forum bbcode syntax as I will assume you have the knowledge of that. It's not difficult to learn, really.

Please do keep in mind all of this comes from my own experience. I haven't read any guides or other things, I just happen to have a few years of experience in graphic design on my back and some people seem to appreciate my faction writeups. ^[1][2][3] So I just decided to talk about and explain the ways I do things. Your mileage may vary.

If you have any suggestions on improvements to this tutorial, feel free to write below.

-- Style

The definition of style is pretty broad, however for the purpose of this tutorial we will define it as the visual properties of the text we are using. In other words, things like the typeface, colour, size, alignment and so on. In this section we'll mostly talk about typefaces and colours, because these are arguably the most important things in the style part of your design.

The choice of typeface or font is incredibly important. There are many types of fonts, but on the forums we only have access to a selected few, and in the future hopefully some more. There are many categories of typefaces and ways we can distinguish them. I will go over a few of those.

• Serif - serif is a word coming from French and in typography it means decorative features at the end of the strokes. Forum examples of such fonts include Times New Roman and Georgia.
• Sans-serif - "sans" meaning "without" in French, sans-serif fonts don't contain serifs. It's pretty self-explanatory. Many of the fonts available at our disposal are sans-serif, with the most basic one being Arial.

• Monospace - monospace typefaces have all their glyphs (or characters) the same width. They are often used in computer science, programming and other similar things because they are more readable there, but in normal text they should be avoided. When creating something stylised, they may be used, but monospace fonts are a lot slower to read for the human eye and therefore less preferable to write entire messages in. An example of a monospace font is Consolas.
• Proportional - simply put, proportional typefaces are the opposite of monospace ones. The glyphs aren't always the same width. Most of the fonts we use are proportional, such as Verdana

• Script - these typefaces are meant to simulate human written letters. Very few of those are actually done well and their usage is limited, because of their low readability. An example of a script typeface is Segoe Script (please don't ever use it).

• Display - display fonts are often used for headers. They are usually more complicated to read than other fonts and are generally harder to read when small. Their main purpose is to stand out from the crowd. A common example is Agency FB.

As with everything, there are good and bad fonts. Similarly, some fonts are supposed to work well in some circumstances, other work in others. There is no universal guide on how to pick a typeface, and because of that it's often one of the more challenging parts of designing your writeup.

The second part of style is colour. Picking a colour is not a difficult task, but choosing ones that go well together is a different story. Commonly, when choosing the colour scheme for your design, you want to pick a few of them so that it doesn't look too homogenous. There are tools that help you with that, such as Paletton, which will do a lot of the work for you.

From my experience I know that picking two colours - primary and secondary - is a pretty simple yet very effective in making everything look nice. Of course there are some colours that go well with everything, such as grey and white, but it's not always good to put them everywhere (<<<< hypocrisy). It should be noted that very often the primary colour is more bright and vivid, while the secondary is toned down and pastel.

You can also play around with complementary colours - ones that lay on the opposite ends of the spectrum. They are good for occasional accents, but not for general use. It's good to play around in Paletton and try to figure out optimal colour schemes for your design.

Alignment is simply the place your text "snaps" to. There are four types of it - left, center, right and justified. The first three are fairly straightforward, so I won't explain those. Justified text means it will be condensed into sort of a box, with both sides of the paragraph are neatly even. It's the preferable way of aligning everything, as it is very adaptable and looks a lot better than simple alignment to left.

To set up your style in an organised fashion you can use a method I personally call "global tags". What you do is you put them at each end of the document you're designing so that they will be the properties you will default to instead of the forum ones (grey text and Arial typeface).

---

I will write some text.
Then I'll change color, font and size.
When I close the tags, the style remains the same.

Code:

[align=justify][color=#8F88FF][font=Verdana][size=small]I will write some text.
[color=#483BFF][font=Open Sans][size=large]Then I'll change color, font and size.[/size][/font][/color]
When I close the tags, the style remains the same.[/size][/font][/color][/align]

Example of the global tags.

---

-- Layout

Layout in the very general is, as the name might suggest, the way elements are laid out in your post. One of the determinant factors of a good layout is the amount of empty space in it. If the post has little unused, empty space, as well as the layout is efficient and conveys all the necessary information, then it's a good one. If there's a lot of empty space, then the layout is not well designed.

Of course, there are more things to keep in mind. Layout generally consists of a few parts that repeat - headers, logos, text blocks, quotes, tables, lists and other elements. It is up to you to make each of those stand out in its own way, but not conflict. I will be talking more about every one of these except for logos, which are outside the scope of this tutorial.

Headers are parts of the layout that help break up the so called "wall of text" - they make sections more interesting to read and less homogenous. We often differentiate so called "header levels". HTML has six of those, but you will rarely use more than two. The common convention in designing headers is to use a more complicated typeface for it, often sans-serif. Things like Times New Roman are very rarely used for headers, while fonts like Agency FB, Orbitron or Oswald appear rather often. Another common practice is to use a hr tag after the header to make it stand out a bit from the text block below.

---

Level One Header

---

Level Two Header

---

Code:

[color=#FF9D38][font=Oswald][size=x-large]Level One Header[/size][/font][/color][hr]
[indent][color=#CC7D2D][font=Oswald][size=large]Level Two Header[/size][/font][/color][hr][/indent]

Example of level one and two headers.

---

As you can see, the second level header is indented and coloured a bit differently from the first level one. You can also do some tricks with small caps, this can be accomplished with playing around with the size tag.

Text blocks are the main content of your thread. They will contain stories, descriptions and other things providing the readers with information. Because of that, they need to be easy and fast to read, not hurt the eyes and contrast with the forum background. For the text blocks you want to pick a font that is proportional as well as easy and quick to read, such as Arial, Trebuchet MS, Verdana or my personal favourite, Tahoma, as well as a bright, often pastel, colour. Commonly the text blocks are indented in relation to the headers, but that's not always necessary. The text blocks should also always be justified, to avoid the inconsistency of the right side of the block.

---

This is a Header

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis dictum ultricies. Suspendisse potenti. Phasellus gravida dapibus lacus ac sollicitudin. Curabitur quis suscipit odio. Pellentesque id consequat urna. In vitae lorem dictum, placerat sapien at, ullamcorper neque. Duis venenatis vehicula justo, a luctus dolor semper at. Vivamus volutpat porta libero. In a bibendum neque. Aliquam erat volutpat. Pellentesque consectetur, ipsum sit amet aliquet efficitur, mi mauris accumsan nisl, sit amet molestie velit mauris sit amet urna. Quisque elit ante, bibendum quis ornare id, aliquam pharetra ante. Etiam in sem eros. Cras cursus auctor ligula sit amet accumsan.

Code:

[color=#BCCC19][font=Orbitron][size=x-large]This Is A Header[/size][/font][/color][hr]
[indent][color=#F1FF6C][font=Open Sans]The text was culled to save space.[/font][/color][/indent]

Example of a text block with a level one header.

---

Quotes can be understood in two ways - either as an actual quote block from the forums or a character quote. As per the first, there isn't much to talk about except for a few tricks that you can use with them. First of all, you can title the quotes. It's not a common practice but is sometimes used for roleplay purposes, even though the forum engine doesn't support that type of usage too well.

---

Quote body.

Code:

[quote="This is a title"]Quote body.[/quote]

Example of a quote title.

---

Keep in mind that if you use the global tags or in general the quote is inside some other style tags, the text inside of the quote will retain the inherited font, but not the colour.

A second trick you can use is a floating block that can work well when making, for example, a character sheet.

---

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget pulvinar nunc, eget facilisis arcu. Sed quam elit, efficitur sit amet felis sit amet, mattis eleifend augue. Curabitur ante est, sodales eget accumsan non, sagittis ut purus. Sed a ipsum sit amet massa viverra tempor. Aliquam porttitor nunc a mi rutrum consequat. Curabitur accumsan tincidunt ipsum non tincidunt. In ullamcorper, nisl vel molestie pellentesque, purus risus vulputate quam, a sagittis neque nulla at libero. Suspendisse blandit tortor vitae vehicula efficitur. Nullam a massa non ligula finibus commodo. Ut ultrices rutrum nisi eu consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget pulvinar nunc, eget facilisis arcu. Sed quam elit, efficitur sit amet felis sit amet, mattis eleifend augue. Curabitur ante est, sodales eget accumsan non, sagittis ut purus. Sed a ipsum sit amet massa viverra tempor. Aliquam porttitor nunc a mi rutrum consequat. Curabitur accumsan tincidunt ipsum non tincidunt. In ullamcorper, nisl vel molestie pellentesque, purus risus vulputate quam, a sagittis neque nulla at libero. Suspendisse blandit tortor vitae vehicula efficitur. Nullam a massa non ligula finibus commodo. Ut ultrices rutrum nisi eu consequat.

Code:

[float=right][img]http://i.imgur.com/RvQbIkB.png[/img]
Lorem ipsum dolor sit amet.[/float]
[quote]Quote content, to save space, was culled.[/quote]

Example of a floating block.

---

The other understanding of a quote is a line spoken by a character that we want to make somehow stand out in our document. There are multiple ways of doing this, I will show you one of them, figuring different ones is up to you.

---

"Disregard females, acquire currency."

—Anonymous

Code:

[color=white][font=Times New Roman][size=large]"Disregard females, acquire currency."[/size][/font][/color]
[indent][color=#A9A9A9]—Anonymous[/color][/indent]

Example of a character quote.

---

There are a few things to keep in mind here. First is the font choice - they don't have to be different, but when quoting something, the quote is usually in a serif typeface, though it's just common, not exactly necessary. Also when specifying the author, an em dash (—), two regular dashes (--) or a tilde (~) is used. The quotes are often heavily indented. One thing to keep in mind is that when the author is attributed in a different line than the quote itself, that should not be centered. The quotes are often indented heavily, but rarely centered.

I don't think the idea of a table is alien to anyone. The tables can be done in two ways, either as an old-school monospace character table, which we will not discuss, or a BB-Code one. Tables on the forums are done in the identical way they are in html, however they lack some of the features of the <table> tag from html.

There are three tags that form a table. First is the obvious, table tag. There's little to say about it other than everything else goes inside it. The second is tr which declares a row. Then we use td to declare a cell.

As opposed to the quote tags, tables inherit neither the font nor colour.

---

First cell, first row.
First cell, second row.	Second cell, second row.

Code:

[table][tr][td]First cell, first row.[/td][/tr]
[tr][td]First cell, second row.[/td][td]Second cell, second row.[/td][/tr][/table]

Example of a table.

---

Finally, we have lists. There are two types of them: ordered and unordered (bullet-point). As for the ordered lists, we can make them using a forum bbcode list=1. We then add individual items with the * tag.

---

1. First item.
   
2. Second item.
   
3. Third item.
   
   1. I can also put lists inside lists.
      
   2. LISTCEPTION
4. Fourth item.

Code:

[list=1][*]First item.
[*]Second item.
[*]Third item.
[list=1][*]I can also put lists inside lists.
[*]LISTCEPTION[/list]
[*]Fourth item.[/list]

Example of an ordered list.

---

There is a forum bbcode for unordered lists, but I would strongly discourage from using them. You can get a lot nicer results making the list yourself. These are often used in recruitment templates, so let me show you one and talk about its elements.

---

• Name: John
• Surname: Doe
• Physical details:

◦ Height: 169cm
◦ Weight: 72kg

• Biography:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis dictum ultricies. Suspendisse potenti. Phasellus gravida dapibus lacus ac sollicitudin. Curabitur quis suscipit odio. Pellentesque id consequat urna. In vitae lorem dictum, placerat sapien at, ullamcorper neque. Duis venenatis vehicula justo, a luctus dolor semper at. Vivamus volutpat porta libero. In a bibendum neque. Aliquam erat volutpat. Pellentesque consectetur, ipsum sit amet aliquet efficitur, mi mauris accumsan nisl, sit amet molestie velit mauris sit amet urna. Quisque elit ante, bibendum quis ornare id, aliquam pharetra ante. Etiam in sem eros. Cras cursus auctor ligula sit amet accumsan.

Code:

[color=#AAAAAA]• [color=white][b]Name:[/b][/color] John
• [color=white][b]Surname:[/b][/color] Doe
• [color=white][b]Physical details:[/b][/color]
[indent] ◦ [color=white][b]Height:[/b][/color] 169cm
◦ [color=white][b]Weight:[/b][/color] 72kg[/indent]

• [color=white][b]Biography:[/b][/color]

[indent]This part was deleted to save space. [/indent][/color]

Example of a bullet-point list.

---

First you can notice the regular list items. I put the fields in bold and coloured them white, to make them stand out a bit more. Then I included another list within the physical details section, differing in the bullet point. This is a common practice, though not always necessary. Finally, I added a biography field - something that requires a longer answer and for that it's left in an indented field a bit below. That last part is the main reason why you shouldn't use forum unordered lists - such things are pretty tricky to create with those. Also the bullet points aren't loaded properly in some fonts.

-- Tips

After writing about two most important things - style and layout, it's good to give some practical tips for people.

The one that I can't stress out more, is keep your code organised. It will be incredibly difficult to modify it after a few months, when all you've left is total spaghetti. Keep consistent with how you write your things and stick to it. There is no bbcode syntax highlighting, so you need to live without it. Bbcode is very important to be kept consistent in terms of the order. For example, I suggest you stick to the color-size-font order of the tags (CSF, easy to remember, same as the Junker freighter), and to close them in reverse. Otherwise, it will create problems that will destroy your document.

Another thing are indents. I never actually specified how to do them, but ever since the addition of the percentage indents, there have been two ways of doing that. The percentage indents I suggest using when you want to indent the entire post. For the individual, small things use the regular, absolute indent. You can find the comparison between the two in this post. I'd show you an example, but it will be difficult, so I suggest you try it on your own.

-- List of typefaces

All the typefaces listed below are installed on the forums or come with Windows or Freelancer. I may or may not have arbitrarily omitted some of them.

Forum fonts: visible for everyone, if their system doesn't have them, they will be replaced with similar ones.

• Arial
Sans-serif, proportional
• Georgia
Serif, proportional
• Lucida Sans Unicode
Sans-serif, proportional
• Tahoma
Sans-serif, proportional
• Times New Roman
Serif, proportional
• Trebuchet MS
Sans-serif, proportional
• Verdana
Sans-serif, proportional

Google Fonts: visible for everyone.

• Open Sans
Sans-serif, proportional
• Oswald
Sans-serif, proportional, display
• Orbitron
Sans-serif, proportional, display
• Merienda One
Sans-serif, proportional, display

Freelancer: they come with the game.

• Agency FB
Sans-serif, proportional, display
• Microsoft Sans Serif
Sans-serif, proportional

Windows fonts: not everyone may have those and they will be replaced with their default one if they're not available. All of the fonts are included in Windows 7 or higher.

• Segoe UI
Sans-serif, proportional
• Segoe UI Light
Sans-serif, proportional
• Aharoni
Sans-serif, proportional
• Estrangelo Edessa
Sans-serif, proportional
• Franklin Gothic Medium
Sans-serif, proportional
• Gautami
Sans-serif, proportional
• Gulim
Sans-serif, proportional
• GulimChe
Sans-serif, monospace
• SimHei
Sans-serif, monospace
• Lucida Console
Serif, monospace
• Consolas
Serif, monospace
• Batang
Serif, proportional
• Palatino Linotype
Serif, proportional
• Sylfaen
Serif, proportional

-- Outro

Well, I guess that would conclude this tutorial. It's not incredibly detailed, it merely scratched the surface, but should give you a better idea of how to do these kinds of things properly. Kudos, if you've actually read the whole thing.

If you have any questions or suggestions, post below.

---

Reflections on the Revolution in Gallia
Custodi // High City of Heraklion // The Cult of Archangels
Log Filter // Post Creator // Manhattan

[Commissar]

Just giving this post a well-deserved bump. It's a fantastic guide, and I've found it tremendously useful.

Revered Mods, any chance we could pin this thread to the front of the media centre?

---

May you live in interesting times.
| Sarah McFarlen | Jane Hartman |

[Shinju]

I as the littlest, stressed, cutest forum Jungler and moderator... Will do that

By the way, nice one!

---

"No step on Snek..."

my english is my english!

[Corile]

Oh. Uhm. Damn.
I guess I should fix some typos at the very least then.

---

Reflections on the Revolution in Gallia
Custodi // High City of Heraklion // The Cult of Archangels
Log Filter // Post Creator // Manhattan

[Swallow]

Thank you, it will help me to organize my data and make some things prettier and not as plain.

---

FL MOD(EL)MAKING: TOOLS, RESOURCES, TUTORIALS AND MY SHIPS (OLD)

I am on discord: Roal-Yr#5994, I don't log on forum more than a few times a year.

I am not making ships for FL anymore, I am making my own space game instead:
https://github.com/roalyr/GDTLancer
https://roal-yr.itch.io/gdtlancer
https://youtube.com/playlist?list=PL5HQB...cdH45LZgjj

[sindroms]

Cull down on the indents there, Prot. Most of us have widescreens after all 8|
Epic post, by the way.

---

--------------
PSA: If you have been having stutter/FPS lag on Disco where it does not run as smoothly as other games, please look at the fix here: https://discoverygc.com/forums/showthrea...pid2306502
----------

[evanz]

cool but im lazy is there a gui or something i could write posts in that does all this for me

[Corile]

First post updated with some corrections as well as a list of fonts.

---

Reflections on the Revolution in Gallia
Custodi // High City of Heraklion // The Cult of Archangels
Log Filter // Post Creator // Manhattan

[Arioch]

This guide should be added here: http://discoverygc.com/forums/showthread.php?tid=97737

Well done man!

---

[Malmsteen]

Fantastic Guide! thank you for your time and effort

Malmsteen