What's new

Tutorial RpNation - BBCode+ Guide

AgWordSmith

A Freckled Encounter
Moderator
Two questions!
One: Is there a way to remove highlighting/selecting Text with classes or divs?
Like when Clicking something multiple times it will highlight the text but That's kind of distracting and annoying when trying to click a clickable div
EX:
A NAME

Question 2:
Is there any way to change text on hover?
Like using this?
I shall

I was able to change it with script like this:
What do you do?

but I was wondering if there's any possible way to get it to fade into fade second set of text while hovering instead of the instant switch?
Code:
[nobr]
[class=button]
background-color: black;
Border-radius:5px;
margin: 10px auto;
text-align: center;
width: 200px;
padding:10px;
color:white;
Font-family:Book Antiqua;
[/class]

[class=ButtonClick]
background-color:steelblue;
Border-radius:5px;
margin: 10px auto;
text-align: center;
width: 200px;
padding:10px;
color:Black;
font-family:Book Antiqua:
[/class]


[Script class=button]
set addedClass 0
[/script]

[Script class=button on=click]
if (eq ${addedClass} 0) (addClass ButtonClick) (removeClass ButtonClick)
if (eq ${addedClass} 0) (setText "A PLACE") (setText "A NAME")
if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0)
[/script]

[div class=button]A NAME[/div][/nobr]

Code:
[nobr][class=Fade]
background-color:Red;
border-radius:5px;
margin: 10px auto;
width:20%;
padding:5px;
text-align:center;
font-family:Courier New;
color:silver;
cursor:pointer;
[/class]

[class name=Fade state=hover]
background-color:silver;
border-radius:5px;
margin: 10px auto;
width:20%;
padding:5px;
text-align:center;
font-family:Courier New;
color:red;
cursor:pointer;
transition: color 0.5s ease-in 0.5s, background-color 0.5s ease-in 0.5s
[/class]
[div class=Fade]I shall[/div]
 [br][/br][/nobr]

Code:
[nobr]
[class=buttonB]
background-color:Purple;
border-radius:5px;
margin: 10px auto;
width:20%;
padding:5px;
text-align:center;
font-family:Courier New;
color:pink;
[/class]

[class=buttonClick]
background-color:pink;
border-radius:5px;
margin: 10px auto;
width:20%;
padding:5px;
text-align:center;
font-family:Courier New;
color:purple;
cursor:pointer;
[/class]

[script class=buttonB on=mouseenter]
setText "Speak to him"
addClass buttonClick
[/script]

[script class=buttonB on=mouseleave]
setText "What do you do?"
removeClass buttonClick
[/script]

[script class=buttoBn on=click]
addClass buttonB
removeClass buttonClick
[/script]
[Div class=buttonB]What do you do?[/div][/nobr]
 

Alteras

The Sleepy One
Moderator
Supporter
Two questions!
One: Is there a way to remove highlighting/selecting Text with classes or divs?
Like when Clicking something multiple times it will highlight the text but That's kind of distracting and annoying when trying to click a clickable div
EX:
A NAME

Question 2:
Is there any way to change text on hover?
Like using this?
I shall

I was able to change it with script like this:
What do you do?

but I was wondering if there's any possible way to get it to fade into fade second set of text while hovering instead of the instant switch?
Code:
[nobr]
[class=button]
background-color: black;
Border-radius:5px;
margin: 10px auto;
text-align: center;
width: 200px;
padding:10px;
color:white;
Font-family:Book Antiqua;
[/class]

[class=ButtonClick]
background-color:steelblue;
Border-radius:5px;
margin: 10px auto;
text-align: center;
width: 200px;
padding:10px;
color:Black;
font-family:Book Antiqua:
[/class]


[Script class=button]
set addedClass 0
[/script]

[Script class=button on=click]
if (eq ${addedClass} 0) (addClass ButtonClick) (removeClass ButtonClick)
if (eq ${addedClass} 0) (setText "A PLACE") (setText "A NAME")
if (eq ${addedClass} 0) (set addedClass 1) (set addedClass 0)
[/script]

