It is currently Fri Apr 28, 2017 1:20 am



Reply to topic  [ 73 posts ]  Go to page 1, 2, 3, 4  Next
»»»» ß ß C ø ∂ ι η ġ ąη∂ yøů - A Guide 
Author Message
Member
User avatar

Joined: Sat Nov 13, 2010 11:50 am
Posts: 1015
B B C o d i n g A n d Y o u

              ●●BBcoding doesn't have to be as daunting as you think. Once you get the hang of it, you can make beautiful posts full of colors, images, and links.

              ●●Before we get started, here are some useful links that you may want to visit.
                  [Photobucket] An image hosting website.
                  [Cloford Colors] You can find more colors here to use in your threads.
                  [Pixie] Can't find the color you want? You can download the Pixie for free and copy the exact color you want for your threads.
                  [Bit] A URL shortener.
                  [Color Scheme Designer] You can make a color palette to fit your favorite colors for your posts, ect.
                  [HTML to BBCoding Converter] Converts HTML to BBCoding for you if all you know HTML better than BBC.
                  [Alt-key Combos] For your accents on letters.
                  [Colorzilla] An add-on to Mozilla that helps you find colors like Pixie.

              ●●Also, thank you to:
                  xxKarachan for helping out with font sizes and how they work.
                  stygian_ice for giving us the link to a HTML to BBC converter.
                  Cykotyks for the quote on tags within tags.
                  kawatan for the link to the alt character key combos.
                  Emberlynn for the link to Colorzilla.


Last edited by Pandan-chan on Mon Apr 09, 2012 6:49 pm, edited 13 times in total.



Sun Feb 20, 2011 6:26 pm
Profile
Member
User avatar

Joined: Sat Nov 13, 2010 11:50 am
Posts: 1015
B B C o d i n g

              ●●BBCoding is always inside brackets or "[]." To end a BBCode command, you insert a slash or "/." For example:
              Code:
              [b]Hello.[/b]there.

              Hello there.
              That allowed only the "Hello." to be bolded while the "there" is left unbolded. You must always close the brackets otherwise the BBCode will be "broken" and will not complete the command. To beautify a post, you can use a combination of all of these codes. You just need to remember to end commands if you begin them.

              Also, another thing to keep in mind is that: "BBCode tags must be closed in a particular order, unlike HTML which can be closed whenever, if at all. If you start [Tag 2] within [Tag 1], [Tag 2] must be closed before [Tag 1] can be, or else the codes break." Quoted from Cykotyks.

              ●●Next, here are some codes that you will find useful to know and use.
                  Bold, italicize, underline, strike.
                  Code:
                  [b]Bold[/b], [i]italicize[/i], [u]underline[/u], [strike]strike[/strike].

                  Quote, code, and spoiler. Quote allows you put a post in a box. Code also allows you to do so, but it shows your BBCoding as well. Spoiler puts things in a box while hiding what is within.
                  Code:
                  [quote]Quote,[/quote] [code]code[/code], [spoiler]spoiler[/spoiler]

                  * To put multiple spoilers,place the number "2" after the word "spoiler" (you can do this multiple times) like so:
                  Code:
                  [spoiler][spoiler2]text here[/spoiler2][spoiler2]text here[/spoiler2][/spoiler]

                  List. List works like the "Tab" key on your keyboard. BBCoding will register how many times you "Enter" on your keyboard, but will not record a tab. The more lists you put in, the more tabbed over it will be. The amount of lists you enter equals the amount you must end the code with. For example, this part of this guide used 8 lists to get this far from the left side.
                  Code:
                  [list][list][list]List.[/list][/list][/list]

                  This also works with the second list button or list=. Except, you place a number or letter after the "=" to indicate what kind of list you want. Then, using the asterisk or "*," you don't need to type in numbers and enter. You can copy and paste for your desired length of list. For example:
                  1. blah
                  2. blah
                  3. blah

                  or

                  1. blah
                  2. blah
                  3. blah
                  Code:
                  [list=LETTER OR NUMBER HERE][*] blah[/list]

                  IMG or Images. You copy the URL of the image and past it inbetween the two IMGs. The URL has to end in a .png, .jpeg, .gif, ect. The URL can be found in your address bar or you can right click and select "Copy Image Location."
                  Code:
                  [img]IMAGE URL HERE[/img]

                  URL or Links. You can link a picture or actual text. There are three different methods.
                  The first method is just linking while showing the link URL at the same time. For example: http://vdexproject.net/user.php?user=14230
                  Code:
                  [url]URL HERE[/url]

                  The second method is linking text that you want to show rather than the URL. For example: [Pandan-chan]
                  Code:
                  [url=URL HERE]TEXT HERE[/url]

                  The third method is linking an actual image. For example:
                  Image
                  Code:
                  [url=URL HERE][img]IMAGE URL HERE[/img][/url]

                  Font size. Font size can be changed by either messing with numbers to get smaller or bigger text, or just choosing from the toolbar above the posting box. The numbers represent a percent of the standard size of text or 12pt font. So 92 would be 92% of 12pt font.
                  Code:
                  [size=92][/size]

                  Center, right. This deals with text alignment like a Word document. If you do not place any of these, the default is aligning the text left.
                  Code:
                  [center][/center] [right][/right]

                  Color is rendered through "Hex Codes." Hex Codes start with a "#" and have six numbers or letters after it. You can choose colors from the right side of the posting box or find some here. If you don't like hex codes, you can look in the next post for some quick colors.
                  Code:
                  [color=HEX CODE HERE][/color]



