BBCode Guide
Official site resource (Tutorials)

On Chibi Pixel Doll Dress-Up, you can use BBCode (Wikipedia) to make your messages a little more interesting than plain text. You can use these codes while posting, editing your profile or a editing a wiki. If you're looking for extra effects like changing the text color, use CSS. We have a guide about that here.

You have to be careful that the BBCode tags match exactly. Whenever using tags, we recommend to preview before posting!


Table of Contents


Text Appearance
Text Formatting
Links
Bonus
- Quotes
- Dropdown Spoiler
- Custom Blocks
- Dice
- Invisible Bookmarks


Enabled BBCode Tags


Text Appearance


[b][/b] → [b]bold[/b] →
bold

[i][/i] → [i]italic[/i] →
italic

[u][/u] → [u]underline[/u] →
underline

[rainbow][/rainbow] → [rainbow]rainbow[/rainbow] →
rainbow


[s][/s] → [s]strike[/s] →
strike

[spoiler][/spoiler] → [spoiler]spoiler[/spoiler] →
[spoiler]spoiler[/spoiler]
*Hovering on the text will show what is hidden.
**Click for and alternate spoiler tag.


Text Formatting


[left][/left] → [left]left[/left]
↓

left


[center][/center] → [center]center[/center]
↓

center


[right][/right] → [right]right[/right]
↓

right


[list][/list]
↓
[list]List item one
List item two[/list]
↓



[h1][/h1] → [h1]Title[/h1]
↓

Title


[h2][/h2] → [h2]Header[/h2]
↓

Header


[h3][/h3] → [h3]Header[/h3]
↓

Header


[h4][/h4] → [h4]Header[/h4]
↓

Header



[hr]
↓
*These are customizable; CSS:
hr { height: 0; border-top: /*your code here*/; }



Links


[user][/user] → [user]Karin[/user] →

Clicking the image of the user will take you to their profile.

[url][/url] → [url]http://chibidoll.com[/url] →
http://chibidoll.com
OR
[url=][/url] → [url=http://chibidoll.com]My site[/url] →
My site

Images


[img][/img] → [img]image URL[/img]

OR you can float it right or left:
[imgleft][/imgleft] → [imgleft]image URL[/imgleft]
[imgright][/imgright] → [imgright]image URL[/imgright]


[youtube][/youtube] → [youtube]embed URL of Youtube video[/youtube] →
>video<
*This has undesirable effects for mobile users, stretching the page and hiding the page up/down buttons


Bonus


The /code example tends to breaking the page...

Quotes

[quote=][/quote] → [quote=name] Words [/quote]

↓
name wrote:
Words

*Without "=" this becomes redacted text, see above
*Will work without "Name".

Dropdown Spoiler

Click the arrow to dropdown.
[spoiler=][/spoiler] → [spoiler=Description] Hide and Seek. [/spoiler]
→ [spoiler=Description] Hide and Seek. [/spoiler]
*"Description" not required:
[spoiler=][/spoiler] → [spoiler=] Hide and Seek. [/spoiler]
→ [spoiler=] Hide and Seek. [/spoiler]
-!-!-!-!-!-!-!- Karin: I did some debugging and the above 3 lines are what is ruining the spoiler tags. I also tried both lines individually. -!-!-!-!-!-!-!-

Custom Blocks

Make an element that you can edit with CSS using #newname { } in your style sheet:
[block=newname] Content [/block]

There is a univers of possibilities with this tag! 👀

Displaying Pixel Art

If you are showing off pixel art, it will get blurry in some situations, unless you use this special block:
[block=pixel-art][/block] → [block=pixel-art][img]https://i.imgur.com/dbc0TH3.png[/img][/block]
↓


Here's what it looks like without:
[/block] → [block=pixel-art][img]https://i.imgur.com/dbc0TH3.png[/img][/block]
↓



Dice

roll a 6-sided die (1d6) →
[dice][/dice]
→ roll a 6-sided die (1d6) →
Ookami Kenran rolled
⚂

roll 4 6-sided dice (4d6) →
[dice]4[/dice]
→
Ookami Kenran rolled
⚂ ⚄ ⚁ ⚃
= 14

roll 3 8-sided die (3d8) →
[dice]3d8[/dice]
→
Ookami Kenran rolled 3 d8, the total was 5 + 3 + 4 = 12

Notes about dice:

Invisible Bookmarks

Make a link to a different part of the same page.
This is how the Table of Contents works
Two pieces are required for this to work:
1.) The location and id for the link
2.) The actual link.