[div class=button]A NAME[/div][/nobr]

Code:
[nobr][class=Fade]
background-color:Red;
border-radius:5px;
margin: 10px auto;
width:20%;
padding:5px;
text-align:center;
font-family:Courier New;
color:silver;
cursor:pointer;
[/class]

[class name=Fade state=hover]
background-color:silver;
border-radius:5px;
margin: 10px auto;
width:20%;
padding:5px;
text-align:center;
font-family:Courier New;
color:red;
cursor:pointer;
transition: color 0.5s ease-in 0.5s, background-color 0.5s ease-in 0.5s
[/class]
[div class=Fade]I shall[/div]
 [br][/br][/nobr]

Code:
[nobr]
[class=buttonB]
background-color:Purple;
border-radius:5px;
margin: 10px auto;
width:20%;
padding:5px;
text-align:center;
font-family:Courier New;
color:pink;
[/class]

[class=buttonClick]
background-color:pink;
border-radius:5px;
margin: 10px auto;
width:20%;
padding:5px;
text-align:center;
font-family:Courier New;
color:purple;
cursor:pointer;
[/class]

[script class=buttonB on=mouseenter]
setText "Speak to him"
addClass buttonClick
[/script]

[script class=buttonB on=mouseleave]
setText "What do you do?"
removeClass buttonClick
[/script]

[script class=buttoBn on=click]
addClass buttonB
removeClass buttonClick
[/script]
[Div class=buttonB]What do you do?[/div][/nobr]
2)
Instead of using setText, you can position two div boxes inside it and use fadeIn and fadeOut to hide/show each other using bbscript.
 
Or you could have the second div set to opacity 0 + transitions, then on hover state set to opacity: 1
you'd need two divs, with the hover div nested inside the first div or at least positioned right on top of it
 

AgWordSmith

A Freckled Encounter
Moderator
2)
Instead of using setText, you can position two div boxes inside it and use fadeIn and fadeOut to hide/show each other using bbscript.
uhhh this was all I could manage to do
What do you do?
Speak to Him


Still a bit new to this kind of more complex coding :grinningteeth:
How do I position the divs like how you mentioned?

Code:
[nobr]
[class=buttonB]
background-color:Purple;
border-radius:5px;
margin: 10px auto;
width:20%;
padding:5px;
text-align:center;
font-family:Courier New;
color:pink;
[/class]

[class=buttonClick]
background-color:pink;
border-radius:5px;
margin: 10px auto;
width:20%;
padding:5px;
text-align:center;
font-family:Courier New;
color:purple;
cursor:pointer;
[/class]

[class=hidden]
display:none;
[/class]

[script class=buttonB on=mouseenter]
fadeIn 0500 buttonClick
[/script]

[script class=buttonB on=mouseleave]
fadeOut 0500 buttonClick
[/script]
[Div class=buttonB]What do you do?[/div][Div class="buttonClick hidden"]Speak to Him[/div][/nobr]
edit: here's the code
 
Last edited:

Alteras

The Sleepy One
Moderator
Supporter


What do you do?
Speak to Him


you'd use position: absolute; and position it using margin or top: or transform.

Code:
[nobr]
[class=buttonB]
background-color:Purple;
border-radius:5px;
padding:5px;
text-align:center;
font-family:Courier New;
color:pink;
position: relative; 
margin: 10px auto; 
width: 20%;
[/class]

[class=buttonClick]
background-color:pink;
border-radius:5px;
padding:5px;
text-align:center;
font-family:Courier New;
color:purple;
cursor:pointer;
position: absolute;
top:0;
left: 0;
width: 100%;
box-sizing: border-box;
[/class]

[class=hidden]
display:none;
[/class]

[script class=buttonB on=mouseenter]
fadeIn 0500 buttonClick
[/script]

[script class=buttonB on=mouseleave]
fadeOut 0500 buttonClick
[/script]
[/nobr]