Last edited by Pandan-chan on Sun Mar 30, 2014 5:20 pm, edited 10 times in total.



Sun Feb 20, 2011 6:26 pm
Profile
Member
User avatar

Joined: Sat Nov 13, 2010 11:50 am
Posts: 1015
R e s o u r c e s


              ●●Ever wonder how people put symbols in their titles or posts? They use "Alt Characters." You can copy and paste these symbols into posts, titles, and signatures. If you can't see these characters, you can go to your control panel to change it so that you can see them. Below, I have listed some Alt characters that you can use.
                    L e t t e r s //
                          ą α ß β в Ь c Ð ם đ ∂ ε є э é Ғ ғ ╒ ƒ ġ Ħ ħ
                          н ι į ї J נ к k ℓ м η ø σ φ p q я ѓ § Ş ŝ τ † ů v ω x y z

                          Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ
                          ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ

                          ABCDEFGHIJKLMNOPQRSTUVWXYZ
                          abcdefghijklmnopqrstuvwxyz
                    N u m b e r s //
                          ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩
                          ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿
                    S y m b o l s //
                          ♪ ♫ ♬♭ ♮ ♯ ▃ ▄ ▅ ▆ ▇ █
                          ☽☾✗✘✓ ✔ ☐ ☑ ☒ ✕ ✖✚✪✣✤✥
                          ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹
                          ✸ ✷ ✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖
                          ☀ ☂ ☁ ❣ ✚ ✪ ✣ ✤ ✥ ✦ ❉ ❥ ❦ ❧
                          ❃ ❂ ❁ ❀ ✄ ☪ ➸ ♨ ☢ ☠ ☭ ♈ ☮ ☯
                          ♋ ☡ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭
                          ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟ ۩ ۞
                          ♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ✦✧✩✫✬✭✮✯✰ ☼ ❣
                          ♲ ♳ ♴ ♵ ♶ ♷ ♸ ♹ ♺ ♻ ♼ ♽♯♩♪♫♬♭
                          ☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷ ☚ ☛ ☜ ☝ ☞ ☟
                          ☿ ♀ ♁ ♂ ♃ ♄ ♅ ♆ ♇ ♈ ♉ ♊ ♌ ♍
                          △ ▲ ☆ ★ ◇ ◆ ■ □ ▽ ▼ ❤❥♎ ♏ ✐✌
                          ๑ # @ & * ¥ ☸ ☆ ★ ✪ ¤ ☼ ☀ ☽☾
                          ♡ ღ☻ ☺ ❂ ◕ ⊕ ☉ Θ o O ♋ ☯ ㊝ ⊙ ◎
                          ◑ ◐ ۰ • ● ▪ ▫ 。 ゚ ๑ ☜ ☞ ☂ ♨ ☎ ☏ ✍✡
                    E m o t i c o n s //
                          ಠ_ಠ ◕ ◡ ◕ °__° ಥ__ಥ
                          (-`ω´- ) (●ゝω)ノヽ(∀<●) >_<
                          ⊙▂⊙ ⊙o⊙ ⊙︿⊙  ⊙ω⊙ ⊙△⊙  ⊙▽⊙
                          (◡_◡) (◕-◕) (◕o◕) (∩_∩)
                          (⊙▂⊙✖ )(づ ̄ ³ ̄)づヾ(*⌒ヮ⌒*)ゞ
                          ( c//"-}{-*x) (-'๏_๏'-)
                          (◐ o ◑ ) (⊙...⊙ )。◕‿◕。 (屮ಥДಥ)屮
                          ๏[-ิ_•ิ]๏(•ิ_•ิ)? (•ิ_•ิ) (/•ิ_•ิ)/
                          (︶︹︺)(*-`ω´- )人(ц`ω´ц*)
                          (●ゝω)ノヽ(∀<●)(ㄒoㄒ)( >_< )
                          ⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙ ⊙▽⊙
                          o(‧'''‧)o (◡‿◡✿) (◕‿◕✿) (◕〝◕)
                          (∩_∩)ミ●﹏☉ミ (≧0≦) o(╥﹏╥)o
                    B r a c k e t s //
                          ❛❜❝❞【】〖〗►◄﹃﹄『』◢ ◣◥ ◤≪ ≫ ↖ ↗ ↘ ↙« » → ⇒

              ●●Instead of using hex codes, you can use these quick colors. All you have to do is type in the color's name (without capital letters nor spaces) in replacement for the hex code.

                    RED
                    IndianRed
                    LightCoral
                    Salmon
                    DarkSalmon
                    LightSalmon
                    Crimson
                    FireBrick
                    DarkRed


                    YELLOW

                    Gold
                    LightYellow
                    LemonChiffon
                    LightGoldenrodYellow
                    PapayaWhip
                    Moccasin
                    PeachPuff
                    PaleGoldenrod
                    Khaki
                    DarkKhaki


                    ORANGE
                    LightSalmon
                    Coral
                    Tomato
                    OrangeRed
                    DarkOrange


                    GREEN

                    GreenYellow
                    Chartreuse
                    LawnGreen
                    Lime
                    LimeGreen
                    PaleGreen
                    LightGreen
                    MediumSpringGreen
                    SpringGreen
                    MediumSeaGreen
                    SeaGreen
                    ForestGreen
                    DarkGreen
                    YellowGreen
                    OliveDrab
                    Olive
                    DarkOliveGreen
                    MediumAquamarine
                    DarkSeaGreen
                    LightSeaGreen
                    DarkCyan
                    Teal


                    BLUE

                    Aqua
                    Cyan
                    LightCyan
                    PaleTurquoise
                    Aquamarine
                    Turquoise
                    MediumTurquoise
                    DarkTurquoise
                    CadetBlue
                    SteelBlue
                    LightSteelBlue
                    PowderBlue
                    LightBlue
                    SkyBlue
                    LightSkyBlue
                    DeepSkyBlue
                    DodgerBlue
                    CornflowerBlue
                    MediumSlateBlue
                    RoyalBlue
                    MediumBlue
                    DarkBlue
                    Navy
                    MidnightBlue


                    PURPLE
                    Lavender
                    Thistle
                    Plum
                    Violet
                    Orchid
                    Fuchsia
                    Magenta
                    MediumOrchid
                    MediumPurple
                    BlueViolet
                    DarkViolet
                    DarkOrchid
                    DarkMagenta
                    Indigo
                    SlateBlue
                    DarkSlateBlue


                    PINK
                    LightPink
                    HotPink
                    DeepPink
                    MediumVioletRed
                    PaleVioletRed


                    WHITE

                    Snow
                    Honeydew
                    MintCream
                    Azure
                    AliceBlue
                    GhostWhite
                    WhiteSmoke
                    Seashell
                    Beige
                    OldLace
                    FloralWhite
                    Ivory
                    AntiqueWhite
                    Linen
                    LavenderBlush
                    MistyRose


                    GREY
                    Gainsboro
                    LightGrey
                    Silver
                    DarkGray
                    Gray
                    DimGray
                    LightSlateGray
                    SlateGray
                    DarkSlateGray
                    Black


                    BROWN

                    Cornsilk
                    BlanchedAlmond
                    Bisque
                    NavajoWhite
                    Wheat
                    BurlyWood
                    Tan
                    RosyBrown
                    SandyBrown
                    Goldenrod
                    DarkGoldenrod
                    Peru
                    Chocolate
                    SaddleBrown
                    Sienna
                    Brown
                    Maroon


Last edited by Pandan-chan on Fri Oct 07, 2011 1:11 pm, edited 6 times in total.



Sun Feb 20, 2011 6:27 pm
Profile
Member
User avatar

Joined: Sat Nov 13, 2010 11:50 am
Posts: 1015
O p e n !

_________________
Image
dratinis bb: //CODERS guide journal shop
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
Image
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃


Sun Feb 20, 2011 9:00 pm
Profile
Member
User avatar

Joined: Fri Dec 31, 2010 1:59 pm
Posts: 1078
This is awesome, thank you!

( First poster, woohoo~ )

_________________
Image

Please visit my DA!!!



Sun Feb 20, 2011 9:22 pm
Profile
Loner Princess
User avatar

Joined: Thu Aug 19, 2010 12:42 pm
Posts: 6836
Great guide~
Just a little note...
Perhaps it's worth mentioning that font size is a percent? iirc, at least.
For example, size95 is 95% of the standard size (12pt).
>> Just worth noting, since when I first came here I was all like "OKAY, SIZE=10 FONT GOOooooooh. Oh dear. That's tiny."

_________________
Image
.
* Buying Thread * Shop Thread *
* Special Nature Doc *


Mon Feb 21, 2011 9:24 am
Profile
Member
User avatar

Joined: Sat Nov 13, 2010 11:50 am
Posts: 1015
Thanks, Dragonmon!

Oh, thanks, Kara! I didn't notice that at all. When I first came on here, I thought, "Whoa, this is totally off from Gaia." I couldn't figure out why they used the numbers they did. Now I know~ Thanks again. :'D <3

_________________
Image
dratinis bb: //CODERS guide journal shop
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
Image
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃


Mon Feb 21, 2011 10:36 am
Profile
Member
User avatar

Joined: Sun Jul 25, 2010 5:14 pm
Posts: 3681
Location: Rainy Oregon
I dunno if you want to put this in the guide, but I found this site yesterday that converts HTML to BBC coding!

And the guide looks amazing, awesome work!

_________________
          Image
          Image
          Image


Mon Feb 21, 2011 11:09 am
Profile
Member
User avatar

Joined: Sat Nov 13, 2010 11:50 am
Posts: 1015
Oh, that looks cool. ( n u n )// I'll add it in the links in the first post.
Thanks, Stygian! <3

_________________
Image
dratinis bb: //CODERS guide journal shop
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
Image
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃


Mon Feb 21, 2011 11:13 am
Profile
Member
User avatar

Joined: Mon Aug 23, 2010 4:30 pm
Posts: 2564
Location: New England
It's also worth mentioning that BBCode tags must be closed in a particular order, unlike HTML which can be closed whenever, if at all. If you start [Tag 2] within [Tag 1], [Tag 2] must be closed before [Tag 1] can be, or else the codes break.

_________________
ImageImage

ImageImageImage

this twitter is not safe for anyone.
don't like my avatar? refresh the page :D
avatar credits and stuff can be found here


Mon Feb 21, 2011 12:22 pm
Profile WWW
Member
User avatar

Joined: Sat Nov 13, 2010 11:50 am
Posts: 1015
Oh, thank you, Cykotyks. I'll be sure to add that in as well. :3

_________________
Image
dratinis bb: //CODERS guide journal shop
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
Image
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃


Mon Feb 21, 2011 12:28 pm
Profile
Member
User avatar

Joined: Wed Jan 26, 2011 6:46 pm
Posts: 596
Location: Back and refreshing! :D
Wow.

I'm definitely remembering this for putting the angry eyebrows face on a post.

Thanks for making this!

_________________
Image

Shop ~ Auction ~ Buying

Image ~ Image
tumblr


Mon Feb 21, 2011 10:58 pm
Profile
Member
User avatar

Joined: Sat Nov 13, 2010 11:50 am
Posts: 1015
Haha, gotta love the emoticons~ ヾ(*⌒ヮ⌒*)ゞ
Thanks, Thiinka. <3

_________________
Image
dratinis bb: //CODERS guide journal shop
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
Image
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃


Mon Feb 21, 2011 11:06 pm
Profile
Member
User avatar

Joined: Wed Feb 02, 2011 1:53 pm
Posts: 287
While it doesn't include the fun characters that make those funky emoticons, if you actually need to use accent marks and diacritics on a regular basis and use a keyboard with a separate number pad, this site has a list of Alt-key combinations:

http://www.starr.net/is/type/altnum.htm

Great guide, and good luck!

_________________
Le coeur a ses raisons, que la raison ne connait point. -Blaise Pascal

Image Image
Image
ImageImageImage


Tue Feb 22, 2011 5:11 am
Profile WWW
Member
User avatar

Joined: Sat Nov 13, 2010 11:50 am
Posts: 1015
Oh that's interesting. <3 Thanks, Kawatan! <3

_________________
Image
dratinis bb: //CODERS guide journal shop
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
Image
▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃


Tue Feb 22, 2011 4:59 pm
Profile
Member
User avatar

Joined: Mon Aug 02, 2010 3:21 am
Posts: 1039
Oooh, I'll be using this to reference those special characters now... so useful!

_________________
Image ImageImage

Image

twitter | Image | shop


Sun Feb 27, 2011 10:30 pm
Profile
Member

Joined: Thu Jul 15, 2010 7:34 am
Posts: 344
Location: Where? I don't see it!
oh my good grief i want to use the color that conceals the colors totally so that it looks spoiler proof thanks for the guide

The closest I can get is WhiteSmoke Image

_________________
Image


Spoiler: show
My current club(s):
ImageImage


Thu Mar 10, 2011 3:07 am
Profile
Member
User avatar

Joined: Sat Sep 11, 2010 3:33 pm
Posts: 488
[8][H][O]_[T][A][P] wrote:
oh my good grief i want to use the color that conceals the colors totally so that it looks spoiler proof thanks for the guide

The closest I can get is WhiteSmoke Image


If you mean make the text totally invisible, the hex code for the post background color is #F0F3F4, so it should work if you use that.

_________________
Image
Everstone Breeding Shop ♫ Special Natures & Events


Thu Mar 10, 2011 3:39 am
Profile
Member

Joined: Thu Jul 15, 2010 7:34 am
Posts: 344
Location: Where? I don't see it!
devian wrote:
[8][H][O]_[T][A][P] wrote:
oh my good grief i want to use the color that conceals the colors totally so that it looks spoiler proof thanks for the guide

The closest I can get is WhiteSmoke Image


If you mean make the text totally invisible, the hex code for the post background color is #F0F3F4, so it should work if you use that.

*evil grin* Gee, thanks!

Doof! I noticed that my message is redundant! But still, great guide! Might use the Alt Characters in the future.

_________________
Image


Spoiler: show
My current club(s):
ImageImage


Thu Mar 10, 2011 4:05 am
Profile
Member
User avatar

Joined: Sun Aug 01, 2010 8:21 pm
Posts: 54
If you're someone using FireFox you can download the add-on ColorZilla to use for picking colors from things in your web-browser window. I'm assuming that it works in a fairly similar way to what Pixie does.

_________________
My forum avatar was drawn by myself so please don't steal it.
Image Image


Wed Mar 16, 2011 10:43 pm
Profile WWW
Display posts from previous:  Sort by  
Reply to topic   [ 73 posts ]  Go to page 1, 2, 3, 4  Next

Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group
Designed by ST Software for PTF.