BBC Code Quick List

(This is a thread from Mizahar's fantasy role play forums. Why don't you register today? This message is not shown when you are logged in. Come roleplay with us, it's fun!)

Here's the place to find information on 'How do I do that?' when it comes to creating avatars, signatures, or even working with the bbc code. There are help files for codework for both the main board forums and the lore sections. There are threads advertising players that are willing to create signatures for other players. Please feel free to discuss technical issues, photo cropping, suggest new bbc code, or get help from players and admins on things you want to do. This forum includes posts, wiki technical aid, avatar art, character sheet art, signature work, and all things visual when it comes to Mizahar.

BBC Code Quick List

Postby Gossamer on June 7th, 2009, 3:46 am

The following is a list of available BBC code for Mizahar complete with examples. We anticipate this list will continue to grow, so keep checking back as the Founders will update it as new code is written and implemented. Remember, to use the code, replace the vulture wing brackets { and } with solid brackets [ and ]. There are quick 'code' buttons at the top of each reply box for some of these BBC codes so you don't have to type them out completely, just highlight the item you want the BBC code to affect and hit the corresponding button.

Text Code


Bold

{b} and {/b}
Usage: This {b}bolds{/b} your text. ---> This bolds your text.

Italics

{i} and {/}
Usage: This {i}italicizes{i} your text. ---> This italicizes your text.

Underline

{u} and {/u}
Usage: This {u}underlines{/u} your text. ---> This underlines your text.

Left Aligned Text

{left} and {/left}
Usage: {left}This text is left-aligned{/left} -->
This text is left-aligned


Right Aligned Text

{right} and {/right}
{right}This text is right-aligned{/right}-->
This text is right-aligned


Center Aligned Text

{center} and {/center}
Usage: {center}Lets you center text or an image in the exact middle of your post. {/center} --->
Lets you center text or an image in the exact middle of your post.


Shadowed Text

{shadow} and {/shadow}

--->Usage

Code: Select all
[shadow=white]This is shadowed text![/shadow]


This is shadowed text!

But you can get more control with "shadow2". It's a bit more tricky as it gets four parameters. Color, as before, then three numbers: offsetX and offsetY, which tell the code to place the shadow so many pixels to the right and bottom of the text, and blur radius. The higher blur is, the more blurry your shadow is. 0 is the minimum and renders a shadow that's just as sharp as the text.

Code: Select all
[shadow2=white,0,0,3]Center the shadow on the text and you can achieve glow effects![/shadow2]


Center the shadow on the text and you can achieve glow effects!

Font

{font=fontype} and {/font}
Usage: This lets you change {font=Palatino}font types{/font} in text. ---> This lets you change the font types in text.
All the standard font types work.

Google font

{googlefont=fontype} and {/googlefont}
Google maintains a growing list of embeddable fonts that can be viewed here. Once you use googlefont everyone with a modern browser will see the font even if they don't have it installed on their computer. Simply pick your font and use its name in the command.

Webfont

{webfont=fontype} and {/webfont}

Usage: This lets you display a font that Mizahar has loaded onto its site in your posts so you don't have to use 'websafe' fonts that the font option lets you use. If you use 'font' and the viewer does not have that specific font loaded into their computer, they will see a standard game font rather than your fancy work. That's where webfonts comes in. Note that these are .ttf fonts and won't work in Internet Explorer 8 and older. Requests for free-use non-licensed fonts to be added can be made via the help desk.

Complete List of Webfonts Available

Indent

{indent} and {/indent}
Usage: {indent}Though impossible to tell with such a short paragraph, this function will indent a paragraph on both sides.{/indent} --->
Though impossible to tell with such a short paragraph, this function will neatly indent text on both sides.


Color

{color} and {/color}
Usage: Her lips were blood {color=red}red{/color]. ---> Her lips were blood red.

Strikeout

{del} and {/del}
Usage: Lets you {del}strikeout{/del} or {del}delete{/del} text with a line through it. ---> Lets you strikeout or delete text with a line through it.

Spoilers

{spoiler}text{/spoiler} and {spoiler=text}text{/spoiler}
Usage: {spoiler}This is a secret. --->
Secret :
This is a secret.
or {spoiler=NPC Info}Herein lies the information on the NPC.{/spoiler} --->
NPC Info :
Herein lies the information on the NPC.


Flash

{flash} and {/flash}
Usage: {flash}http://www.mizahar.com{/flash} --->


Quotes

{quote} and {/quote}
Usage: {quote}Hi! How are you!{/quote} --->
HI! How are you?


Scrollover

{ooc=OOC} and {/ooc}
Usage: {ooc=OOC INFO}Here's the OOC info you need.{/ooc}

Example ScrolloverMizahar's scrollover allows you to even import images into this scrollover or entirely new pages.


Coumns

{columns=X} and {/columns}

Usage: {columns=X}Text in X columns {/columns}

It is especially useful for displaying long lists, for example in a CS. X of course equals the number of columns.

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item


Frames

{frame=Color} and {/frame}
Usage: {frame=Black} text of this post {/frame}
See the entire text of this post for an example.
You can change color either using the proper color title like 'black' or by using the format #000000. No ' markings are needed.

Frames Within Frames

{frame2} and {/frame2}
Usage: {frame2=#FFBF80}Frame Inside a Frame{/frame2}
Frame Inside a Frame (you can add texts, pictures, etc)


Pictures As Frames

{framepic} and {/framepic}
Usage: {framepic=URL of Image}Text Within Frame{/framepic}
(Here's a pic as a frame background!)



Transparent Frames

{frametrans=color,number} and {/frametrans}
Usege: This allows you to place a frame within a frame that has a level of transparency to it. This is idea for layering with framepic. COLOR is a color, like black or #000000, and NUMBER is a number 1-9, with 1 being 10% opacity and 9 being 90%. Imagine how nice these will look over pictures verses just the flat boring black.

This is frame trans 1!


This is frame trans 2!


This is frame trans 3!


This is frame trans 4!


This is frame trans 5!


This is frame trans 6!


This is frame trans 7!


This is frame trans 8!


This is frame trans 9!



Boxes
{box=width in pixiles, background color, border color and text color} and {/box}
Usage: Lets you create a fixed box with specified width, background color, border color and text color.

Example Produces:

{box=400,black,green,#2244CC}Normally these things are a whole lot bigger in terms of boxes. You can put whole posts, add images in, etc.{/box}


Normally these things are a whole lot bigger in terms of boxes. You can put whole posts, add images in, etc.


Wiki

{wiki} and {/wiki}
Usage: Lets you link something like NPC {wiki}Kova{/wiki} directly to the wiki page devoted to her. ---> Lets you link something like the NPC Kova directly to the wiki page devoted to her.

Tables


Adding Simple Tables

{table} and {/table}
Usage: {table}{u}Tables{/u} are | implemented and | we are probably
the first phpBB | site to have tables | with simple syntax
as this stuff | was nowhere on the net. | I'm afraid
it will have | to be centered on | the page, though.{/table}

-->

Tables are implemented and we are probably
the first phpBB site to have tables with simple syntax
as this stuff was nowhere on the net. I'm afraid
it will have to be centered on the page, though.



Adding Colored Tables

Usage: {table2=backgroundcolor,bordercolor} and {/table2}

So,

{table2=#336699,#223322} aaa | bbb | ccc
ddd | eee | fff{/table2}

--->

aaa bbb ccc
ddd eee fff



Tabs


{tabset} {tab} and {/tabset} {/tab}

Usage: {tabset=200}{tab=First tab,#000044,white}Contents of first tab{/tab} {tab=Second tab,#003377,white}Contents of second tab{/tab}{/tabset}

--->

 
First tab
Contents of first tab
 
Second tab
Contents of second tab


Images

Adding Images

{img} and {/img}
Usage: {img}http://i464.photobucket.com/albums/rr8/Centaurheart/becky.jpg{/img}---> Image
This allows you to add an image anywhere in a post. Feel free to cage the image with other BBC code like center.

Floating Images

{img2=left} and {/img} or {img2=right} and {/img2}

Image
Usage: {img2=left}]http://i464.photobucket.com/albums/rr8/Centaurheart/becky.jpg{/img} --->
This floats an image at one side of a page or another and allows you to place text beside the image. If you use the word left it floats the image left. If you use the word right, it floats the image on the right.


Links


Inserting Links

{url} and {/url} or {url=Option} and {/url}

Usage: {url}http://www.mizahar.com{/url} --->http://www.mizahar.com
or
{url=http://www.mizahar.com}Mizahar{/url}--->Mizahar


Inserting Music/MP3s

{mp3}Link to music hosting site like fileden.com or filefreak.com{/mp3}



Video

{youtube}video code here{/youtube} ---->

In this case, the link is to Rascal Flatt's song Stand. The URL is http://www.youtube.com/watch?v=-N0yB24M7VM, but you only add the -N0yB24M7VM between the tags (whatever's after the v='s).



Lists


{list} and {/list} or {list=1} and {/list}

Usage:
{list}
{*}Item 1
{*}Item 2
{/list} -->
  • Item 1
  • Item 2
or

{list=1}
{*}Item 1
{*}Item 2
{/list} -->
  1. list item 1
  2. list item 2


Code


{code} and {/code}
Usage: {code}
<script type="text/javascript">
<!--
alert("This too shall pass!");
//-->
</script>
{/code} --->
Code: Select all
<script type="text/javascript">
<!--
    alert("This too shall pass!");
//-->
</script>

The best and most applicable form of 'code' in Mizahar is to copy an 'example' page into 'code' and display it for the ease of cutting and pasting that sample page "ie a char sheet' or say a location template into a new post. See the stickies in Character Toolbox/Character Sheets for more details.
Image
"There's a place that I go that nobody knows where the rivers flow.
And I call it home. And there's no more lies. And the darkness is light. And nobody cries. There's only butterflies."


BBC CodeHelp DeskStarting GuideRiverfallSyka
Special ProjectsCyphrus Coordination
User avatar
Gossamer
Words reveal soul.
 
Posts: 18388
Words: 4800382
Joined roleplay: March 23rd, 2009, 4:40 pm
Location: Cyphrus RS & Founder
Blog: View Blog (24)
Race: Staff account
Office
Scrapbook
Plotnotes
Medals: 9
Featured Thread (1) Artist (1)
Trailblazer (1) One Thousand Posts! (1)
Hyperposter (1) One Million Words! (1)
Extreme Scrapbooker (1) Power Fork (1)
Thunderspork (1)

Re: BBC Code for Mizahar

Postby Tarot on November 21st, 2010, 4:58 pm

The style bbcode is the most powerful tool for customizing your posts. It will give you the full power of Cascading Style Sheets (CSS), creating a box with the style specifications that you provide as a parameter. Here are a few examples, but feel free to google CSS for extensive tutorials on all available style options. All style specifications are expressed as "parameter:value;" . Also remember that, due to a technical limitation in phpBB, it is not currently possible to nest two style bbcodes (or any two bbcodes of the same type).

Code: Select all
[style=width:500px; padding:5px; border:1px solid #335577; background-color: #443322; margin:auto;]Use margin:auto to center the box, in combination with the width parameter (500 pixels in this case)...[/style]

Use margin:auto to center the box, in combination with the width parameter (500 pixels in this case)...


Code: Select all
[style=padding:5px; border:1px solid #335577; background-color: #443322; margin-left:50px; margin-right:50px]... or leave 50 pixels to either side by omitting width and setting margin, like this...[/style]

... or leave 50 pixels to either side by omitting width and setting margin, like this...


Code: Select all
[style=width:300px; padding:5px; border:1px solid #335577; background-color: #443322; float:right;]... You can make it float to the left or right too, with the float command. External text will flow side-by-side with the box.[/style]

... You can make it float to the left or right too, with the float command. External text will flow side-by-side with the box.
Text does indeed flow as expected!




Code: Select all
[style=width:280px; height:424px; padding:10px; color:#000000; background-image:url(http://mizahar.com/forums/gallery/pic.php?mode=large&pic_id=2); background-repeat:no-repeat;]This is a background image. Just upload your pic anywhere and use its URL![/style]

This is a background image. Just upload your pic anywhere and use its URL!


Code: Select all
[style=width:500px; padding:5px; border: 1px dashed blue; background-color: black; margin:auto; font-family:Palatino; font-variant:small-caps;]You can do all kinds of things with CSS... feel free to read up on it. Moreover, these styles can be used in the wiki as well. :)[/style]

You can do all kinds of things with CSS... feel free to read up on it. Moreover, these styles can be used in the wiki as well. :)
Tarot's thread tickets: sold out. Not accepting any more threads for the time being unless I promised you one. Sorry for the inconvenience!
User avatar
Tarot
May you live in interesting times
 
Posts: 2238
Words: 766645
Joined roleplay: March 23rd, 2009, 4:29 pm
Location: Moderation abilities game-wide
Blog: View Blog (11)
Race: Staff account
Office
Scrapbook
Plotnotes
Medals: 5
Featured Thread (1) One Thousand Posts! (1)
Extreme Scrapbooker (1) Being Tarot Award (1)
O RLY Decoration (1)


Who is online

Users browsing this forum: No registered users and 1 guest