[div class=buttonB]What do you do?[Div class="buttonClick hidden"]Speak to Him[/div][/div]
 
Code:
[nobr]
[class name=container]
border-radius: 10px;
margin: 10px auto;
position: relative;
text-align: center;
z-index: 1;
background: purple;
text-align:center;
font-family:Courier New;
color:silver;
cursor:pointer;
width: 200px;
padding: 5px;
overflow: hidden;
[/class]

[class name=hovercontainer]
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
width: 200px;
background: silver;
color: purple;
padding: 5px;
opacity: 0;
cursor:pointer;
-webkit-transition: all .5s ease;
transition: all .5s ease;
[/class]

[class name=hovercontainer state=hover]
opacity: 1;
[/class]

[div class=container]
[div class=hovercontainer]rawr[/div]
help
[/div]
[/nobr]

rawr
help
 

AgWordSmith

A Freckled Encounter
Moderator


What do you do?
Speak to Him


you'd use position: absolute; and position it using margin or top: or transform.

Code:
[nobr]
[class=buttonB]
background-color:Purple;
border-radius:5px;
padding:5px;
text-align:center;
font-family:Courier New;
color:pink;
position: relative;
margin: 10px auto;
width: 20%;
[/class]

[class=buttonClick]
background-color:pink;
border-radius:5px;
padding:5px;
text-align:center;
font-family:Courier New;
color:purple;
cursor:pointer;
position: absolute;
top:0;
left: 0;
width: 100%;
box-sizing: border-box;
[/class]

[class=hidden]
display:none;
[/class]

[script class=buttonB on=mouseenter]
fadeIn 0500 buttonClick
[/script]

[script class=buttonB on=mouseleave]
fadeOut 0500 buttonClick
[/script]
[/nobr]

[div class=buttonB]What do you do?[Div class="buttonClick hidden"]Speak to Him[/div][/div]
Ohhh I see
Thank you so much! I have been trying to figure this out all day XD
I super appreciate it
and I loved your animation CSS tutorial!
Code:
[nobr]
[class name=container]
border-radius: 10px;
margin: 10px auto;
position: relative;
text-align: center;
z-index: 1;
background: purple;
text-align:center;
font-family:Courier New;
color:silver;
cursor:pointer;
width: 200px;
padding: 5px;
overflow: hidden;
[/class]

[class name=hovercontainer]
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
width: 200px;
background: silver;
color: purple;
padding: 5px;
opacity: 0;
cursor:pointer;
-webkit-transition: all .5s ease;
transition: all .5s ease;
[/class]

[class name=hovercontainer state=hover]
opacity: 1;
[/class]

[div class=container]
[div class=hovercontainer]rawr[/div]
help
[/div]
[/nobr]

rawr
help
Anf thank you too! I must say i was confused by your first response but after seeing it in action I understand what you meant
Thank you a bunch too! It's always usefull to know how to do things in different ways !
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
i love the codes themselves but i don't know how to use them could you tell me how i would use BBcode?
Do you mean BBCode or BBCode+? This thread is exclusively for BBCode+ questions - if you have general BBCode questions, I recommend you create a thread with your specific questions so that people can help.
 

One Mean Ghost

Your Ghost Host from the West Coast
Let's hope I can ask this question in a way that makes sense.

Let's say I have several tabs made using the BBCode+ method, but each tab is quite lengthy so I made the size of the tabs fixed so that it becomes a scroll box when necessary. The only problem I have is that when I try to switch tabs, rather than starting at the top of the next tab, it starts at the equivalent spot in the new tab.

So the question is this: Is there a way so that when a new tab is selected, it automatically scrolls back to the top of the selected tab?

I have tried using anchors, however that causes a very quick jolt and moves the entire post up such that the top of it is hidden by the site banner. It does succeed in "scrolling" back to the top, however, that requires an anchor point somewhere in the post. Both functionally and aesthetically, it would be nice if I could figure out a way to do a smooth effect that changes the tab and scrolls the tab back to the top whenever I switch tabs.


