1. Amor has finally locked the doors as per the very sad [Closing Announcement]. You should still be able to read threads and conversations (just in case you are late to getting things saved) up until AUGUST 1st. All subscriptions have also been cancelled so no one is donation billed for a dead site!

RESOURCE HELP BB Code for Beginners

Discussion in 'Inspiration' started by Pahn, Dec 29, 2016.

  1. [​IMG]

    If anyone does like me and prefer to manually input bbcode rather than use the Rich Text Editor (with the option “Use BB Code Editor”), you’ll find that some codes are just weird or not working like you think they should. Here I’ll be posting for mostly my own benefit the codes I use so that I don’t have to rely on external resources! :D

    Source: Iwaku's BB Code Help page.

    Don’t hesitate to ask any questions, but I’m far from being a BB coding pro.

    This is still a WiP so Diana can add the missing codes!

    *For FONTS, you can check out my testing post right here!

    Codes:

    This is [B]bold[/B] text.
    This is [I]italic[/I] text.
    This is [U]underlined[/U] text.
    This is [S]struck-through[/S] text.
    [du]Double underlined![/du]

    Results:

    This is bold text.
    This is italic text.
    This is underlined text.
    This is struck-through text.
    Double underlined!

    Codes:

    This is [COLOR=red]red[/COLOR] and [COLOR=#0000cc]blue[/COLOR] text.
    This is [FONT=Courier New]Courier New[/FONT] text.
    This is [SIZE=1]small[/SIZE] and [SIZE=7]big[/SIZE] text.

    Results:

    This is red and blue text.
    This is Courier New text.
    This is small and big text.


    Codes:

    [URL]http://www.example.com[/URL]
    [EMAIL]example@example.com[/EMAIL]

    Results:

    http://www.example.com
    example@example.com

    Advanced

    Codes:

    [URL=http://www.example.com]Go to example.com[/URL]
    [EMAIL=example@example.com]Email me[/EMAIL]

    Results:

    Go to example.com
    Email me

    If you want to add a colour or any other code to your link, make sure to do it as follows:

    [url=http://www.testing.com][color=#f00][b][size=5]Test me![/size][/b][/color][/url]

    Basically just put the codes AFTER the URL code.

    Results:

    Test me!

    Codes:

    [LIST]
    [*]Bullet 1
    [*]Bullet 2
    [/LIST]
    [LIST=1]
    [*]Entry 1
    [*]Entry 2
    [/LIST]

    Results:

    • Bullet 1
    • Bullet 2
    1. Entry 1
    2. Entry 2

    Codes:

    [LEFT]Left-aligned[/LEFT]
    [CENTER]Center-aligned[/CENTER]
    [RIGHT]Right-aligned[/RIGHT]

    Results:
    Left-aligned​
    Center-aligned​
    Right-aligned​

    Codes:


    [tabs]
    [tab=Title 1]Content 1[/tab]
    [tab=Title 2]Content 2[/tab]
    [/tabs]

    Results:
    • Content 1
    • Content 2


    Accordion works a bit like tabs, with a master code and slave codes.

    Codes:

    [accordion=bcenter|125]
    {slide=Title|center}Content{/slide}
    {slide=Title|center}Content{/slide}
    [/accordion]

    [accordion]
    {slide=Title|center}Content{/slide}
    {slide=Title|right|open}Content{/slide}
    [/accordion]

    Results:

    Title
    Content
    Title
    Content


    Title
    Content
    Title
    Content


    Codes:

    [bg=#404040]This sentence has a background.[/bg]

    Results:

    This sentence has a background.


    Codes:

    [bimg]http://www.google.com/images/srpr/logo3w.png[/bimg]
    [bimg=100]http://www.google.com/images/srpr/logo3w.png[/bimg]

    Results:




    Dashed Border - Wraps content in a dashed outline. You can use hexcodes instead of colour names.

    Codes:

    [dash]This text is in a dash border.[/dash]
    [dash=red]This text is in a red dash border.[/dash]

    Results:

    This text is in a dash border.

    This text is in a red dash border.


    Dotted Border - Places a dotted border around content. You can use hexcodes instead of colour names.

    Codes:

    [dotted] This text is in a dotted border. [/dotted]
    [dotted="red"] This text is in a red dotted border. [/dotted]

    Results:

    This text is in a dotted border.

    This text is in a red dotted border.


    Solid Border - Creates a solid border around content.

    Codes:

    [solid]This text is in a Solid border.[/solid]
    [solid=red]This text is in a red Solid border.[/solid]

    Results:

    This text is in a Solid border.

    This text is in a red Solid border.


    Div Scroll - Lots and lots of scrolling text.

    Codes:

    [dscroll="50px"]This text should be scrolling. You can really have a lot! This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. This text should be scrolling. You can really have a lot! This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. [/dscroll]

    Results:

    This text should be scrolling. You can really have a lot! This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. This text should be scrolling. You can really have a lot! This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling. You can really have a lot!This text should be scrolling.



    [BBM] ENCADRE - This BB Code inserts a text box to the right of a text (absolute position). It has to be inserted just before the content. (width customizable in %)

    Codes:

    [encadre]This is a text box with a long text. Can be used with an article for example.[/encadre]Content
    [encadre=30]This is a text box with a long text. Can be used with an article for example.[/encadre]Content

    Results:

    Text box:
    This is a text box with a long text. Can be used with an article for example.
    Content
    Text box:
    This is a text box with a long text. Can be used with an article for example.
    Content







    Colored Fieldset Box- This will create a fieldset with color and style options. For the pink box, you will need a border radius number for the font to work!

    Codes:

    [fieldbox="Title, red, solid"]Yay text![/fieldbox]
    [fieldbox="Title, blue, dotted"]Yay text![/fieldbox]
    [fieldbox="Title, goldenrod, dashed, 10"]Yay text![/fieldbox]
    [fieldbox="Title, hotpink, dashed, 10, Tahoma"]This includes a 10 border radius and the title font changed.[/fieldbox]

    Results:

    TitleYay text!

    TitleYay text!

    TitleYay text!

    TitleThis includes a 10 border radius and the title font changed.


    [BBM] FIELDSET - This BB Code inserts a fieldset (Title and Width in % customizable ; separator: |)

    Codes:

    [fieldset]This is a fieldset[/fieldset]
    [fieldset=Title]This is a fieldset[/fieldset]
    [fieldset=Title|80]This is a fieldset[/fieldset]

    Results:

    Fieldset This is a fieldset

    Title This is a fieldset

    Title This is a fieldset



    Fancy glowing text!

    Codes:
    [glow]GLOWING![/glow]

    Results:
    GLOWING!


    Fancier SHADOW text!

    Codes:
    [shadow]This sentence has a shadow! Isn't it cool?[/shadow]

    Results:

    This sentence has a shadow! Isn't it cool?


    Padding creates space around text.

    Codes:
    [padding= 10px]Can't couch this. It's got padding.[/padding]

    Results:

    Can't couch this. It's got padding.



    Overline adds a line over the text.
    Codes:
    [o]I have a roof![/o]

    Results:

    I have a roof!


    Forum Styled Header - A special header using the forum's style.

    Codes:

    [hdor]content[/hdor]

    Results:

    content


    Forum Styled Header 2 - A special header using the forum's style.

    Codes:

    [hsub]content[/hsub]

    Results:

    content




    Horizontal rule - A horizontal line.

    Codes:

    [hr]line[/hr]
    [hr="border: 2px dashed red;"]Coloured line[/hr]

    Results:






    Image Align - Aligns an image with text.

    Codes:

    [imga=right] https://www.ashmoonowl.com/images/amor.png[/imga] This image is aligned perfectly to the right of the text! Yay image being aligned! This image is aligned perfectly to the right of the text! Yay image being aligned! This image is aligned perfectly to the right of the text! Yay image being aligned! This image is aligned perfectly to the right of the text!

    Results:
    This image is aligned perfectly to the right of the text! Yay image being aligned! This image is aligned perfectly to the right of the text! Yay image being aligned! This image is aligned perfectly to the right of the text! Yay image being aligned! This image is aligned perfectly to the right of the text!


    Codes:

    [info=blue]information here[/info]

    Results:

    [info=blue]information here[/info]

    Codes:

    [question=goldenrod]Text test text.[/question]



    Results:
    [question=goldenrod]Text test text.[/question]


    Codes:

    [roleplay=green]example[/roleplay]

    Results:

    [roleplay=green]example[/roleplay]


    Codes:

    [warning=red]A WARNING TO PLAYERS! AAAH![/warning]

    Results:

    [warning=red]A WARNING TO PLAYERS! AAAH![/warning]



    TABLES
    Please note I only copy-pasted directly from Iwaku’s BB code page. The quotation marks are NOT NECESSARY!! They will fuck up your code because they’re not regular quotes like this “.

    Table - Creates the outer shell of a table.

    Codes:

    [table="border: 1px solid red;"][tr][td="border: 1px solid blue;"]Blah[/td][td="border: 0px;"]Blah2[/td][td="border: 0px;"]Blah3[/td][/tr][/table]

    Results:

    [table=border: 1px solid red][tr][td=border: 1px solid blue]Blah[/td][td=border: 0px]Blah2[/td][td=border: 0px]Blah3[/td][/tr][/table]


    Table Cell - Creates a cell in a table.

    Codes:

    [table][tr][td="border: 1px solid blue;"]Blue Cell 1[/td][td="border: 1px solid green;"]Green Cell 2[/td][td="border: 1px solid red;"]Red Cell 3[/td][/tr][/table]

    Results:

    [table][tr][td="border: 1px solid blue;"]Blue Cell 1[/td][td="border: 1px solid green;"]Green Cell 2[/td][td="border: 1px solid red;"]Red Cell 3[/td][/tr][/table]


    Table Row - Creates a row of cells in a table.

    Codes:

    [table="border 0px;"][tr][td="border: 1px solid blue;"]Blue Row 1[/td][/tr][tr][td="border: 0px;"]No border row 2[/td][/tr][tr][td="border: 1px dashed red;"]Dashed red row 3[/td][/tr][/table]

    Results:

    [table="border 0px;"][tr][td="border: 1px solid blue;"]Blue Row 1[/td][/tr][tr][td="border: 0px;"]No border row 2[/td][/tr][tr][td="border: 1px dashed red;"]Dashed red row 3[/td][/tr][/table]



    SPOILERS/HIDERS

    Codes:

    [spoilerbb]hidden text[/spoilerbb]

    Results:

    Spoiler
    hidden text



    Codes:

    [spoiler]I just spoiled your mind.[/spoiler]
    [spoiler=Title]I just spoiled your mind.[/spoiler]

    Results:

    Show Spoiler
    I just spoiled your mind.

    Title (open)
    I just spoiled your mind.



    Codes:

    [spoili]Hidden text[/spoili]

    Results:

    [spoili]Hidden text[/spoili]


    Fancy tabs ooohh

    Codes:

    [tabs]
    [tab=Test 1]
    We will begin here.
    [/tab]
    [tab=Test 2]
    And hopefully continue here o_o
    [/tab][/tabs]

    Results:


    • We will begin here.

    • And hopefully continue here o_o
     
    #1 Pahn, Dec 29, 2016
    Last edited: Apr 18, 2017
    • Thank You Thank You x 12
    • Useful Useful x 5
    • I Like This I Like This x 2
    • I Love This I Love This x 2
  2. If you want to resize an image without going through an alternate site, make sure your image is an URL that works (so it ends in .jpg or .png) and this is a working code:



    [div=
    background: url(http://www.planwallpaper.com/static/images/1926935_55L0dcb.jpg) no-repeat;
    background-size: 50% 50%;
    width: 488px;
    height: 305px;] [/div]


    Without the numbers/url:

    [div=
    background: url(URL HERE) no-repeat;
    background-size: [WIDTH VALUE]% [HEIGHT VALUE]%;
    width: [DESIRED SIZE]px;
    height: [DESIRED SIZE]px;] [/div]


    The VALUE% will set it to take the value of the number you put for the sizes on the next two lines. So for my example, it takes 50% of the 488px and then 50% of the 305px.

    I think that's it 8D



    Here is the result:

     
    • Thank You Thank You x 7
    • I Love This I Love This x 1
    • Useful Useful x 1