BBCode, aka "Bulletin Board Code," is like a simplified of HTML, mainly used for, you guessed it, message boards. BBCode and HTML are very similar, but BBCode can also be a lot easier to use.
If you already know HTML, it's an easy conversion. You can find that tutorial here, but I will explain also. All you need to do is change the < > to [ ] and you're done! It's very easy. You can use Ctrl F and set it to find all < and replace with [ and etc. You can do this with virtually all code from the old forums, so you don't have to entirely redo all your roleplay layouts! Don't worry about any < or > included as text in the layout because they will actually appear as < in the source code.
ii. BBCode on Mobile & Quick Reply
On the old forums, you couldn't use source code on some mobile devices. With these forums, all mobile replies are in BBCode. All you have to do is type the code into the reply box because there is no toolbar. The same applies for quick replies on the desktop version, except the toolbar is also there and can be utilized as well.
If you want to use the toolbar for quick replies on the desktop, simply (a) first click the format you wish to apply (B, I, u, etc.) and then type the text to apply it to between the two boxes, or ( type out the text first, highlight the text you want to format, then click the formatting you wish to apply. Be careful with using the toolbar in normal replies because the toolbar sometimes formats the source code in a strange way, leading to different formats canceling each other out and so forth. Always be sure to check your source code to make sure it is neat and all formatting tags follow the same order (inside to outside, then outside to inside, ie. [ font ] [ span ] [ i ] text [ /i ] [ /span ] [ /font ] NOT [ font ] [ span ] [ i ] text [ /font ] [ /i ] [ /span ] )
iii. Shortcuts in BBCode
BBCode also includes a lot of useful shortcuts that HTML doesn't. These can be useful for coding when you only want to make a small bit of adjustments.
[marquee] marquee [/marquee] or [move] marquee [/move]
Now, these are all the basics, and they can be accessed from your toolbar if you're on the desktop version.
iv. A Little More About Color
Now, color is also on the toolbar, but there are many different ways to use the shortcut for color.
Using pre-made words for color This is the more limited option, but it is a lot quicker if you have a general idea of the color you want.
Using the color tags from the shortcut list above, you have to tell the computer what color you want. You do this by saying: [color=value] where "value" is the name of the color you want. Not all colors are supported, but most common colors are. (ie. black, blue, red, etc.) There is a good list of available colors here.
Using hex color code for color You can also input colors with a number & character value. This method is a little bit harder, but gives a lot more freedom on what colors you can use.
This method requires that you use [color=#value] whereas "value" is the 6-character hex code. Hex color codes are made up of pairs of the numbers 0-9 and letters a-f, 00 denoting the least (darkest) value and ff denoting the greatest (brightest) value. The pairs are the values of red, green, and blue, in that order, so red is given the hex code of FF0000; green is given 00FF00; and, blue is given 0000FF. Black, having no value from any, is given 000000, and white is given FFFFFF.
You can use the color wheel in the toolbar to find the hex code of the color you want.
Now, you may notice that when you switch back to the BBCode, the color tag has actually changed to a font color tag. This is normal, so don't worry about changing it back each time! Remember, the color tag is just a shortcut. The computer is changing it back into the full tag.
v. A Little More About Size
Size is also a shortcut that can be used in many different ways.
Using pre-made sizes The forum has already-set sizes for fonts. These are the easiest to use, and they can be accessed from the toolbar. To use the pre-made sizes, simply use [size=value] whereas "value" is a number 1-7, 1 being smallest (8px) and 7 being largest (36px.)
Using + and - for pre-made sizes You can also use + and - signs like [size=+value] or [size=-value] to denote "value" sizes up (+) from the default or "value" sizes down (-) from the default (ie. smaller and bigger.)
The highest size is seven (7), so it will always default to size three (3) if you put a number greater than seven (7) (ie. 7 as compared to 20.) **Note: It will look like size seven (7) in the preview, but the actual look will be three (3)! Likewise, it will default to three (3) if you put anything below zero (0) (ie. 1 as compared to -19.) **Note: The same applies here, so be careful! Zero will simply cancel the size tag, ending in a font tag, which doesn't change the appearance of the text.
Okay guys! Now that you've learned a few of the BBCode shortcuts, it's time to learn a little more about coding in BBCode in general!
First off, lets start with your basic (aka. most commonly used) tags: span, p, and div, which can be used like so: [span] text [/span] [p] text [/p] [div] text [/div] Now, what do these mean?
span is used for a span of text, usually from one word to a few sentences at most
p is used for a paragraph (block) of text.
div is usually used to encase several paragraphs of text, even a whole layout
However, there is no set amount you need to use to use any of the three. You could use span for several paragraphs of text, or div for one word. It all depends on what you think looks best with your layout because the three do have different functions which will affect how your layout looks in the end.
There are also many more tags to use (ie. font, url, img, etc.) but I will talk about those later on.
i. How To Use These Tags
The examples in the code block above are very plain. If you used them on some text, nothing would happen! To style the text inside, you need to use some other functions of BBCode, like color and size which we talked about in the post above. To do that, you first need this:[span style=""]The computer now knows you are styling the text!
Now, the text will still look the same because you haven't put anything in the quotation marks (" "). What you can put inside will be talked about in the next post!
There are many things you can use to style text and/or your layout! These go inside the quotation marks (" ").
i. Color
[div style="color:value;"]Color is used in the same way as described in the first post, and affects the color of the text.
You can also use "rgb(r-value, g-value, b-value)" for "value" like so:[div style="color:rgb(r-value, g-value, b-value)"]if you know the red, green, and blue values you want to use but not the hex code. These numbers range from 0 to 255.
ii. Background
[div style="background:value;"]There are actually several different ways to use backgrounds. The first I will talk about is using colors.
Background color works the same way as color, but it changes the color behind the text. This works differently in span than in p or div. For example: span vs.
p
vs.
div
Which looks like: [span style="background:black;"]span[/span] vs [p style="background:black;"]p[/p] vs [div style="background:black;"]div[/div] You can also use an image(s) for your background. See img for more details on using images. Simply replace "value" with "url(address)" where "address" is the image address. If you want more than one, list them with commas in-between.The first will appear in the front with the last on the bottom layer. This does not work with colors![div style="background:url(address), url(address2);"]To learn more about background customization, skip down to Background Color (because balthy is bad at planning hehe.)
iii. Border
[div style="border: widthpx style color;"]Borders are outlines of your text. They work on span, p, and div like the background color (including only that text vs. including the whole line.)
The "widthpx" is how wide (big) you want the border to be. 1px is very thin, and 40px is very large. It's good to mess around with different values when making a layout to see which you like the best.
"Style" is the type of border you want. Using a width of 5px so it's easier to see, the types include: solid, double, dashed, dotted, inset, outset, groove, and ridge. I also recommend playing around with different style borders to see which fits the layout best.
"Color" works the same as color. You can use a color name (ie. black, white, etc), # and a hex code value (ie. #000000, #FFFFFF, etc), or the rgb().
With the border tag, remember to include a space between these values.
Borders can also be used on one side only.[div left="border-right:5px solid black;"] produces
a solid black border on the left side only.
Border-top, border-right, border-bottom, and border-left can be used together to create a full border with many different widths, styles, and/or colors!
iv. Border Radius
[div style="border-radius: valuepx;"] or [div style="border-radius: value%"]The border radius is the amount of curve of the border of the element. You can use either pixel values (highly suggested!) or percentages (not recommended.) Since the height and width may have a different number of pixels, using a percentage will take the percent of those two values individually. While it works correctly, it ends up looking somewhat strange.
Examples:
height & width at 100px, border radius at 10px
height & width at 100px, border radius at 100px
height & width at 100px, border radius at 100%
no height or width, border radius at 10px
no height or width, border radius at 50%
See width and height for more detail on height & width.
v. Padding
[div style="padding:valuepx"]Padding designates the space, in pixels, between the edge of the box and the text inside. This is usually used in layouts to space things out so they don't appear scrunched next to the border or other elements. The "value", like with borders, can range from 1px to infinite pixels, but you don't want it to be more than or equal to half the width of your box otherwise the text will push outside the box.
Examples, each 10px: on span
on p
on div
You can see that p and div are basically the same, while span will expand into other elements, acting somewhat like a float box (in HTML.)
If you want different values for your different sides, you can also use padding-top, padding-right, padding-bottom, and padding-left. However, using all of them gets tedious. Another shorthand for these is:[div style="padding: value-toppx value-rightpx value-bottompx value-leftpx"] If you want top and bottom to be the same but different from left and right, you can use[div style="padding: value-toppx value-rightpx"]and it will automatically repeat the values for bottom and left. If you want the right and left to be the same, but top to be different from the bottom, you can use[div style="padding: value-toppx value-rightpx value-bottompx"]
vi. Margin
[div style="margin:valuepx;"]The margin designates the space from the edge of the post to the box. It works opposite to padding.
Examples, each 10px with no breaks [enter key] in between: on span
on p
on div
Margin can also be used in a few different ways, similar to padding where you can use multiple values. With margin, you can also use "auto"; this can be used alongside width to automatically align your element.
vii. Width
[div style="width: valuepx"] or [div style="width: value%"]Width is the distance from the left edge of the element to the right and can be used in either pixels or percents. It designates how wide the element can be, and width does not work in span. If you use a percent over 100% or use a larger number of pixels than the post box is wide, it will automatically create a scroll box on the whole post.
Examples:
100px
50%
viii. Height
[div style="height: valuepx"]Height is the distance from the top of the element to the bottom and can only be used in pixels. If you set a height, any text that is too long will be cut off automatically.
Examples:
100px
5px
ix. Overflow
[div style="overflow: value"]I put this next because it goes hand-in-hand with your width and height. The "value" for overflow has to be either auto or scroll for any change in the appearance (other values like visible, hidden, initial, and inherit do not work in BBCode.) Auto will automatically add a scroll bar if the text exceeds the height or width value only to that side. Scroll will add a scroll bar to both sides regardless of whether the text exceeds the width or height limit.
Examples:
overflow: scroll with no width or height values
overflow:auto with no width or height values
overflow:scroll with height:25px
overflow:auto with height:14px
The scroll bar is included in the set height, which is why the third (3rd) example is hard to see. I recommend using auto because it is rare you will need a scrollbar for the width of the element.
x. Font Family
[div style="font-family: value"]Font family is the style (font face) of the text. @sappho has a wonderful list of fonts here that you should check out! Simply replace "value" with the font name (including spaces.)
Font family can also be used independently, like so:[font family="value"] as font is also a usable tag.
[div style="font-size: value"]Font size is used differently inside the quotation marks. Instead of using 1-7, you'll need to indicate the number of pixels or a percentage for size. The number of pixels can be any number, like 10px, 12px, 28px, or more. Replace "value" with the number of pixels you want, and don't forget the "px". If you use a percentage, you are indicating what percent of the normal size you want the text to be (ie. 10%, 50%, 120%, or 200%.) You indicate percent by replacing "value" with the percentage, and remember your percent sign (%)!
You can also replace "value" with small, normal, or large.
It can also be used independently, like font family (or in combination) like so:[font size="value"] or [font family="value" size="value"]
xii. Font Weight
[div style="font-weight: value"]Font weight can be either normal or bold. Normal has no effect, and bold has the same effect as the b shortcut.
xiii. Text Align
[div style="text-align: value"]"Value" can be left, center, right, or justify, just like the shortcuts.
xiv. Text Shadow
[div style="text-shadow: h-valuepx v-valuepx blurpx spreadpx color"]Text shadow creates a shadow on the text. "h-value" is the horizontal distance of the shadow in pixels; "v-value" is the vertical distance of the shadow in pixels. Both can be positive (to the right or below) or negative (to the left or above). "blur" (optional) is the blurriness of the shadow in pixels; zero (0) is no blur (solid shadow) and infinity (∞) is so blurry that no shadow appears. "spread" is the spread of the blur in pixels. "color" is used the same as color.
xv. Box Shadow
[div style="box-shadow: h-valuepx v-valuepx blurpx spreadpx color"]Box shadow works the same as text shadow, but creates a shadow around the whole element. You can optionally add "inset" after the color value for the shadow to appear inside the box.
xvi. Float
[div style="float: value"]"value" can be right or left. Float will make the element "float" beside other text.example of span element with float:right This can be used to put elements side-by-side.
xvii. Opacity
[div style="opacity:value;"]Opacity is the transparent-ness of the element. "value" can be between 0 (totally see-through) and 1 (opaque).
Examples:
.9 opacity
.1 opacity
xviii. ID (Hyperlink)
[div id="value"]Hyperlinks can be used to link to a certain part of a page. Replace "value" with any word, though it is suggested that you use a similar id to the content so that you remember it later.
xix. Outline
[div style="outline: valuepx type color;"]"Outline" is like border, but it goes just outside the border. It can be used the same way.
xx. Background Color
[div style="background-color: color;"]background-color designates what color the background behind the image will be (if any of the background image is transparent, you will see the color. This works that same as any other color value, and can be used on its own, though that is not recommended.
Examples: No background-color
background-color: black
xxi. Background Attachment
[div style="background-attachment: value;"]background-attachment determines how the image is positions in respect to the whole website, not the element itself. "value" can be fixed or scroll; scroll is the default setting. This means that the image scrolls with the element; fixed means that the image stays where it is as the element scrolls.
Examples: fixed
scroll
xxii. Background Position
[div style="background-position: xvalue yvalue;"]background-position designates the position of the background image. "xvalue" can be replaced with a pixel value or left, right, or center. "yvalue" can also be replaced with a pixel value or top, bottom, or center. top left is the default, but if you input one value the other one is assumed center. (observe: center & center center yield the same result.)
[div style="background-repeat: value;"]background-repeat determines whether the background image will repeat and in which way. "value" can be repeat, repeat-x, repeat-y, or no-repeat; repeat is the default.
Okay, so now that you have the basics, there are also some other elements you can use.
i. A
[a] link [/a]An a tag designates a link!
To utilize the link, you need href, like so:[a href="value"] where "value" is the url of the webpage to link to. To use a hyperlink, simply put the web address, then #id. The "id" should be the same as the "value" you used in id="value". Another thing to keep in mind is the target.[a target="_value"]"Value" can be self, which opens the link in the current tab, or blank, which creates a new tab.
These links can be styled like other elements using[a style=""] as well.
ii. IMG
[img]Img stands for image. This is one of the few elements that does not need an end tag (if you use src for the img address.)
To use an image you have made, you will need a site to upload a picture from; I suggest imgur, but there are many other sites: tinypic, photoshop, etc. After uploading, copy (Ctrl+C) the direct link or click the image and select copy image/copy image address. To use an image from the internet, click the image and select copy image/copy image address. The image address should end in .tif, .jpg, .png, or .gif (below.)
For those wondering: a GIF (Graphics Interchangable Format) is a moving or static image. It uses the img tag and the image address will end in .gif
Use the img tag like so:[img src="value"]where "value" is the image address.
You can also use[img style=""]like the basic elements.
You can title an image using [img title="value"]and replacing "value" with the desired title. This text will show up when the user hovers their mouse over the image.
You can also use [img alt="value"]to create alternate text if the image cannot load. This is usually useful for short decriptions of the image so that the user knows what would have been there if it had loaded.
iii. Font
[font]Font is talked about in the post above.
iv. U, B, I, & Other Shortcuts
[u] underline [/u], [b] bold [/b], [i] italic [/i], [s] strikethrough [/s], [sup] superscript [/sup], [sub]subscript[/sub]These shortcuts can use styling as well, like so:[u style=""] and etc. They work similar to the span element.
How to not lose your posts! Step 1: Go to the first page of a post you're on, or in the sub-folder, check it. This option allows you to save many at once. Step 2: Go to the top of the page, then click Actions-Bookmark. Step 3: Refresh the page. At the top you will see a new section labeled Bookmarks. Click on it and your bookmarked threads are there!
ii. Using Images You Don't Own
Searching up images is fun! However, you don't want to grab just any random image you see off the internet because it might be copyrighted! Instead, there's a way to find images on Google that are pretty and completely free to use!
The guide below has some images, so I'm putting it under a spoiler.
First, go to google.com and look up the type of image you want (ie. "hd space images" in this example.)
Second, click on "Search Tools." You'll see an extra toolbar appear. Under "Labeled for reuse" you'll see the default is "Not filtered by license."
Change this to "Labeled for reuse" or "Labeled for noncommercial reuse" if you plan to use the image as is, or "Labeled for reuse with modification" or "Labeled for noncommercial reuse with modification" if you want to edit the image into a graphic. "Noncommercial reuse" simply means you aren't selling the image, so most use on the wcrp forums falls under that definition (note: fake currency such as warrior's world currency or etc does not count as commercial reuse. You may prefer the noncommercial reuse options because they give a wider range of photos.) See how some of the pictures have gone away? Those were not labeled for reuse, so it's a good thing I didn't try to use them on the forums!
Notes: You should still be careful using art from google, but this should help. If something looks like it was drawn by a non-professional artist, it may not technically be copyrighted, but it is still considered art theft to use it.
This guide works the same for mobile; you just have to scroll over a bit to see the "Search Tools" option.
iii. AdBlock & Disabling AdBlock
For those who don't know what AdBlock is, its an application that blocks ads on your browser. You can download it pretty easily. It is "technically" free (if you simply exit out of the page giving payment options), or you can pay what you want/can once (or more if you want) at any point in time.
For the Proboards, if you have and/or plan to get AdBlock, you'll need to disable it. Simply click on the red stop sign with a hand in the top right corner of your page and click 'Disable AdBlock on this domain' then click exclude. The red stop sign should now be a green stop sign with a thumbs up. **Note: do not click 'Disable AdBlock on this page' because then you will have to do it for every page you visit of the wcrpforums!
iv. Creating a Post Template
Thanks to ᶰ ᵃ ᶰ ᵍ ᶤ ʲ ᵃ ˡ ᵃ You can use a fancy post box without having to copy & paste each time. Simply go your profile and edit. Under the 'Settings' tab, scroll down to the 'Posting Default' and change it from 'Preview' to 'BBCode'. Enter the code for the fancy box. (You may want to have designed it beforehand so you know how it looks.) Remember to save your settings. You can switch back to 'Preview' at any time if you wish to stop using the template; the code for it will still be saved.
When you refresh a page, you'll see that the code is already in quick reply or reply! Now you can use the box without pasting the code each time.
v. Checking That Your Post is Color-Blindness Friendly!
When making your layouts, it's good to consider people who are color-blind. There is an easy way to do this. Copy the code box below and paste it directly above your layout. Keep in mind that it will not work in the preview tab, so you might want to post it in drafts. It does not work on the mobile site.
[div][attr="class","colorCheck"] When you hover over the layout in your post, it will turn to grayscale. If you can't read the text or see key parts of the layout, then it is not color-blindness friendly! (Note: this is only a very basic text, but it's a good way to start.) Remember to remove the code when you actually use the layout (unless you want it like that.)
You can also get a screenshot of your layout, then go to this site and upload it and check the different filters.
Post by Ƈσяαℓ Mєямαι∂ ღ on Aug 4, 2016 14:24:52 GMT -5
[ I'll delete if needed, but can you possibly make the font bigger on your main post? It's very hard to see and I have to zoom in to like 150% to read it without trouble ]
Post by Shapeshifter Ahsoka on Aug 8, 2016 12:07:42 GMT -5
i dont mean to be off topic but
i like ur profile stuff omg. i like how you have the evolutions in ur sig. and your name has the little gender icon just like pokemon do in the game. neat! plus its cool that u have the pokemon description in ur status! creative
Whoa, this is a really helpful guide! It's kind of hard for me to switch from html on the old forums to BBcode, I will definitely be referring to this a lot. Thank you!
Whoa, this is a really helpful guide! It's kind of hard for me to switch from html on the old forums to BBcode, I will definitely be referring to this a lot. Thank you!
Post by §Moonwing§ on Aug 10, 2016 17:05:57 GMT -5
I would also like to add, if you know html, or have old source code, you can actually paste that in Word, use "Find and replace", replace < with [ and > with ] and paste the code here, almost everything will work. I'm not sure where this advice belongs, but it's a good way of saving old stuff without remaking it.
I would also like to add, if you know html, or have old source code, you can actually paste that in Word, use "Find and replace", replace < with [ and > with ] and paste the code here, almost everything will work. I'm not sure where this advice belongs, but it's a good way of saving old stuff without remaking it.
Yeah! i didn't include it because there's a guide to that which is bookmarked(?) in every section.
Whew. Sorry for scrambling everything on ya'll. I decided to get a lil' more organized and add a directory to the first post. You can also find links to other helpful guides!
NOTE: Excessively spamming the shoutbox may result in a 24 hour ban. Other forum rules still apply. Please do not advertise by linking other websites. Use spoilers when necessary. Members are encouraged to report offending content to the moderators by PM.
ﮩ٨ـﮩﮩ٨ـevīأdīทⲟﮩ٨ـﮩﮩ٨ـ: Im thinking of going off for a week or so sometime, just because midterm grades are coming up, and I need to get off electronics more these days. And I need to practice archery
Dec 2, 2024 23:15:14 GMT -5
Ravenshadow: borkborkborkborkborkbork
Dec 3, 2024 2:06:07 GMT -5
ᯓ - - > ᥲs𝗍rᥲ ` rіsᥱ : x 🦋: if anybody plays dandy world im getting a pebble, dandy and astro plush for xmas :3
Dec 3, 2024 7:45:02 GMT -5
ᯓ - - > ᥲs𝗍rᥲ ` rіsᥱ : x 🦋: gonna see if my mom can pick me up because their bulling me and my head hurts and AHHHH everything's going wrong today
Dec 3, 2024 10:21:44 GMT -5
ᯓ - - > ᥲs𝗍rᥲ ` rіsᥱ : x 🦋: atleast I can skip gym for therapy but that's not gonna help I'm gonna tell guidance my head hurts rlly bad (cuz it does) and my throut hurts as well (CUZ IT DOES!!)
Dec 3, 2024 10:22:40 GMT -5
type out the text first, highlight the text you want to format, then click the formatting you wish to apply. Be careful with using the toolbar in normal replies because the toolbar sometimes formats the source code in a strange way, leading to different formats canceling each other out and so forth. Always be sure to check your source code to make sure it is neat and all formatting tags follow the same order (inside to outside, then outside to inside, ie. [ font ] [ span ] [ i ] text [ /i ] [ /span ] [ /font ] NOT [ font ] [ span ] [ i ] text [ /font ] [ /i ] [ /span ] )
