1. Welcome to Black Dahlia, an adult 18+ roleplaying and writing forum! Don't forget to vote daily for BDRP! The more you vote, the more awesome writers find BDRP, so vote each day! Click here to vote on Top RP Sites and here to vote on Top Site List.

 BBcode Information & Guides

Discussion in 'Guides' started by Scarlet RN, Sep 10, 2017.

  1. Scarlet RN

    Scarlet RN BBCode Queen Member

    Messages:
    328
    Local Time:
    9:01 PM
    BBcode Basics
    Hello there!

    I’ve already made two other guides relating to BBcode and I’ve come to realize that in none of my guides have I really explained what BBcode is or the basic rules behind it. That’s where this guide comes in. I’m hoping this guide will fill in the gaps that some of my other guides might have created in anyone’s understanding of bbcode.


    Some Simple Rules:
    • BBcode uses brackets - not parenthesis and not the greater than or less than signs.
    • BBcode is very similar to HTML code although it’s simplified in most cases.
    • From what I know, bbcode’s use is mostly limited to forums so it’s not something that is really useful in many other places; however, it can be used as a bridge to learning HTML which is used all over the internet.
    • Every bbcode will have an opening code which will mark where the effect of the bbcode starts and a closing code which will mark where the effect of the bbcode ends. The closing code will always contain a backslash prior to the name of the code.
    • Most bbcodes available on Black Dahlia are codes that have buttons designated to them. This means that if you’re using the rich text editor (RTE) and you highlight text and then click the “B” button, then the editor is automatically inserting the bold effect bbcode for you.
    • If you’re ok with using the buttons and you are not looking to use tabs and/or multi-leveled lists, then there really honestly isn’t much reason to learn bbcode at all.

    The Basic Codes:
    • Bold: Ok. You want to make something bold without highlighting it and clicking the button. That’s easy. Just type this: [b]Here you put the text you want to make bolded[/b]. The “[b]” is your opening tag and the “[/b]” is your closing tag. Anything in between those two tags will be bolded when you click post.
    • Underline: Ok. You want to underline something without having to highlight it and click the underline button. That’s easy. Just type this: [u]Here you put the text you want to underline[/u]. The “[u]” is your opening tag and the “[/u]” is your closing tag. Anything in between those two tags will be underlined when you click post.
    • Italicize: Ok. You want to italicize something without having to highlight it and click the italicize button. That’s easy. Just type this: [i]Here you put the text you want to italicize[/i]. The “[i]” is your opening tag and the “[/i]” is your closing tag. Anything in between those two tags will be italicized when you click post.
    • Alignment: Ok. You want to either a.) align something on the right of the post or b.) center something in the middle of the post. That’s easy. Your opening tag will consist of either [right] or [center]. After your opening tag, you put the text that you want to align either right or centered. Then your closing tag is either [/right] or [/center]. Please note that with this code, there is also an option to align left. However, left alignment is the default and so the code is not needed.
    • Slash-through: So, you want to cross something out rather than simply erasing it? This code lets you do that. Your opening code is [s]. Then you type or insert the text you want to appear crossed out. Your closing code is [/s]. Here’s an example of what it looks like: This text is crossed out.
    • Spoilers: So, you’ve got a secret to hide, eh? Well, put it in a spoiler! Your opening code is [spoiler]. Then you type or insert the text you want the spoiler to contain. Your closing code is [/spoiler]. With spoilers, there is also an option to title the spoiler. If you would like to give your spoiler a title, your opening code is [spoiler=insert desired title here] and you can replace “insert desired title here” with any title you wish to give the spoiler. Your closing code stays the same even if you give your spoiler a title.
    • Links: So, you wanna turn a word or a phrase into a link? That’s easy! Just type: [url=insert the link here]the word or phrase you want to link[/url]. Replace “insert the link here” with the link to wherever you want the word to link to.
    • Images: This is a code you can use when you want to insert an image and you currently have the link to the image. All you have to do is type: [img]insert the image link here[/img]. When you post it, the image will show up. You can even put alignment codes around the image codes to center or right align the image if you want to!

    Size Codes:
    I’m gonna give size codes their own section because the options have always felt a bit odd to me. If you want to change the size of your text, as you might imagine, the code is [size=insert number here] and you can replace “insert number here” with the desired font size. However, it works differently in code than it does in google docs or Microsoft Word. In bbcode, you only have sizes 1 - 7. The default size is 4, so if you want your text to be bigger, you need to use numbers 5 - 7. If you want your text to be smaller, you need to use numbers 1 - 3.

    Using the code [size=4] is the same as saying keep the size exactly as it would be even if I didn’t use bbcode. It’s honestly a pointless code to add to a post because it does nothing.

    Now for some examples of each size…
    • This text is size 1.
    • This text is size 2.
    • This text is size 3.
    • This text is size 4 ( the default size).
    • This text is size 5.
    • This text is size 6.
    • This text is size 7.
    If you want to use anything bigger, the easiest way to go about it that I know of is to create an image file with text bigger than that.


    Colors:
    Yes, coloring text is a fun thing to do. It’s something you should be careful with, too, though, because many people on Black Dahlia use different themes and so a color that looks legible on your theme might not be legible on someone else’s theme.

    There are a few different ways to use color bbcodes. You can use named colors (of which a list can be found here). You can use hex codes (although you have to remember to include the pound sign - #). And you can use RGB codes.

    Your opening code is [color=insert name/code for color here]. Replace “insert name/code for color here” with either the name or the code for the color you’d like to use. Then insert and/or type the text you want to be that color. The closing code at the end would be [/color].


    Lists:
    So you wanna make a list, eh? They’re useful and I’ve used quite a few of them in this guide alone. Your opening tag for a list is going to be [list]. That’s pretty simple. Then, whenever you want a bullet point to appear, you type [*]. What makes this code a little different from all the others is that the asterisk in brackets will not be accompanied by a closing code. The only closing code you need is [/list] when you want the list to end.

    If you would like your list to be a numbered list, then you use [list=1] as your opening code. Your closing code and the code you use for each bullet point will still be exactly the same.

    Spacing in lists is a bit odd. If you want there to be an empty line break between each bullet point, you need to enter twice between each bullet point. Two line breaks in the code will translate to one line break in the post once you post it.

    On another interesting note, you can make lists within lists as well. HOWEVER, if you’re making lists within lists, the RTE will break your code and mess up the post if you use it. If you’re making lists within lists, it is crucial that you either a.) use the bbcode editor (which can be accessed by clicking the button in the upper right of the posting box) or b.) disabling the RTE altogether (which means you will lose access to the buttons and have to do everything in code). Lists within lists will not work if the buttons are enabled.


    Columns:
    I’m looking into these and figuring out how they work myself at the moment. I’m used to a different version of the code so I’m still learning Black Dahlia’s. As soon as I’m confident I have it figured out, I’ll add in an explanation of this one as well.
     
    HGLZ, Permafrost, Austin121 and 10 others like this.
  2. Scarlet RN

    Scarlet RN BBCode Queen Member

    Messages:
    328
    Local Time:
    9:01 PM
    FONTS!

    Yes, this is a guide all about fonts! There are so many wonderful fonts that can be used on many different wonderful xenforo sites, and as many of you know, Black Dahlia is a xenforo site so fonts are one thing you can have plenty of fun with right here as you roleplay!

    Why use fonts?
    There are a couple reasons I can come up with to use different fonts.
    1. For some people, using different fonts can make writing just a little bit more fun and when writing’s more fun, perhaps you have more muse and find that writing replies comes easier to you.

    2. Sometimes different fonts can be used to communicate different forms of communication. You might use one font for normal narration and another for an email that your character is writing and sending off in an rp, for example.

    3. Fonts, like colors, can be used to differentiate when one person is speaking vs another person is speaking.
    I’m not honestly the kind of person who really thinks you need too much of a reason to play with fonts, but if you like reasons, those are a few to work with.

    How do you use fonts?
    Well, this is probably the most important question anyone could ask because until and unless you know how to use them, fonts can’t really do you much good at all. Using a font is simple. All you have to do is type [font=insert font name here] and replace “insert font name here” with the name of the font you want to use. Then, when you’re done with the font in your post, you type [/font].

    • [font=Handlee]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tortor sem, varius vel turpis et, tempor viverra turpis. Aenean a enim ut mauris consectetur pretium. Nam nec dolor varius metus auctor rutrum. Phasellus sed mauris a turpis faucibus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia ligula ut libero molestie, ac faucibus ligula sagittis. Integer laoreet ligula in sem porttitor, at varius elit consectetur. Aenean eu ultricies felis, non viverra urna. Ut tristique turpis at eleifend placerat. Maecenas id est sit amet nisl cursus pulvinar. Vestibulum leo turpis, vulputate a nunc sit amet, ullamcorper semper diam. In id odio at eros molestie varius vel a magna. Curabitur quis pharetra massa, sed feugiat ligula. Donec bibendum nisi mollis, imperdiet mauris nec, tristique nisl. Aliquam sit amet velit sit amet lorem viverra posuere bibendum sed risus.[/font]

      [font=Salsa]Nam gravida sed ante eget eleifend. Aliquam vitae gravida magna, eu consequat nulla. Sed in nunc felis. Phasellus venenatis purus justo, eget porttitor lacus tempor eget. Suspendisse pellentesque magna eget ipsum sollicitudin, id tristique lacus mollis. Etiam feugiat arcu non ligula interdum, nec porttitor arcu accumsan. Suspendisse potenti. Integer nec odio scelerisque, aliquet libero vestibulum, condimentum erat. In hac habitasse platea dictumst. Maecenas eleifend, sapien nec pretium lacinia, ex massa auctor elit, ac commodo nulla eros a neque. Suspendisse enim elit, eleifend vel porta vel, imperdiet sit amet neque.[/font]

      [font=Sansita]Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non tellus ut ante tristique convallis. Ut dignissim interdum aliquet. Donec nec nulla tincidunt, ultrices neque id, facilisis ex. Aliquam id enim non erat placerat ultricies. Nunc pulvinar consequat ipsum, non euismod velit fermentum eget. Sed dolor est, condimentum at imperdiet non, fringilla hendrerit lectus. Donec aliquam et nisl nec imperdiet. Nunc eget nunc vehicula, molestie ipsum eu, suscipit enim. Donec varius quam at elit lobortis, nec pulvinar sem scelerisque. Etiam felis lectus, cursus non convallis eget, condimentum sed ante.[/font]
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tortor sem, varius vel turpis et, tempor viverra turpis. Aenean a enim ut mauris consectetur pretium. Nam nec dolor varius metus auctor rutrum. Phasellus sed mauris a turpis faucibus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia ligula ut libero molestie, ac faucibus ligula sagittis. Integer laoreet ligula in sem porttitor, at varius elit consectetur. Aenean eu ultricies felis, non viverra urna. Ut tristique turpis at eleifend placerat. Maecenas id est sit amet nisl cursus pulvinar. Vestibulum leo turpis, vulputate a nunc sit amet, ullamcorper semper diam. In id odio at eros molestie varius vel a magna. Curabitur quis pharetra massa, sed feugiat ligula. Donec bibendum nisi mollis, imperdiet mauris nec, tristique nisl. Aliquam sit amet velit sit amet lorem viverra posuere bibendum sed risus.

      Nam gravida sed ante eget eleifend. Aliquam vitae gravida magna, eu consequat nulla. Sed in nunc felis. Phasellus venenatis purus justo, eget porttitor lacus tempor eget. Suspendisse pellentesque magna eget ipsum sollicitudin, id tristique lacus mollis. Etiam feugiat arcu non ligula interdum, nec porttitor arcu accumsan. Suspendisse potenti. Integer nec odio scelerisque, aliquet libero vestibulum, condimentum erat. In hac habitasse platea dictumst. Maecenas eleifend, sapien nec pretium lacinia, ex massa auctor elit, ac commodo nulla eros a neque. Suspendisse enim elit, eleifend vel porta vel, imperdiet sit amet neque.

      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non tellus ut ante tristique convallis. Ut dignissim interdum aliquet. Donec nec nulla tincidunt, ultrices neque id, facilisis ex. Aliquam id enim non erat placerat ultricies. Nunc pulvinar consequat ipsum, non euismod velit fermentum eget. Sed dolor est, condimentum at imperdiet non, fringilla hendrerit lectus. Donec aliquam et nisl nec imperdiet. Nunc eget nunc vehicula, molestie ipsum eu, suscipit enim. Donec varius quam at elit lobortis, nec pulvinar sem scelerisque. Etiam felis lectus, cursus non convallis eget, condimentum sed ante.


    What fonts can I use?
    There are a lot of them. A comprehensive list of all fonts that will work on Black Dahlia can be found here. Please note that a font will not work unless its name is spelled correctly, spaced appropriately and capitalized appropriately. If it does not work, check the way you’ve typed the name and make sure it matches exactly with how it appears on the list I’ve linked.

    Tips for Using Fonts:
    • Make sure the font you’re using is something your partner can actually read. It’s very hard to reply to a post when you can’t read it.

    • I highly recommend previewing the font on Black Dahlia before using it. Sometimes fonts show up slightly differently on xenforo sites than they do on the list of google fonts.

    • Some fonts are naturally smaller or bigger in size than the default font. If a font appears smaller than it should be, you can always size it up using the size bbcode. To upsize something, you need to use sizes 5, 6 or 7. Size 4 is the default size in posts so if you designate it to size 4, your changing nothing. (If you need to know how to use the size code, I’ll have another guide soon with some basic bbcode things including the size code.)

    • If you’re using fonts in conjunction with a few other bbcodes (for example: if you’re using size codes, color codes, and tabs or bulleted lists), then I highly recommend using the bbcode editor when you post. To use the bbcode editor, you click the button in the upper right corner of the editing box. Yes, it does disable all the buttons, but that’s what code is for. Code can accomplish everything and more without needing the buttons.
    That’s pretty much the gist of fonts! Have fun exploring all the options. There’s so many to choose from!
     
    Austin121, Mercy, Kenna and 2 others like this.
  3. Scarlet RN

    Scarlet RN BBCode Queen Member

    Messages:
    328
    Local Time:
    9:01 PM
    Black Dahlia Roleplaying has just acquired bbcode tabs! Using tabs is an awesome way to keep things organized and to condense long lists of information into smaller amounts of space.

    I’m here with a quick explanation on how to use this awesome new tool. First, it seems appropriate to show off what the code actually creates. Here’s a very simple tab display created using bulletin board code (also referred to as bbcode).

    • You can insert any amount of information into the first tab and it will appear here. You can use bulleted lists inside of the tab and you can include multiple paragraphs here or just a sentence. There is no limit, minimum or maximum. You can also include spoilers inside of tabs.
    • Again, you can insert any amount of information in the second tab. Everything that applies to tab 1 also applies to tab 2.
    • You can add as many tabs as you need or would like to have.


    It’s super cool, isn’t it!? I personally find tabs to be a very useful tool when it comes to organizing request thread information. You can set up tabs so that something like this is created:

    • Insert information about yourself here and introduce yourself to prospective partners.
    • Here is a good place to put any rules you have for your prospective roleplaying partners. You can list how often you expect them to be able to reply, how long you expect posts to be and other details like that.
    • Here you could list all of the pairings you might be interested in writing with them.
    • You can have a tab for your plot ideas.
    • You can even have a tab available to include a list of all of your kinks and sexual preferences.


    At this point, I think I’ve demonstrated enough of what tabs are capable of. They’re not something anyone is required to use at all, although they can provide valuable organization to many different forms of information. Now, let’s get on to the basics of how to use them.

    Unfortunately, there is no button for tabs. To use them in a post, you have to use the bbcode in its raw form.

    [tabs]
    [tab=Insert the title of your first tab here]This is where the text that you want to put inside of your first tab should go. When you want to end a tab and start a new one or end them completely, you always want to close the tab like this: -> [/tab]
    [tab=Insert the title of your second tab here] <- This is what shows that you are starting a new tab. Please note that the text “insert the title of your second tab here” can be replaced with any title of your choosing. Generally, you want the title to be relevant to the information you are placing inside the tab. Then you close the second tab like so again… -> [/tab]
    [tab=Insert the title of your third tab here]You can keep opening and closing tabs until you have as many tabs as you need.[/tab]
    [/tabs] <- This closing tag here symbolizes that you are done with your set of tabs.

    Anything posted after [/tabs] will not appear in a tab but will appear beneath the whole tab display.

    Feel free to play around with tabs in this thread if you’d like to learn how to do them, and if you have any questions at all with how they work or how to use them, feel free to ask me or anyone else who seems to either know, or who seems to have gotten the hang of using them. They’re awesome and I hope some people come to enjoy them as much as I do! If there are questions, I’ll try to update this guide with some FAQs on tabs.

    ~ Lady Scarlet
     
    jato, Permafrost, Austin121 and 4 others like this.
  4. Nevermind

    Nevermind The Lost Paragon Administrator

    Messages:
    1,233
    Local Time:
    7:01 PM
    BBCode Update & Mini-Guide

    For all those roleplayers who enjoy making their Request Threads or other posts extra snazzy, I've been working on implementing a number of new bbcodes for the site. This little update will contain the description and instructions for four new codes I've added within the last couple months. How you choose to utilize these new codes is completely up to you!

    Click the tab to check out the code you're interested in!

    • Horizontal Line

      The horizontal line is an extremely simple code that creates a straight line directly across a post. This is an uncomplicated and clear way to separate information or create different "sections." It can also be utilized in RP posts when you'd like to separate paragraphs due to a time skip or perspective shift. The horizontal line looks like so:



      To use a horizontal line in your post, you simply copy and paste the following code:

      Code:
      [hr][/hr]
    • Text Highlight

      Text Highlight offers you a different way to draw a reader's eye to a specific line of text. While you can simply change the font color in order to do this, this can be a fun and alternative way to get your point across!

      If you want your text to look like this, there are a few things you're going to need.

      - The HEX color value you'd like for the background.
      - The HEX color value you'd like for the font color. ***Note: RGB color values will also work for these bbcodes, but for the sake of simplicity we're going to use HEX.***

      1. Write out whatever bit of text you're going to highlight.
      2. Find the color you want to use for the background. (If you type "hex color picker" into Google, it will generate an excellent color grid that allows you to pick virtually any color and will give you both the HEX and RGB values.)
      3. Use the following code (I will be using my above example for this).

      Code:
      [bcolor=#7362a2]If you want your text to look like this, there are a few things you're going to need.[/bcolor]

      Something to keep in mind for this code: Different Black Dahlia themes use different default font colors. This means that while on your theme, the font looks black with a purple background, on someone else's theme the font could be white with a purple background. This can make it difficult to read depending on what highlight color you choose. To fix this issue, I would recommend always setting your font color so that it looks the same no matter what theme it's on. I'm going to set the font to black because it shows up better on the light purple background.

      Code:
      [bcolor=#7362a2][color=#000000]If you want your text to look like this, there are a few things you're going to need.[/color][/bcolor]

      Remember: "bcolor" refers to the background color, i.e. the color you use for the highlight, while "color" refers to the font color!
    • Float Left / Right

      The Float code is absolutely fantastic if want to set images or a block of text off to the side and have the rest of your post wrap around it. While there are buttons on your editor that will generate the code for you, this little guide will help you understand how to do it yourself.

      [​IMG] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.


      To set an image to the side:

      Code:
      [float_left][img]INSERT DIRECT IMAGE URL[/img][/float_left]Here is where you would begin writing whatever text you wanted to wrap.
      To float an image or text block to the right, you would simply change "left" to "right" in the code.
    • Creating an Anchor

      An anchor is an extremely useful code that allows you to create a link to a specific point in a single post. This is wonderful if you'd like to give readers the option of jumping to different areas of an RT instead of making them scroll for ages!

      There are a few steps needed to create a successful anchor. The first step is to decide where to place your anchor, i.e. where you want to direct readers.

      Let's say you want to direct your readers to a particular sentence. You will place an anchor at the beginning of the sentence and give your anchor an easy-to-remember title, like so:

      Code:
      [anchor]TITLE[/anchor]Here is where you'd begin writing whatever you're directing your readers to.
      Now that you have your anchor set, you need to create an anchor link. This is the link that users can clink on to jump straight to your anchor. As you'll recall, I named my anchor "TITLE". Therefore, my anchor link look will look like this:

      Code:
      [anchor=#TITLE]Click here to jump to x, y, & z![/anchor]
      To see this code in action, click here and it will direct you back to the top of this post!


    If you have any questions about any of the codes in this little mini-guide, feel free to send a PM to @Nevermind or post your questions in the Questions & Suggestions forum.

    Have fun experimenting with your new coding options, kids!
     

Share This Page