Yuu's BBCode Teahouse

[SecondBreaking]

Thanks

 

[Elle Joyner]

Sounds great And you're my hero, btw - I've been trying to figure out that accordion coloring trick, forever xD

 

[Corgi]

uhm... hello! sorry to bother you at a time like this.. but i was wondering if i could order a hojicha and a guricha, please?


as the guricha, mine would be when making a roleplay post in the "in character rp" tab.

I FEEL SO EMABARRASSED IM SO SORRY IF I'M BOTHERING YOU JUST DON'T REPLY AT ALL!
​

 

[sorrow made you]

@Corgi;


Sorry I haven't replied. I actually have been incredibly inactive on RPN as of late. For that reason, I can't accept your request at this time.


I deeply apologize for this inconvenience. ;;A:;

 

[The Creator Prime]

 

[Corgi]

@Corgi[/URL];
Sorry I haven't replied. I actually have been incredibly inactive on RPN as of late. For that reason, I can't accept your request at this time.


I deeply apologize for this inconvenience. ;;A:;

it's okay!!! i get super shy sometimes, so thank you for messaging back! and it's okay i hope you get less busy soon! Bye~

​

 

[Zenobia]

Thanks

 

[lostviolence]

Are you guys accepting new helpers?


Pwease? I'm want to help sooo fecking bad >~<

 

[sorrow made you]

@lostviolence


Unfortunately not in here. :c


However, if you would like to help people in general with BBCode, I don't see why you can't apply for The Helper Initiative


Also, if you would like to collaborate with other BBCoders, maybe we can arrange a convo to see what we can come up with?

 

[lostviolence]

@lostviolence[/URL]
Unfortunately not in here. :c


However, if you would like to help people in general with BBCode, I don't see why you can't apply for The Helper Initiative


Also, if you would like to collaborate with other BBCoders, maybe we can arrange a convo to see what we can come up with?

Aww... All good!


I've already applied for that but I don't think they have accepted me yet :c


I would love to have a collaboration! If you want to PM me go ahead!

 

[Kimi]

The Accordion BBCode[/URL] has been one of my recent favorites. Especially when you start to implement color and graphics to make them clickable buttons instead of that solid gray. If you haven't noticed, I used quite a bit of accordions myself in the Teahouse.


This tutorial was requested by our very own @welian. I will go through how each section words, and how to apply it with other codes. So let's begin!

WHAT IS ACCORDION BBCODE?

Just like the BBCode Guide says, the Accordion is an alternative to the Tabs BBCode. It allows users to organize, compartmentalize and condense the amount of writing all together. I would consider this code to be one of the more versatile ones, considering its alteration capabilities.


The standard unaltered code for Accordion looks like this:

[accordion]
{slide=Text}Blurb{/slide}
[/accordion]

And will give you this:

Text

Blurb

BREAKING DOWN THE ACCORDION

Spoiler

The reason why I say the Accordion seems to be the most versatile is because its many different options.


In the BBCode Guide, there are given the options you can do to the [accordion] tag.

Accordion Master Code options

number%: Set the width of the accordion box


[accordion=#%]


fleft: block will float left


[accordion=fleft]


fright: block will float right


[accordion=fright]


bleft: align the block to the left


[accordion=bleft]


bcenter: align the block to the center


[accordion=bcenter]


bright: align the block to the right


[accordion=bright]

So for example:


You want a small accordion to display. You would place the percentage number as 40%. The code would look like this:


[accordion=50%][/SIZE]

[SIZE=12px]
{slide=Text}Blurb{/slide}[/SIZE]

[SIZE=12px]
[/accordion]


And would look like this:


no slide

Text

Blurb

If you decide to add any other code edits, they will be separated by | ( Shift+\ key)


So you want it to float right of a text, it will look like this: no slide

Text

Blurb

[accordion=50% | fright][/SIZE]

[SIZE=12px]
{slide=Text}Blurb{/slide}[/SIZE]

[SIZE=12px]
[/accordion]


The bleft, bright, and bcenter will just align it, but won't float it (float is like what you do to images. See Image Float).

Here comes the fun part. Slides. Slides have the most customization, and are the trickiest part of this entire code. Slides go inside of the [accordion] [/accordion] tags, controlling the bars and the content that reveals itself when the bar is clicked on.


I'm going to put this in caps: BE INCREDIBLY CAREFUL WITH SLIDES. You can break the entire thread if its not done properly (I know, I've seen it. >_>;; ). Okay, maybe not break per se, but anyways.


Slides do NOT use brackets like the accordion ( [ ] ). They use these things: { }. Be careful when placing your slides. They won't work if the Slides are not in those special little brackets.

Just like the options for the accordion, you can align the text within the bar:


[accordion=50%][/SIZE]

[SIZE=12px]
{slide=left | Text}Blurb{/slide}[/SIZE]

[SIZE=12px]
[/accordion]


no slide

Text

Blurb

You still must use Shift+\ in order to separate the different functions.


The 'open' option will keep the accordion open when you first look at the post.

Slide Master options

left: title of the slide will be align to the left


{Slide=left}


center: title of the slide will be align to the center This one is enabled by default for slide titles.


{Slide=center}


right: title of the slide will be align to the right


{Slide=right}


open: the slide will be opened by default


{Slide=open}

CUSTOMIZING ACCORDIONS

Now this is the section that everybody is looking forward to. I am going to break it down into sections:


• Editing Titles


• Adding Backgrounds


• Adding Borders to Erase Borders


Editing Titles


The titles are what I will be calling the text inside of the Slide tag. So essentially, what we are editing, is how the Slide bar looks.


If we take our sample 50% accordion code, we add edits to the title.


[accordion=50%]{slide=left | [B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B]}Blurb{/slide}


[/accordion]

Text

Blurb

Pretty much anything you do to the text INSIDE the {Slide} will show up. So feel free to play around with it. Just make sure that it is in between those funny brackets.


Adding Backgrounds


Here we go. This is the stuff everyone really wants. Just like you can edit the text in the slides, you can give them backgrounds. The code will look like this:


[accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}Blurb{/slide}


[/accordion]

Text

Blurb

Its as simple as that! You can add backgrounds around it as well (inside and outside of the code) to camouflage it. Example:


