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
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] →
[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]
↓
↓
[right][/right] → [right]right[/right]
↓
↓
right
[list][/list]
↓
[list]List item one
List item two[/list]
↓
↓
[list]List item one
List item two[/list]
↓
- List item one
- List item two
[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]
[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
⚂ ⚄ ⚁ ⚃
= 14roll 3 8-sided die (3d8) →
[dice]3d8[/dice]
→ Ookami Kenran rolled 3 d8, the total was 5 + 3 + 4 = 12
Notes about dice:
- Only get a symbol for D6.
- First number you type is the number of times rolled.
- Second number you type is the highest random number you will get. Can be 2 and up.
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:329
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
|
|
|
October 1, 2012 18:48 (12 years ago)
I'm not sure what it is you want to accomplish...
Could you explain? |
|
|
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? |
|
|
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
|
|
|
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* |
|
|
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';"> |
|
|
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.
|
|
|
January 18, 2020 2:02 (4 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.
|
|
|
January 21, 2020 19:24 (4 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.
|
|
|
January 21, 2020 19:50 (4 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. |
|
|
March 7, 2020 0:11 (4 years ago)
I really like the invisible bookmark, I only wish there was a way to not hide the invisible part. ^^;
|
|
|
March 7, 2020 0:11 (4 years ago)
I really like the invisible bookmark, I only wish there was a way to not hide the invisible part. ^^;
|
|
|
April 24, 2021 21:38 (3 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?
|
|
|
April 25, 2021 0:17 (3 years ago)
I think I smell what you are stepping in, and yes, I think code tags should display in monospace
|
|
|
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 |
|
|
June 16, 2021 21:50 (3 years ago)
I feel like the spoiler is more like censored or redacted Example:
|
|
|
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?
|
|
|
November 7, 2021 15:17 (3 years ago)
Does it do that? I don't think that's the intention.
|
|
|
November 7, 2021 16:40 (3 years ago)
It does, it can be somewhat irritating.
|
|
|
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 @____@
|
|
|
July 29, 2022 22:38 (2 years ago)
Can you make tags so that we can use the default headers in our pages?
|
|
|
July 30, 2022 7:39 (2 years ago)
I've been meaning to ^^
|
|
|
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... |
|
|
August 3, 2022 13:47 (2 years ago)
Oh wow, I think I forgot those existed XD
|
|
|
August 9, 2022 17:51 (2 years ago)
I still like the idea of /code having a monospace font.
|
|
|
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?
|
|
|
August 9, 2022 19:00 (2 years ago)
Yes. <3
|
|
|
August 28, 2022 20:19 (2 years ago)
@This page, updated the note about pixel art! 'w* <3
|
|
|
November 13, 2022 23:14 (2 years ago)
I still miss my new spoiler tags that I almost forgot I made this is normally hidden |
|
|
November 16, 2022 17:59 (2 years ago)
I also want to ad a table of contents...
|
|
|
December 10, 2022 0:15 (2 years ago)
Also add the difference for pixel-art block
|
|
|
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?
|
|
|
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!
|
|
|
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 SpoilerClick the arrow to dropdown.[spoiler=][/spoiler] → [spoiler=Description] Hide and Seek. [/spoiler] → Hide and Seek. *"Description" not required: [spoiler=][/spoiler] → [spoiler=] Hide and Seek. [/spoiler] → Hide and Seek. |
|
|
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.
|
|
|
December 11, 2022 22:18 (2 years ago)
Okay, at a stopping point
|
|
|
December 11, 2022 22:19 (2 years ago)
O.o Ive used it without description before. here
|
|
|
December 11, 2022 23:19 (2 years ago)
I took out the no description part and it still didn't work.
|
|
|
December 11, 2022 23:59 (2 years ago)
Maybe the one in the comments is breaking it all.
|
|
|
March 22, 2024 19:54 (9 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?
|
|
|
March 22, 2024 21:48 (9 months ago)
Oh yeah, go ahead and try that!
|
|
|
March 23, 2024 4:35 (9 months ago)
I can't delete posts
|
|
|
March 23, 2024 7:49 (9 months ago)
Oh I thought I gave wiki authors the option. Let me fix that for you
|
|
|
March 23, 2024 12:28 (9 months ago)
No, not yet; thank you! :D
|
|