1.)
[bookmark][/bookmark] → [bookmark]bookmark name[/bookmark]

*Remember this is invisible, so it doesn't show visibly on your page.

2.)
[url=#][/url] → [url=#bookmark name]link[/url] →
link

Title:BBCode Guide
Last changed:March 22, 2024 by Ookami Kenran
Author(s):Ookami Kenran, Karin
Page views:337
Visible to:anyone
Can be edited by:authors only
October 1, 2012 14:39 (12 years ago)
How to put my dolls side to side in a straight light
twizzy
October 1, 2012 18:48 (12 years ago)
I'm not sure what it is you want to accomplish...

Could you explain?
Karin
January 15, 2020 19:56 (5 years ago)
I'm looking forward to the dice command!
I like the idea of being able to change an image in the bg to change the skin of the dice. I can make a placeholder if you ask.

I had another idea, can you make a sort spoiler command? Where the content is hidden until the viewer clicks/taps a button, then can be closed? Ex:
[spoi]css code
Body {}
#text {}
Etc... [/spoi]


As flair, I want to suggest changing the font when is used.

Is it possible to affect BBC with CSS? Like changing the text when or others are used, or the bg, text, links, etc, and button of spoilers?
Ookami Kenran
January 16, 2020 9:43 (5 years ago)
Hmm, if we're to use graphics for dice it would be hard to visualize custom dice like d8 and d20, though I do like graphics.

A spoiler tag could be useful, but do you want to use it for actual spoilers or just to fit more stuff into a page? Because a "spoiler" tag I would implement like they have it on Steam and the "hide" thing you can probably do already using a custom block.

BBCode results in some html change, and that you can style if you have access to the page css. With custom blocks you should be able to do anything.
Hello this is a custom block, see it even works inside a comment
Karin
January 17, 2020 1:25 (5 years ago)
I think I can make something happen when I have the time…

I know I can make a box expand when hovered over, and I can make buttons, but I haven't figured out how do this with out javascript yet…
Not afraid to use javascript, I just don't know how to implement it here.

Didn't know I could use blocks in comments... I like the idea...*mind whirling*
Ookami Kenran
January 17, 2020 2:18 (5 years ago)
<style>
.speechbox span {
background: white;
}
</style>

Can we also style in comments?


I've found this... I'm just not sure how to do this part (below) on this site. This would need to go in the page content somehow...

<input class="spoilerbutton" type="button" value="Show Solution" onclick="this.value=this.value=='Show Solution'?'Hide Solution':'Show Solution';">
Ookami Kenran
January 17, 2020 10:11 (5 years ago)
No you can only style the blocks if you're in control of the page css, like on your own profile or wiki page.
Karin
January 18, 2020 2:02 (5 years ago)
Suggestion: add ability to change font [color=red] color[/color] and [size=8]size[/size]. Maybe there can be a max size limit.
Ookami Kenran
January 21, 2020 19:24 (5 years ago)
Maybe some sort of highlight feature? Like [mark=date]11/15/1993[/mark] and [mark=speed]115mph[/mark] so you could do different colors if you have access to the CSS, and if you just [mark]marked[/mark] it, it would be the default <mark> color.
Ookami Kenran
January 21, 2020 19:50 (5 years ago)
You can also do that with blocks, if you style it using display: inline,

I'm aware that some people like fancy rainbow posting styles, but I also want to avoid this site turning into one big visual mess. Let's think about what we want to accomplish first and decide if we need to add tags for it later.
Karin
March 7, 2020 0:11 (5 years ago)
I really like the invisible bookmark, I only wish there was a way to not hide the invisible part. ^^;
Ookami Kenran
March 7, 2020 0:11 (5 years ago)
I really like the invisible bookmark, I only wish there was a way to not hide the invisible part. ^^;
Ookami Kenran
April 24, 2021 21:38 (4 years ago)
Hmm, would it make sense for the code tag to also add a span with a class that turns it to monospace font, or should we use a different tag for that?
Karin
April 25, 2021 0:17 (4 years ago)
I think I smell what you are stepping in, and yes, I think code tags should display in monospace
Ookami Kenran
May 19, 2021 17:26 (3 years ago)
I'm not sure if this is possible, but I think it would especially handy for D/GMs for secrets (would it be possible to tag multiple people?) or people posting code for a certain person in their wiki shop. We could have it so that other people don't even know it's there and/or we could keep it so only certain people could know it exists.

It's an idea... Let me know what you are thinking. <3
Ookami Kenran
June 16, 2021 21:50 (3 years ago)
I feel like the spoiler is more like censored or redacted Example:
Ookami Kenran
October 31, 2021 19:24 (3 years ago)
Is it possible to make it so that the block doesn't add a br after the div?
Ookami Kenran
November 7, 2021 15:17 (3 years ago)
Does it do that? I don't think that's the intention.
Karin
November 7, 2021 16:40 (3 years ago)
It does, it can be somewhat irritating.
Ookami Kenran
November 16, 2021 16:41 (3 years ago)
now that i've finally found this im saving it to my bookmarks so i cant lose it again @____@
cultclub
July 29, 2022 22:38 (2 years ago)
Can you make tags so that we can use the default headers in our pages?
Ookami Kenran
July 30, 2022 7:39 (2 years ago)
I've been meaning to ^^
Karin
August 3, 2022 13:35 (2 years ago)
Now that we have header tags, do you think people would use a horizontal rule?
If I want one, I currently need to make a custom block, set height to 0, then customize the top or bottom border...
Ookami Kenran
August 3, 2022 13:47 (2 years ago)
Oh wow, I think I forgot those existed XD
Karin
August 9, 2022 17:51 (2 years ago)
I still like the idea of /code having a monospace font.
Ookami Kenran
August 9, 2022 18:55 (2 years ago)
Doesn't it? I thought I already made that. Alright I will, then can you please update the guide?
Karin
August 9, 2022 19:00 (2 years ago)
Yes. <3
Ookami Kenran
August 28, 2022 20:19 (2 years ago)
@This page, updated the note about pixel art! 'w* <3
Ookami Kenran
November 13, 2022 23:14 (2 years ago)
I still miss my new spoiler tags that I almost forgot I made
it's a spoiler tag with an =
Karin
November 16, 2022 17:59 (2 years ago)
I also want to ad a table of contents...
Ookami Kenran
December 10, 2022 0:15 (2 years ago)
Also add the difference for pixel-art block
Ookami Kenran
December 11, 2022 20:45 (2 years ago)
Quote as well as spoiler= isn't up there; which section do you think they should go in? Text Formatting, Bonus, or their own?
Ookami Kenran
December 11, 2022 20:59 (2 years ago)
I'm fine with anything as long as they're together with the normal spoiler tags. Also thanks for updating!
Karin
December 11, 2022 21:55 (2 years ago)
Why is the following working here, but not in the page??? o.O

Quotes

[quote=][/quote] → [quote=name] Words [/quote]

↓
name wrote:
Words

*wont work without "=", will work without "Name".

Dropdown Spoiler

Click the arrow to dropdown.
[spoiler=][/spoiler] → [spoiler=Description] Hide and Seek. [/spoiler]
→

*"Description" not required:
[spoiler=][/spoiler] → [spoiler=] Hide and Seek. [/spoiler]
→
Ookami Kenran
December 11, 2022 22:18 (2 years ago)
I think description is required though because it's used to generate an id so it knows which one is being opened.
Karin
December 11, 2022 22:18 (2 years ago)
Okay, at a stopping point
Ookami Kenran
December 11, 2022 22:19 (2 years ago)
O.o Ive used it without description before. here
Ookami Kenran
December 11, 2022 23:19 (2 years ago)
I took out the no description part and it still didn't work.
Ookami Kenran
December 11, 2022 23:59 (2 years ago)
Maybe the one in the comments is breaking it all.
Karin
March 22, 2024 19:54 (13 months ago)
Just noticing those comments after doing some debugging... If it's written correctly, I'm not sure why, but can we see if deleting all posts containing either spoiler tag will help?
Ookami Kenran
March 22, 2024 21:48 (13 months ago)
Oh yeah, go ahead and try that!
Karin
March 23, 2024 4:35 (13 months ago)
I can't delete posts
Ookami Kenran
March 23, 2024 7:49 (13 months ago)
Oh I thought I gave wiki authors the option. Let me fix that for you
Karin
March 23, 2024 12:28 (13 months ago)
No, not yet; thank you! :D
Ookami Kenran