EDIT::: So I resolved part of the issue due to some faulty encapsulation causing problems. I fixed the issue of new tabs starting in the same scroll position as the old tab. The issue now is that when I go back to the old tab, it picks up where it left off at the same spot. I'd still like to find a nice way to have it start the text back at the top again, if possible.
 
Last edited:

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
Let's hope I can ask this question in a way that makes sense.

Let's say I have several tabs made using the BBCode+ method, but each tab is quite lengthy so I made the size of the tabs fixed so that it becomes a scroll box when necessary. The only problem I have is that when I try to switch tabs, rather than starting at the top of the next tab, it starts at the equivalent spot in the new tab.

So the question is this: Is there a way so that when a new tab is selected, it automatically scrolls back to the top of the selected tab?

I have tried using anchors, however that causes a very quick jolt and moves the entire post up such that the top of it is hidden by the site banner. It does succeed in "scrolling" back to the top, however, that requires an anchor point somewhere in the post. Both functionally and aesthetically, it would be nice if I could figure out a way to do a smooth effect that changes the tab and scrolls the tab back to the top whenever I switch tabs.


EDIT::: So I resolved part of the issue due to some faulty encapsulation causing problems. I fixed the issue of new tabs starting in the same scroll position as the old tab. The issue now is that when I go back to the old tab, it picks up where it left off at the same spot. I'd still like to find a nice way to have it start the text back at the top again, if possible.
I haven't tried this, but one way might be to alter the CSS more (change the height for instance on a tab change) or even change the text - anything that might force the browser to forget where the scroll was.
 
@Lyro I was wondering if maybe you could possibly make a basic RNG that allows people to input minimum number and max number that then posts the result into the reply when someone hits submit to their post with the visible result text something along the lines of: Number Generated:
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
@Lyro I was wondering if maybe you could possibly make a basic RNG that allows people to input minimum number and max number that then posts the result into the reply when someone hits submit to their post with the visible result text something along the lines of: Number Generated:
That is rather outside the scope of BBCode+ unfortunately.
 

ViAdvena

Schrödinger's cat
Is there a way to pass a variable into post functions? I tried to simplify the tab script into
Code:
[script class=tab on=click]
    hide tabsContent
    set currentTab (getText)
    show ${currentTab}
[/script]
But I got the error Line 3: Error in function parameter 1: Invalid variable name: can only contain letters, numbers and underscores
 
@ViAdvena are you trying to do something like this?

derp
--


Code:
[nobr][div class=tab style="background: pink; cursor: pointer;"]derp[/div]
[div class=show]--[/div]

[script class=tab on=click]
    hide tabsContent
    set currentTab (getText)
    setText ${currentTab} show
[/script][/nobr]
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
Is there a way to pass a variable into post functions? I tried to simplify the tab script into
Code:
[script class=tab on=click]
    hide tabsContent
    set currentTab (getText)
    show ${currentTab}
[/script]
But I got the error Line 3: Error in function parameter 1: Invalid variable name: can only contain letters, numbers and underscores
That error message is actually somewhat misleading, but what is happening is that "show" expects an identifier string, not a variable. I aim to fix this in the next release of BBCode+. Right now, though, you'll have to do more manual stuff.
 

taliaangeni

You're going to die in there.
Code:
[div= width: 260px; height: 450px; background-color: #303030; border: 4px solid #898989; padding: 2px; float: left;][div=width: 250px; height: 440px; padding: 5px; background-color: #303030; color: #340934;][div=border: 3px black solid; width: 245px; height: 200px; margin: auto;][img]https://i.imgur.com/IMZb3EG.gif[/img][/div][div= width: calc(98%  - 10px); height: 210px; overflow: hidden; padding: 10px;][div=width: 105%; padding-right: 150px; height: 100%; overflow-y: scroll;][b]Name:[/b]
[Indent][color=#afafaf]Rawly Willis[/color][/indent]
[b]Age[/b]
[Indent][color=#afafaf]21[/color][/indent]
[b]Gender[/b]
[Indent][color=#afafaf]Male[/color][/indent]
[b]Sexuality[/b]
[Indent][color=#afafaf]Gay (Not Out)[/color][/indent]
[b]Position[/b]
[Indent][color=#afafaf]Keyboard[/color][/indent]
[b]Eye/Hair Color:[/b]
[Indent][color=#afafaf]Brown[/color][/indent]
[b]Height/Weight:	[/b]
[Indent][color=#afafaf]6'0" | 155lbs[/color][/indent]
[b]Body Type: [/b]
[Indent][color=#afafaf]Tall/Thin[/color][/indent]
[b]Face Claim: [/b]
[Indent][color=#afafaf]Samuel Larsen[/color][/indent]
[b]Other[/b]
[Indent][color=#afafaf]Nose ring, Tattoos: [url=https://i.imgur.com/0QmPUHi.jpg]1[/url], [url=https://i.imgur.com/Gzz8zn0.jpg]2[/url][/color][/indent]
[/div][/div][/div][/div][div= width: 450px; height: 450px; background-color: #303030; border: 4px solid #898989; padding: 2px; float: left;  color: #340934;][div=width: 440px; height: 260px; padding: 5px; background-color: #303030;][div= width: calc(98%  - 10px); height: 260px; overflow: hidden; padding: 10px;][div=width: 105%; padding-right: 150px; height: 100%; overflow-y: scroll;][nobr]
    [class=tabs]
        background-color: #541354;
        border-radius: 5px;
        box-shadow: 0px 0px 5px #880085;
        box-sizing: border-box;
        color: #ffe4fd;
        font-size: 15px;
        font-weight: bold;
        line-height: 1;
        margin: 20px auto;
        min-width: 280px;
        text-align: center;
        width: 100%;

    [/class]
    
    [class=tab]
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        padding: 10px 0;
        width: 22%;
    [/class]

    [class name=tab state=hover]
        background-color: #a22ab7;
    [/class]
    
    [script class=tab on=click]
        hide tabsContent
        set currentTab (getText)
        if (eq ${currentTab} Tidbits) (show tabsContentTidbits)
        if (eq ${currentTab} Personality) (show tabsContentPersonality)
        if (eq ${currentTab} Background) (show tabsContentBackground)
        if (eq ${currentTab} Relationships) (show tabsContentRelationships)
    [/script]
    
    [div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Tidbits[/div][div class=tab]Personality[/div][div class=tab]Background[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Relationships[/div][/div]
    
    [div class="tabsContent tabsContentTidbits"][b]Likes: [/b]
[Indent][color=#afafaf]Rain, text messaging, palindromes, reptiles, horror movies.[/color][/indent]
[b]Dislikes:[/b]
[Indent][color=#afafaf]Materialistic people, snow, rom-coms.[/color][/indent]
[b]Strengths: [/b]
[Indent][color=#afafaf]Motivated, open-minded, creative. [/color][/indent]
[b]Weaknesses:[/b]
[Indent][color=#afafaf]Impulsive, introvert, stubborn. [/color][/indent]
[b]Habits/Quirks: [/b]
[Indent][color=#afafaf]Constantly on social media. Has to cover his mouth when he lies because he smiles. [/color][/indent]
[b]Theme Song: [/b]
[MEDIA=youtube]TRd0_ZQbHxg[/MEDIA][/div]
    
[div class="tabsContent tabsContentPersonality" style="display: none;"][color=#afafaf]Rawly is very dedicated to his music. He's motivated to be successful in as many areas of his life as possible. At a young age he showed an aptitude for being creative, not only in music. He's a bit of an introvert and won't be conversational to anyone outside of his group. It's hard for him to be vocal with fans and he really has to push himself to not seem like an asshole. He can be impulsive and has been known to go on random drives for hours. It's very hard to change his mind once he's made it up. He's stubborn that way.[/color][/div]
    
[div class="tabsContent tabsContentBackground" style="display: none;"][color=#afafaf]Rawly was born into a very musically inclined family. To outsiders his upbringing would be considered weird. His mother and father were hippies in every since of the word and him and his sister, Darby, were raised with those values. His father worked on a large farm and mother worked as a professional blogger on all things clean eating and hippy related. Eating processed foods was a big no-no. The family was all about clean eating and grew their own vegetables and fruits while getting their meat and other items from farmers. Staying at friends houses he would consume processed foods and feel a bit guilty. 
His parents were very open and he and Darby knew about sex, orgasms, birth control, abortions, marijuana, LSD, and mushrooms at the tender age of ten. In elementary, Rawly got in trouble for telling his friends Santa Clause wasn't real. Neither was the tooth fairy. His mother taught him to always tell the truth. Even though his family is very open, even though he was raised in a laid back atmosphere, Rawly hasn't learned to break out of his introvert bubble. 
 
When he was fifteen, the family went on a vacation to Boulder, CO. It was that vacation when he finally locked lips with someone. It happened to be a guy. [/color][/div]

[div class="tabsContent tabsContentRelationships" style="display: none;"]Relationships.[/div]
[/nobr]
[/div][/div][div=border: 3px black solid; width: 400px; height: 158px; margin: auto;][img]https://im.ezgif.com/tmp/ezgif-1-019375d410.gif[/img][/div]
[/div][/div]
Name:
Rawly Willis
Age
21
Gender
Male
Sexuality
Gay (Not Out)
Position
Keyboard
Eye/Hair Color:
Brown
Height/Weight:
6'0" | 155lbs
Body Type:
Tall/Thin
Face Claim:
Samuel Larsen
Other
Nose ring, Tattoos: 1, 2
Tidbits
Personality
Background
Relationships
Likes:
Rain, text messaging, palindromes, reptiles, horror movies.
Dislikes:
Materialistic people, snow, rom-coms.
Strengths:
Motivated, open-minded, creative.
Weaknesses:
Impulsive, introvert, stubborn.
Habits/Quirks:
Constantly on social media. Has to cover his mouth when he lies because he smiles.
Theme Song:


Under background there are supposed to be three paragraphs but it's one big chunk of text. How do I fix?
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
Code:
[div= width: 260px; height: 450px; background-color: #303030; border: 4px solid #898989; padding: 2px; float: left;][div=width: 250px; height: 440px; padding: 5px; background-color: #303030; color: #340934;][div=border: 3px black solid; width: 245px; height: 200px; margin: auto;][img]https://i.imgur.com/IMZb3EG.gif[/img][/div][div= width: calc(98%  - 10px); height: 210px; overflow: hidden; padding: 10px;][div=width: 105%; padding-right: 150px; height: 100%; overflow-y: scroll;][b]Name:[/b]
[Indent][color=#afafaf]Rawly Willis[/color][/indent]
[b]Age[/b]
[Indent][color=#afafaf]21[/color][/indent]
[b]Gender[/b]
[Indent][color=#afafaf]Male[/color][/indent]
[b]Sexuality[/b]
[Indent][color=#afafaf]Gay (Not Out)[/color][/indent]
[b]Position[/b]
[Indent][color=#afafaf]Keyboard[/color][/indent]
[b]Eye/Hair Color:[/b]
[Indent][color=#afafaf]Brown[/color][/indent]
[b]Height/Weight:	[/b]
[Indent][color=#afafaf]6'0" | 155lbs[/color][/indent]
[b]Body Type: [/b]
[Indent][color=#afafaf]Tall/Thin[/color][/indent]
[b]Face Claim: [/b]
[Indent][color=#afafaf]Samuel Larsen[/color][/indent]
[b]Other[/b]
[Indent][color=#afafaf]Nose ring, Tattoos: [url=https://i.imgur.com/0QmPUHi.jpg]1[/url], [url=https://i.imgur.com/Gzz8zn0.jpg]2[/url][/color][/indent]
[/div][/div][/div][/div][div= width: 450px; height: 450px; background-color: #303030; border: 4px solid #898989; padding: 2px; float: left;  color: #340934;][div=width: 440px; height: 260px; padding: 5px; background-color: #303030;][div= width: calc(98%  - 10px); height: 260px; overflow: hidden; padding: 10px;][div=width: 105%; padding-right: 150px; height: 100%; overflow-y: scroll;][nobr]
    [class=tabs]
        background-color: #541354;
        border-radius: 5px;
        box-shadow: 0px 0px 5px #880085;
        box-sizing: border-box;
        color: #ffe4fd;
        font-size: 15px;
        font-weight: bold;
        line-height: 1;
        margin: 20px auto;
        min-width: 280px;
        text-align: center;
        width: 100%;

    [/class]
    
    [class=tab]
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        padding: 10px 0;
        width: 22%;
    [/class]

    [class name=tab state=hover]
        background-color: #a22ab7;
    [/class]
    
    [script class=tab on=click]
        hide tabsContent
        set currentTab (getText)
        if (eq ${currentTab} Tidbits) (show tabsContentTidbits)
        if (eq ${currentTab} Personality) (show tabsContentPersonality)
        if (eq ${currentTab} Background) (show tabsContentBackground)
        if (eq ${currentTab} Relationships) (show tabsContentRelationships)
    [/script]
    
    [div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Tidbits[/div][div class=tab]Personality[/div][div class=tab]Background[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Relationships[/div][/div]
    
    [div class="tabsContent tabsContentTidbits"][b]Likes: [/b]
[Indent][color=#afafaf]Rain, text messaging, palindromes, reptiles, horror movies.[/color][/indent]
[b]Dislikes:[/b]
[Indent][color=#afafaf]Materialistic people, snow, rom-coms.[/color][/indent]
[b]Strengths: [/b]
[Indent][color=#afafaf]Motivated, open-minded, creative. [/color][/indent]
[b]Weaknesses:[/b]
[Indent][color=#afafaf]Impulsive, introvert, stubborn. [/color][/indent]
[b]Habits/Quirks: [/b]
[Indent][color=#afafaf]Constantly on social media. Has to cover his mouth when he lies because he smiles. [/color][/indent]
[b]Theme Song: [/b]
[MEDIA=youtube]TRd0_ZQbHxg[/MEDIA][/div]
    
[div class="tabsContent tabsContentPersonality" style="display: none;"][color=#afafaf]Rawly is very dedicated to his music. He's motivated to be successful in as many areas of his life as possible. At a young age he showed an aptitude for being creative, not only in music. He's a bit of an introvert and won't be conversational to anyone outside of his group. It's hard for him to be vocal with fans and he really has to push himself to not seem like an asshole. He can be impulsive and has been known to go on random drives for hours. It's very hard to change his mind once he's made it up. He's stubborn that way.[/color][/div]
    
[div class="tabsContent tabsContentBackground" style="display: none;"][color=#afafaf]Rawly was born into a very musically inclined family. To outsiders his upbringing would be considered weird. His mother and father were hippies in every since of the word and him and his sister, Darby, were raised with those values. His father worked on a large farm and mother worked as a professional blogger on all things clean eating and hippy related. Eating processed foods was a big no-no. The family was all about clean eating and grew their own vegetables and fruits while getting their meat and other items from farmers. Staying at friends houses he would consume processed foods and feel a bit guilty. 
His parents were very open and he and Darby knew about sex, orgasms, birth control, abortions, marijuana, LSD, and mushrooms at the tender age of ten. In elementary, Rawly got in trouble for telling his friends Santa Clause wasn't real. Neither was the tooth fairy. His mother taught him to always tell the truth. Even though his family is very open, even though he was raised in a laid back atmosphere, Rawly hasn't learned to break out of his introvert bubble. 
 
When he was fifteen, the family went on a vacation to Boulder, CO. It was that vacation when he finally locked lips with someone. It happened to be a guy. [/color][/div]

[div class="tabsContent tabsContentRelationships" style="display: none;"]Relationships.[/div]
[/nobr]
[/div][/div][div=border: 3px black solid; width: 400px; height: 158px; margin: auto;][img]https://im.ezgif.com/tmp/ezgif-1-019375d410.gif[/img][/div]
[/div][/div]
Name:
Rawly Willis
Age
21
Gender
Male
Sexuality
Gay (Not Out)
Position
Keyboard
Eye/Hair Color:
Brown
Height/Weight:
6'0" | 155lbs
Body Type:
Tall/Thin
Face Claim:
Samuel Larsen
Other
Nose ring, Tattoos: 1, 2
Tidbits
Personality
Background
Relationships
Likes:
Rain, text messaging, palindromes, reptiles, horror movies.
Dislikes:
Materialistic people, snow, rom-coms.
Strengths:
Motivated, open-minded, creative.
Weaknesses:
Impulsive, introvert, stubborn.
Habits/Quirks:
Constantly on social media. Has to cover his mouth when he lies because he smiles.
Theme Song:


Under background there are supposed to be three paragraphs but it's one big chunk of text. How do I fix?
You need to either stop using nobr, or insert [br][/br] where the breaks should be.
 

Idea

The Pun Tyrant The Gif Hydra
Hi @Lyro if you're still helping out here! I had a question if that's alright.

So I am planning to start a quest RP and i thought it would be fun to have option in which you could click on the option's button and some text would appear detailed further information about that particular choice. So, my questions would be:
1. How and if I could do that with BBcode+

2. How one can alter the appearance of buttons, and to what extent.


I've googled around for HTML and CSS coding which as I understood were partially in the base for this coding, but I was unable to find a way to adapt the options there into this.

Thank you for your attention if nothing else! I hope ya have a great day!
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
Hi @Lyro if you're still helping out here! I had a question if that's alright.

So I am planning to start a quest RP and i thought it would be fun to have option in which you could click on the option's button and some text would appear detailed further information about that particular choice. So, my questions would be:
1. How and if I could do that with BBcode+

2. How one can alter the appearance of buttons, and to what extent.

Thank you for your attention if nothing else! I hope ya have a great day!
Hi Idea. Seems like a cool idea.

1. It's definitely possible. To do so you would create a div or button which, on click, either calls "setText" to change the text or, for more advanced formatting options, hides the current text block with "hide" and then shows the next block in the sequence with "show".

2. The appearance of buttons is customizable just like divs. You can assign them a class and say what it looks like when clicked on, when hovered over, etc..
 

Idea

The Pun Tyrant The Gif Hydra
1. It's definitely possible. To do so you would create a div or button which, on click, either calls "setText" to change the text or, for more advanced formatting options, hides the current text block with "hide" and then shows the next block in the sequence with "show".

2. The appearance of buttons is customizable just like divs. You can assign them a class and say what it looks like when clicked on, when hovered over, etc..
I see. Those were within what I suspected I should do, however due to vocabulary difficulties I'm having a little trouble following the guide to do this. Or perhaps it's not there at all and I've been testing in vain. Either way, this is my first time working with this extention of BBcode, so I can't quite tell what everything is supposed to be like or what is really causing errors, or even how I should go about doing what I want to do at all... Do you think perhaps you could have the kindness to lend me a hand at getting started organizing that code?
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
I see. Those were within what I suspected I should do, however due to vocabulary difficulties I'm having a little trouble following the guide to do this. Or perhaps it's not there at all and I've been testing in vain. Either way, this is my first time working with this extention of BBcode, so I can't quite tell what everything is supposed to be like or what is really causing errors, or even how I should go about doing what I want to do at all... Do you think perhaps you could have the kindness to lend me a hand at getting started organizing that code?
Sure, let's talk in Discord, it'll be faster.
 

Users Who Are Viewing This Thread (Users: 2, Guests: 1)

Top