Public BBCode Guide

Image
About us: Points of Contact | LSEMS Public Releases | Employee Adjustments
Careers: Recruitment Desk | Reinstatement Desk
Feedback and Services: Commendations and Complaints | Basic Life Support Courses | Ride-Along Program | Request an Appointment | Fire Safety Area

Public (advanced) BBCode Guide: Click me!
Locked
User avatar
Alex Mpache
Chief of EMS
Posts: 3563
Joined: Thu Aug 06, 2020 6:40 am
ECRP Forum Name: Mpache

LSEMS Awards

Public BBCode Guide

Post by Alex Mpache »

Image
TABLE OF CONTENT
spacer
BBCODE GUIDE
Section 1.1 - INTRODUCTION
  • This guide was created by Alex Mpache. Feel free to reach out if you have any issues beyond this guide via email!
  • (( Also on discord - pujdo | OR | Mpache in the ECRP Discord! Good luck :) ))
  • This introduction contains useful things that you should or must know before editing, otherwise you are wasting time, effort and are raising your blood pressure over silly things that are completely preventable.
  • (( The guide skips over some stuff but also goes in-depth about deceptively simple stuff - I assure you that the simple stuff has functions and implications you weren't aware of! If you are looking for a Beginners Guide to BBCode, visit this guide (click me!) by Ranger! ))
  • Every single bit of paperwork you will find yourself doing revolves around and utilizes BBCode. It is rather easy to mess up the utilization of BBCode, so this section will assist you with understanding it and getting good at it.
  • You are of course not required to know all of this, but you should know the very basics if you wish for your paperwork to look decent, and function.
  • As you will see below, it is cut into small portions you can learn one by one, and pick and choose which ones you need to refresh yourself on later on.
  • Important: Whenever you are creating something, editing, writing, or whatever you are doing - Preview first, and proofread! You can edit a thousand times and then some before sending, but once sent, it's there, and may not be editable, or ready for viewing!
  • Additionally, never ever work on the original (until you master BBCode). Always copy whatever you are editing/working on, and work on the copy, then make sure it is sound, and only then replace the master version.
  • The easiest way to make a brief copy is to duplicate your browser tab! It clones your text box 1:1 and allows you to have "past versions" of your currently edited code.
  • Further, learning to use your keyboard over clicking things with your mouse (you will need to click things regardless) is not mandatory, but it will speed up your workflow and is a necessity for mastery over BBCode.
    General keyboard shortcut tips:
    • CTRL+SHIFT+T is your friend. Reopens the last closed tab or window.
    • CTRL+Z is also your friend. The common UNDO action.
    • CTRL+SHIFT+Z is your friend's lesser-known brother. It is a reverse action of the UNDO, a RE-DO if you will, it effectively undoes an undo.
    • CTRL+Left/Right ArrowKey goes a word left/right
    • SHIFT+ArrowKey selects a character
    • CTRL+SHIFT+ArrowKey selects a full word (or row if you press up/down)
    • And of course, using the arrow keys alone will allow you to move around. Get used to that, it's more accurate than clicking and saves time, especially as you get comfortable.
    • (( Additionally, CTRL+C and CTRL+V are known to everyone (I hope), but not the extended clipboard! Make sure it's enabled on your device. In Windows - just press the Windows key and type Clipboard (just start typing), then click open Clipboard Settings and turn on Clipboard History. Now you can press WINKey+V for a better paste! ))
spacer
Section 1.2 - NESTING
  • The term "Nesting" will be used as - A thing (bbcode tag) within another thing (another bbcode tag) of the same nature.
  • Simply put, BBCode does not like nesting, and there are some rules to it. Generally speaking, this is due to the nature of opening and closing statements using the box brackets.
  • Box Brackets are used to open and close BBCode tags:
    • This one [ for opening a tag.
    • This one ] for closing a tag.
  • IMPORTANT: The closing tag always has a forward slash ( / ), and is often the breaking point for beginners creating larger BBCode blocks. Diagnosing this is easy, CTRL+F and type each Tag you've used, and if you're missing a forward slash on one of your closing tags, that's gonna be it.
  • IMPORTANT AGAIN: When you are nesting tags and typing them by hand, you must close them in the inverse order of opening them, otherwise it will not close properly and break!
  • The worst thing you can nest is the Code tag; it will straight up NOT work. See Section 1.16 - CODE TAG for a more in-depth explanation of the Code tag.
    (( To go around this limitation, utilize Pastebin(.com) and then use the Raw Pastebin link to provide the code to the BBCode.
    *Pastebin is not affiliated with Eclipse Roleplay ))
  • Some things, such as the Divbox, List, and Spoiler, can be nested without issue. Experiment with it!
  • Examples:

    • Code: Select all

       [spoil] content1 [spoil] content2[/spoil] [/spoil]

    • Code: Select all

       [divbox=white] content1 [divbox=white] content2 [/divbox] [/divbox]
spacer
Section 1.3 - DIVBOX
  • The Divbox tag is a powerful utility tool that you can use to separate sections better.
  • The BBCode for a Divbox is as follows:

    Code: Select all

    [divbox=COLOR]content[/divbox]
  • You can either utilize a COLOR via word (so think - green, blue, red, and others), but you can more precisely specify the color by using a HEX Color Code.
  • If you nest two Divbox tabs, it looks like this:
    ► Show Spoiler
    The first Divbox tag is White, and the second is Red, differentiating the two.
    The code for this looks like this:
    ► Show Spoiler
    Simplified text:
    ► Show Spoiler
  • You can put anything into a divbox tag! It does not change the way things work, but do make sure to close it!
spacer
Section 1.4 - SPOILER
  • The ever-useful Spoiler tag! You can use it to "hide" sections that need not be shown at all times but still need to be present.
  • Spoilers can be nested!
  • There exist two versions of the spoiler tag - "spoiler" & "spoil".
  • The "spoiler" version allows you to title it. The BBCode for it is as follows:

    Code: Select all

    [spoiler=text][/spoiler]
  • The "spoil" version does not allow you to title it, but looks a little bit smoother. You can simply title it with text. I suggest using this version. The BBCode for it is as follows:

    Code: Select all

    [spoil][/spoil]
  • Tip: You can put a Code tag inside of a Spoil tag to make it more neat, hiding the contents of the Code tag, but still allowing quick access to its content.
spacer
Section 1.5 - HORIZONTAL DIVIDES
  • The horizontal divide is one of the secretly most useful tools within BBCode.
  • It is quite literally just a horizontal line that serves as a divider between two sections and should be used frequently for more easily readable emails/posts.
  • The code for it has two forms, and they look like this:

    Code: Select all

    [hr]

    Code: Select all

    [hr][/hr]
  • If you just need the line, utilize the first one. However, if you are making a larger post that will need editing later, you can input "marker" text between the opening and closing tags. This text will not be visible when posted, but you can search for it while editing, making your life slightly easier.
spacer
Section 1.6 - GENERAL TEXT FORMATTING
  • There are many different things you can do to text. The best way to find what works best for your text is to experiment, so don't be scared of modifying text several times until it feels right!
  • These are the most commonly used tags, in order, when formatting text: Bold, Italic, Underline, Size, and Strikethrough.
  • You can find all four in the menu above the text box.
  • They all work with each other!
  • The Bold Tag is utilized like so:

    Code: Select all

    [b]text[/b]
  • The Italic Tag is utilized like so:

    Code: Select all

    [i]text[/i]
  • The Underline Tag is utilized like so:

    Code: Select all

    [u]text[/u]
  • The Size Tag is utilized like so:

    Code: Select all

    [size=100]TEXT[/size]
  • The Strikethrough Tag is utilized like so:

    Code: Select all

    [size=100]TEXT[/size]
  • You can also color, highlight, and shadow the text, which is as follows:
    • Color:

      Code: Select all

      [color=#0000BF]Looks [/color][color=#00FF00]like [/color][color=#BF0000]this.[/color]
      Looks like this.
      spacer
    • Highlight:

      Code: Select all

      [highlight=yellow]Looks like this.[/highlight]
      Looks like this.
      spacer
    • Shadow:

      Code: Select all

      [shadow=gray]Looks like this.[/shadow]
      Looks like this.
      spacer
    *you can utilize common color names (red, blue, yellow, etc) and hex values for the color, highlight, and shadow tags.
    spacer
  • Remember what you learned in Section 1.2 - NESTING (click) - you must close them in the inverse order of opening them. This is a very common failure point, especially as the common text tags are short to type out, and are amongst the first ones you'll learn by heart in full.
spacer
Section 1.7 - IMAGES
  • You can utilize images as well! These cover a lot of ground but require you to make them (or take them), so take them as work that cannot be done with BBCode, or can be done more easily with other things.
  • The code for an Img tag is as follows:

    Code: Select all

    [img]LINK[/img]
  • ((Use IMGUR for the links as it is the best option. Also, make sure to link to the image and not the album. (Right click -> Open in New Tab -> Copy the link of the tab; LEARN TO DO IT THAT WAY TO AVOID LINKING ALBUMS!
    *IMGUR is not affiliated with Eclipse Roleplay ))
  • When utilized natively, the image will be stretched until it hits the vertical walls of the email/post, which will cause its vertical resolution to be scaled as well.
  • The image tag is not centered by default, but you should practice centering it due to how resolution and displays work. In brief, if your image is smaller than the space available, it will be aligned as regular text (left to right).
  • There is a variation of the image tag - "fimg". This has a narrow use case but can be useful (example: logos that need to be scaled down)
    The code for the fimg tag is as follows:

    Code: Select all

    [fimg=X,Y][/fimg]
    Using this is a manual but more robust method for things that you want a SPECIFIC size - but it prevents them from being scaled with display size.
  • There is a further variation of the image tag - "fpimg". This is a scaling image tag, where the value after = is a percentage of the original image used. Useful for logos, signatures and other images that are floated in an irregular way.
    The code for the fpimg tag is as follows:

    Code: Select all

    [fpimg=X,Y][/fpimg]
    This is the preferred method for image scaling when necessary, as it maintains the scale on various display sizes. Generally speaking, you will rarely need to scale an image unless you are doing something that requires a small image with wrap-around text (For text wrapping, visit the advanced 1.17 - FLOAT (click), however, I strongly recommend learning in order from top to bottom)
spacer
Section 1.8 - ALIGNMENTS
  • Very useful for specific cases, such as a newsletter, press release, handbook, or similar.
  • The three options you have: left, right and center.
  • Everything is naturally aligned left, so you do not need to use that one ever.
  • The BBCode for them is as follows:

    Right:

    Code: Select all

    [right]text[/right]
    Center:

    Code: Select all

    [center]text[/center]
  • There also exists a Float tag, but it is way more advanced than align. You can find an in-depth explanation of the Float tag in 1.17 - FLOAT (click).
spacer
Section 1.9 - LIST
  • The List Tag is useful for making, well, lists!
  • There are several different list tags you can use, but the very basic one is as follows:

    Code: Select all

    [list]
[*]
[*]
[/list]
  • The brackets with the asterisk are the bullet points, make sure to include them in each new row you want bulleted.
  • Forgetting to close a List Tag can be your worst nightmare, make sure to create the opening and closing statement before you input the contents.
  • Lists can be nested! It creates a list within a list. Simply create an entire List tag as a bullet point of the parent list. Make sure to close it within the same bullet point of the parent list.
  • As for default list variations, you can use: a, A, i, I, and 1
  • Additionally, if you wish to use a custom bullet point, you can do it by making the tag "list=none", doing this will indent your text like a regular list, but the asterisk in the brackets will not form a bullet point, so you can just put your own custom tag there. I personally recommend against doing this but it is an option.
  • You can also use the None List type to make an indent in your text block, useful for sub-sections or sub-sub-sections. You do it like so:

    Code: Select all

    [list=none]
[*]
[*]
[/list]
spacer
Section 1.10 - SPACERS
  • A small secret of great masters - invisible spacers. This is an extension of the Color Tag, so, simply text colored to match the background or better yet - made transparent (utilize the transparent option, some users use forced darkmode that will reveal your spacers!). You can use these to space out BBCode vertically and horizontally in a precise way.
  • This is what amogus invisible spacers look amogus again like within a text.
  • The BBCode for this is as follows:

    Code: Select all

    [color=transparent]SPACER[/color]
  • You can customize the size of the text to customize the width of the spacer (this applies when it is used horizontally).
  • In an example: You can customizea the size of the text to customize the width of the spacer.
  • When using a spacer vertically, simply make a new row (SHIFT+ENTER), then create a spacer in that section.
spacer
Section 1.11 - HYPERLINKS
  • Quite useful for external or reference links.
  • Images technically work for these, but I strongly recommend that you use text as the Image tag does not like to cooperate sometimes.
  • The BBCode for this is:

    Code: Select all

    [url=LINK]TEXT YOU CLICK[/url]
  • A live version would look like this.
  • You can apply text formatting to the clickable text (learned about in Section 1.6 - TEXT FORMATTING (click) )
  • I recommend applying at least the Bold, Italic, or both tags to Hyperlink tags.
spacer
Section 1.12 - GOTO AND ANCHOR
  • These two tags are really useful when you need to utilize a Table of Contents (click), or wish to have a Button that leads to a spot within the same post.
  • To send a Goto somewhere, you need an Anchor first.
  • The BBcode for the Goto tag is:

    Code: Select all

    [goto=NAMEofANCHOR]Text[/goto]
  • The BBcode for the Anchor tag is:

    Code: Select all

    [anchor]NAME[/anchor]
  • The Anchor tag is invisible in the posted version.
  • The text within the Goto tag, can be combined with all the text formatting tags (learned about in Section 1.6 - TEXT FORMATTING (click) ).
  • A good way to utilize the Goto/Anchor combo is a "back to the top" (click me!) button.
  • I recommend applying at least the Bold, Italic, or both tags to Goto (go-to) tags.
spacer
Section 1.13 - SUBTITLE
  • Used to create subtitles when dealing with BBcode. You can see an example of everywhere in this guide.

    Code: Select all

    [lsemssubtitle]TEXT[/lsemssubtitle]
  • MD, PD, GOV, SD, and DOC all have their own embeds for subtitles - lsemssubtitle, lspdsubtitle, lssdsubtitle, sasgsubtitle, docsubtitle.
spacer
Section 1.14 - FOOTER
  • You can create a footer using an image tag, usually a wide and short image, that you then utilize as, well, a footer!
    Looks like this:
    ► Show Spoiler
    Code:
    ► Show Spoiler
  • MD, PD, GOV, SD, and DOC all have their own embeds for footers - lsemsfooter, lspdfooter, lssdfooter, sasgfooter, docfooter.
spacer
Section 1.15 - BANNERS
  • Banners themselves are not BBCode, but a simple image tag usually situated at the top of a post, or at the top of a section.
  • A generator can be found here. (( Generator kindly hosted by my dear friend Ash (Discord - drpathetic) ))
spacer
Section 1.16 - CODE TAG
  • Used to create a dead text box that will not be compiled into BBCode.
  • In simple terms, allows you to post formats to be copied/pasted.
  • You cannot nest a Code Tag. Simply won't work, do not do it. The first open argument will close with the first close argument, leaving you with a non-functional section of code.
    (( To go around this limitation, utilize Pastebin(.com) and then use the Raw Pastebin link to provide the code to the BBCode.
    Once you generate a Pastebin, click "Raw" and create a Hyperlink (Section 1.11, click me!) to that.
    *Pastebin is not affiliated with Eclipse Roleplay. ))
spacer
Section 1.17 - FLOAT
  • The float tag is going to give you headaches while learning it. It is however very useful and very worth learning.
  • At first, it can be seen as counter-intuitive, so view the examples to understand it well!
  • Every time you use it, you will need to deploy some BBCode wizardry to make things fit well. Be creative, a new line, spacer, or several, can make your content fit well together.
  • Floating something to the left:

    Code: Select all

    [float=left][/float]
  • Floating something to the right

    Code: Select all

    [float=right][/float]
  • Example 1:
    ► Show Spoiler
  • Code for Example 1:
    ► Show Spoiler
  • Example 2:
    ► Show Spoiler
  • Code for Example 2:
    ► Show Spoiler
  • Example 3:
    ► Show Spoiler
  • Code for Example 3:
    ► Show Spoiler
spacer
Section 1.18 - HOW TO MAKE A SIGNATURE
  • Many documents require a digital signature on them, so why not have a nice one? It's simple and allows you to have your own fancy signature, ready to be used at all times!
  • You can generate a signature here!. Input your name and pick a font, then measure the size by implementing it into an Image Tag! Some font sizes will often exceed a certain height, the golden spot is around 70 pixels.
    (( *Fontmeme is not affiliated with Eclipse Roleplay. Feel free to generate your own image as well! ))
  • General Signature format:

    Code: Select all

    [img]SIGNATURE[/img]
[i]Fname Lname[/i]
[b]Position/rank[/b]
[b]Company/organization/department[/b]
  • My personal signature as an example:

    Image
    Alex Mpache | Chief of EMS
    Los Santos Emergency Medical Services
Guide created by Alex Mpache. Alex Mpache (click me!)
(( Also on discord - pujdo | OR | Mpache in the ECRP Discord! Good luck :) ))
Image

Alex Mpache | Chief of EMS
Los Santos Emergency Medical Services
Top
Locked

Return to “LSEMS - Public Section”

Who is online

Users browsing this forum: No registered users and 34 guests