[BBCode] Code Snippets
#1
Here are some BBCodes for y'all that works with our forum (as of this post xD). Figured I'd compile them here since the board only provides the basics in the toolbar.

General Notes:
  • Div codes cannot be used within another Div. Likewise, Spans cannot be used within another Span. You can however, put Spans within Divs and vise-versa.

  • When using Spans, you must include "display:block;" within the code if you have more than 1 line of text being effected (in other words, paragraphs, lists, etc.). If you don't include this, the code will only effect the first line of text, and nothing else.

  • If it is something you can put into CSS style code, you can generally put it in Divs/Spans. Margins? Borders? Backgrounds? Colored font? Different size font? Different line height? Opacity? You can do all of that and more, HOWEVER, not everything works, so, you have to play with it!



  • Text Sizing (BBCode Shortcut):
    x-large
    large
    regular size with no code
    small
    x-small
    Code:
    [size=x-large]x-large[/size]
    [size=large]large[/size]
    [size=small]small[/size]
    [size=x-small]x-small[/size]

  • Text Sizing (Div or Span):
    Size 20px font.
    Code:
    DIV CODE:
    [div=font-size:20px;]Size 20px font.[/div]

    SPAN CODE:
    [span=font-size:20px;]Size 20px font.[/span]

  • Image Sizing:
    Have an image that is 1400px by 1200px that you need to make smaller? Have an image that is 20px by 50px that you want to make larger? Use "smimg" to resize the image by pixel width (there is no way to adjust by height). The forum will auto-scale the image for you. In the code provided below, the image will be resized to be 600px wide.

    NOTE: Since "smimg" code auto-generates a URL link to the full-sized image, you cannot use url + smimg codes together. You would need to manually resize the image to the desired size and make use of url + img codes together instead.
    Code:
    [smimg=600]IMG URL[/smimg]

  • Hovertext:
    This is an example!
    Code:
    [hovertext=what you want the hover text to be in here]displayed text here![/hovertext][/hovertext]

  • Hovertext (on images): Alternate coding to do hovertext on images in one code vs. doing hovertext + img/smimg codes.
    Code:
    [imgtitle=what you want the hover text to be in here]IMG URL[/imgtitle]

  • Horizontal Rule:
    It is literally, just a line. Text of things above HR.

    Text of things below an HR. You cannot specify how the HR looks with BBCode. The style (dashed, solid, dotted, etc.) is decided by the forum's default for HR's.
    Code:
    Text above the HR, if you want any.
    [hr]
    Text below the HR, if you want any.

  • Padding (Div or Span):
    Padded text using code here. Different ways to pad:
    • padding:10px; --> code will put 10px of padding all the way around whatever is in the div code.
    • padding:10px 5px; --> code will put 10px of padding on the top and bottom, and will put 5px of padding on the left and right of the div code.
    • padding:10px 5px 15px 20px; --> code will put 10px padding on top, 5px of padding on the right, 15px of padding on the bottom, and 20px of padding on the left of the div code.
    • padding-top:10px; --> code will put 10px of padding on top of the div code. Use -left, -right, -bottom to specify the other sides. Note: if you want only the top and left side to have specific padding, you must do separate codes. Example: "padding-top:10px; padding-left:20px;"
    Code:
    DIV CODE:
    [div=padding:10px;]Padded text using code here[/div]

    SPAN CODE:
    [span=display:block;padding:10px;]Padded text using code here.[/span]

  • Short/Partial URL:
    Are you linking to another thread on the forum but don't want to use the entire URL because it makes your code super long? Use this! Note: you have to "cut" the code after a: /
    Code:
    [surl=shortened URL; works only with 'SOULS FORUM URLs]hyperlinked text[/surl]

  • Pack Colors:
    Code:
    [spanc=lowercase of pack's initials]TEXT[/spanc]

  • Float Images (BBCode Shortcut):
    Code:
    [floatright][img]IMG URL[/img][/floatright]
    Text here

  • Float Images (Span):
    Code:
    [span=display:block; float:right;][img]IMG URL[/img][/span]
    Text here

  • Clear Both:
    Do you have floating images that are bleeding/overflowing into your signature or otherwise bleeding over into places you don't want? Use this clear code to force a break between them!



    Code:
    [div=clear:both;][/div]

  • Show/Hide:

    Code:
    [showhide=unique-hide-title](Show more!)[/showhide]
    [divhide=unique-hide-title]
    Hello, I'm hidden stuff here.
    [/divhide]

  Reply


Messages In This Thread
[BBCode] Code Snippets - by Songbird - 21 November 2020, 02:03 PM

Forum Jump: