Yuu's BBCode Teahouse

sorrow made you

sorrow made you

from the bottom of the dark, dark sea
Roleplay Availability
Roleplay Type(s)


klrRPwy.png



「茶房」Yuu's Teahouse is currently under renovation!


BBCode -

Bulletin Board Code is a lightweight markup language used to format posts in many message boards. The available tags are usually indicated by square brackets ([ ]) surrounding a keyword, and they are parsed by the message board system before being translated into a markup language that web browsers understand—usually HTML or XHTML.



-- Wikipedia: BBCode

 
Last edited:
Last edited by a moderator:



YUUKI LEAVES NOTES TO SAY THREAD IT OPEN FOR POSTING.

<3​




 
//flops


That coding only took...


//counts on fingers


Three days? xD ;;
 
Well, you can't live in the tearoom, but I'm sure I can find a special little spot for you to call your own.


//nodnod


o wo
 
:o ~can't find the expression for thoroughly impressed >_< . Your coding is so beautiful! I wish i could do that.
 
@Aviendha


Thank you~ >w<


Took quite a bit of time working with BBCode to figure it all out without making too many mistakes and butchering the entire thing. x__x;;
 
TEAHOUSE TUTORIAL: ACCORDION


The Accordion BBCode 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:

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

And will give you this:


Text
Blurb



BREAKING DOWN THE ACCORDION


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
 
Last edited by a moderator:
//screams to the high heavens


ILU SO MUCH RIGHT NOW
 
lol tyty


I need to set up my snack stand still. And... I feel like I should do more tutorials here soon. xD
 
[QUOTE="Yuuki of the Strata]lol tyty
I need to set up my snack stand still. And... I feel like I should do more tutorials here soon. xD

[/QUOTE]
I'm in love with the BBcoding in that opening post. It's so beautiful!
 
Honestly Yuuki, it's outside the realm of this thread, but I've been contemplating a color theory tutorial.
 
Thanks. >w<


I wanted to show what beauty BBCode could actually do when meshed together. And I really wanted my tea. xD


 
@welian; A color theory tutorial would be incredibly useful. I never took a color theory class, so I can only go off of what I've learned from watching and experimenting. OTL
 
@Yuuki of the Strata


xD Well, I could make it myself. I took multiple color theory courses back when I was an art student. I just tend to not care about color that much, so my work doesn't really show it.
 
@welian; If you could give me some important information on color theory, I could work on the tutorial when I have time?
 
@Yuuki of the Strata


Haha, sure! It's pretty basic stuff, but I don't mind writing the boring bits for ya.
 
Yuuki of the Strata] [URL="https://www.rpnation.com/profile/11743-welian/ said:
@welian[/URL]introduce RGB and HEX codes.
Click to expand...
.....


//flexes neck and cracks knuckles


Finally, my education pays off!
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 3 (members: 0, guests: 3)
Back
Top