[bg=#ccdd88][accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}[bg=#ccdd88]Blurb[/bg]{/slide}


[/accordion][/bg]

Text

Blurb

Adding Borders to Erase Borders


Do you see that ugly border around it?! Well there is a way to get rid of it. You simply put a 0px border around it using the [border] tag! Here's an example:


[bg=#ccdd88][border=0px solid #ccdd88][accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}[bg=#ccdd88]Blurb[/bg]{/slide}


[/accordion][/border][/bg]

Text

Blurb

Make sure the border is around the [accordion] [/accordion] tags or else it won't disappear.




And that's about all it takes, guys! I hope this was beneficial to you all. If you have any more questions or more clarification, feel free to ask!


Arigatou gozaimashita!


//bows


This is amazing But im not sure how you would make multiple slides?

 

[sorrow made you]

This is amazing But im not sure how you would make multiple slides?

You repeat the {slide} {/slide} part while keeping it before the [/accordion] tag.

 

[Kimi]

[QUOTE="CRiTiCAL ERR0R]You repeat the {slide} {/slide} part while keeping it before the [/accordion] tag.

[/QUOTE]
Thank you! I was seriously trying this for two hours yesterday without success.

 

[sorrow made you]

@Leviersa thank you for the spam liking xD

 

[Marianne]

Ahh! I've been caught. . /)(\ Oh ni. .


Haha, you're welcome. I've been struggling with BBCode for a couple of hours now, so I have decided to Google and got sent here.


So, thank you for assisting me regarding the Accordion scenario.

 

[sorrow made you]

Haha xD


If you need any more help, feel free to ask me! b


I'd be more than happy to help out.

 

[Marianne]

. . . I require a lot of help.

 

[Marianne]

Ahem, hem, hem, heeem. *coughs*


Please help me, oh CRiTiCAL one.

 

[sorrow made you]

xD


PM me with what you're working on and we'll go from there. =w= b

 

[Marianne]

@CRiTiCAL ERR0R Done ~!

 

[sorrow made you]

After all these months, Yuuki if finally renovating this thread~

 

[deer]

Passing by to say @CRiTiCAL ERR0R , your tutorial on the accordian helped me so much!


It's been forever since I've been bbcoding on here and so I'm getting back into the jive of things.

 

[ArcticViolin]

The Accordion BBCode[/URL] has been one of my recent favorites. Especially when you start to implement color and graphics to make them clickable buttons instead of that solid gray. If you haven't noticed, I used quite a bit of accordions myself in the Teahouse.


This tutorial was requested by our very own @welian. I will go through how each section words, and how to apply it with other codes. So let's begin!

WHAT IS ACCORDION BBCODE?

Just like the BBCode Guide says, the Accordion is an alternative to the Tabs BBCode. It allows users to organize, compartmentalize and condense the amount of writing all together. I would consider this code to be one of the more versatile ones, considering its alteration capabilities.


The standard unaltered code for Accordion looks like this:

[accordion]
{slide=Text}Blurb{/slide}
[/accordion]

And will give you this:

Text

Blurb

BREAKING DOWN THE ACCORDION

Spoiler

The reason why I say the Accordion seems to be the most versatile is because its many different options.


In the BBCode Guide, there are given the options you can do to the [accordion] tag.

Accordion Master Code options

number%: Set the width of the accordion box


[accordion=#%]


fleft: block will float left


[accordion=fleft]


fright: block will float right


[accordion=fright]


bleft: align the block to the left


[accordion=bleft]


bcenter: align the block to the center


[accordion=bcenter]


bright: align the block to the right


[accordion=bright]

So for example:


You want a small accordion to display. You would place the percentage number as 40%. The code would look like this:


[accordion=50%][/SIZE]

[SIZE=12px]
{slide=Text}Blurb{/slide}[/SIZE]

[SIZE=12px]
[/accordion]


And would look like this:


no slide

Text

Blurb

If you decide to add any other code edits, they will be separated by | ( Shift+\ key)


So you want it to float right of a text, it will look like this: no slide

Text

Blurb

[accordion=50% | fright][/SIZE]

[SIZE=12px]
{slide=Text}Blurb{/slide}[/SIZE]

[SIZE=12px]
[/accordion]


The bleft, bright, and bcenter will just align it, but won't float it (float is like what you do to images. See Image Float).

Here comes the fun part. Slides. Slides have the most customization, and are the trickiest part of this entire code. Slides go inside of the [accordion] [/accordion] tags, controlling the bars and the content that reveals itself when the bar is clicked on.


I'm going to put this in caps: BE INCREDIBLY CAREFUL WITH SLIDES. You can break the entire thread if its not done properly (I know, I've seen it. >_>;; ). Okay, maybe not break per se, but anyways.


Slides do NOT use brackets like the accordion ( [ ] ). They use these things: { }. Be careful when placing your slides. They won't work if the Slides are not in those special little brackets.

Just like the options for the accordion, you can align the text within the bar:


[accordion=50%][/SIZE]

[SIZE=12px]
{slide=left | Text}Blurb{/slide}[/SIZE]

[SIZE=12px]
[/accordion]


no slide

Text

Blurb

You still must use Shift+\ in order to separate the different functions.


The 'open' option will keep the accordion open when you first look at the post.

Slide Master options

left: title of the slide will be align to the left


{Slide=left}


center: title of the slide will be align to the center This one is enabled by default for slide titles.


{Slide=center}


right: title of the slide will be align to the right


{Slide=right}


open: the slide will be opened by default


{Slide=open}

CUSTOMIZING ACCORDIONS

Now this is the section that everybody is looking forward to. I am going to break it down into sections:


• Editing Titles


• Adding Backgrounds


• Adding Borders to Erase Borders


Editing Titles


The titles are what I will be calling the text inside of the Slide tag. So essentially, what we are editing, is how the Slide bar looks.


If we take our sample 50% accordion code, we add edits to the title.


[accordion=50%]{slide=left | [B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B]}Blurb{/slide}


[/accordion]

Text

Blurb

Pretty much anything you do to the text INSIDE the {Slide} will show up. So feel free to play around with it. Just make sure that it is in between those funny brackets.


Adding Backgrounds


Here we go. This is the stuff everyone really wants. Just like you can edit the text in the slides, you can give them backgrounds. The code will look like this:


[accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}Blurb{/slide}


[/accordion]

Text

Blurb

Its as simple as that! You can add backgrounds around it as well (inside and outside of the code) to camouflage it. Example:


[bg=#ccdd88][accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}[bg=#ccdd88]Blurb[/bg]{/slide}


[/accordion][/bg]

Text

Blurb

Adding Borders to Erase Borders


Do you see that ugly border around it?! Well there is a way to get rid of it. You simply put a 0px border around it using the [border] tag! Here's an example:


[bg=#ccdd88][border=0px solid #ccdd88][accordion=50%]{slide=left | [bg=#ccdd88][B][COLOR=#778833][SIZE=18px]Text[/COLOR][/SIZE][/B][/bg]}[bg=#ccdd88]Blurb[/bg]{/slide}


[/accordion][/border][/bg]

Text

Blurb

Make sure the border is around the [accordion] [/accordion] tags or else it won't disappear.




And that's about all it takes, guys! I hope this was beneficial to you all. If you have any more questions or more clarification, feel free to ask!


Arigatou gozaimashita!


//bows


Thank you very much for this! I do have a very noobish question...


what does before mean? -> {slide=left | Text}Blurb{/slide}


If there was any explanation regarding that on here, I may have missed it~


Thanks!

 

[sorrow made you]

Thank you very much for this! I do have a very noobish question...
what does before mean? -> {slide=left | Text}Blurb{/slide}


If there was any explanation regarding that on here, I may have missed it~


Thanks!

Hey there! So no, you didn't miss anything. the COLOR tags are standard BBCode for changing the color of font and other codes (that are applicable).


The COLOR code will always look like this:


[/FONT][FONT='PT Sans'] [/FONT][FONT='PT Sans']


You can replace "color name" with the name of a color, (we'll use red as an example), or a HEX code (I will explain this in a moment).


So, the COLOR code should look like this: [/FONT][COLOR=#FF0000][FONT='PT Sans']Hello~[/COLOR][/FONT][FONT='PT Sans']


and it will appear like this: Hello~


Now, HEX codes are a series of letters and/or numbers that create a web color (here's an example: Color Hex Color Codes ). Instead of using "color name", you can use a HEX code. HEX codes are great when you want to use various shades of colors or a color that you may not know the name of. You place them in just like the example above, however, you MUST have a hashtag before the letter/number sequence.


[/FONT][COLOR=#C3B0C3][FONT='PT Sans']This is a thistle color[/COLOR][/FONT][FONT='PT Sans']


seen like this: This is a thistle color


I hope this all makes sense. Feel free to ask more questions if you have any!

 

[ArcticViolin]

Color Hex Color Codes[/URL] ). Instead of using "color name", you can use a HEX code. HEX codes are great when you want to use various shades of colors or a color that you may not know the name of. You place them in just like the example above, however, you MUST have a hashtag before the letter/number sequence.


[/FONT][FONT='PT Sans'][COLOR=#C3B0C3]This is a thistle color[/COLOR][/FONT][FONT='PT Sans']


seen like this: This is a thistle color


I hope this all makes sense. Feel free to ask more questions if you have any!

Thanks you for the explanation!


I checked my earlier post and saw that instead of , it says 'before." That was actually my question ^^; what is the significance of ?


accordion=50%]{slide=left | Text}Blurb{ /slide





Edit: I just realized that [ b] doesn't show up here.