• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Tutorial RpNation - BBCode+ Guide

Status
Not open for further replies.
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:
[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]
Question 2:
Is there any way to change text on hover?
Like using this? [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]
I was able to change it with script like this:
[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]
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]
 
AgWordSmith said:
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:
[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]
Question 2:
Is there any way to change text on hover?
Like using this? [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]
I was able to change it with script like this:
[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]
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]
Click to expand...

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
 
Alteras said:
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.
Click to expand...

uhhh this was all I could manage to do
[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]

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:
[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]

[div class=buttonB]What do you do?[Div class="buttonClick hidden"]Speak to Him[/div][/div]

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]

[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]
 
Alteras said:
[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]

[div class=buttonB]What do you do?[Div class="buttonClick hidden"]Speak to Him[/div][/div]

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]
Click to expand...
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!
sugarvine said:
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]

[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]
Click to expand...
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 !
 
LittleLazari333 said:
i love the codes themselves but i don't know how to use them could you tell me how i would use BBcode?
Click to expand...
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.
 
oh, my bad im still just learning the code in itself and don't know how to uese either BBCode or 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.
 
Last edited:
One Mean Ghost said:
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.
Click to expand...
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 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:
 
Avatar Arvis said:
Lyro 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:
Click to expand...
That is rather outside the scope of BBCode+ unfortunately.
 
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 ViAdvena are you trying to do something like this?

[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]

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]
 
ViAdvena said:
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
Click to expand...
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.
 
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]
IMZb3EG.gif
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​
[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 class=tab]Personality
[div class=tab]Background
[div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Relationships
[/div] [div class="tabsContent tabsContentTidbits"]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: [/div] [div class="tabsContent tabsContentPersonality" style="display: none;"]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.[/div] [div class="tabsContent tabsContentBackground" style="display: none;"]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. [/div] [div class="tabsContent tabsContentRelationships" style="display: none;"]Relationships.[/div]
[/div][/div]
ezgif-1-019375d410.gif

[/div][/div]

Under background there are supposed to be three paragraphs but it's one big chunk of text. How do I fix?
 
taliaangeni said:
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]
IMZb3EG.gif
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​
[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 class=tab]Personality
[div class=tab]Background
[div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Relationships
[/div] [div class="tabsContent tabsContentTidbits"]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: [/div] [div class="tabsContent tabsContentPersonality" style="display: none;"]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.[/div] [div class="tabsContent tabsContentBackground" style="display: none;"]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. [/div] [div class="tabsContent tabsContentRelationships" style="display: none;"]Relationships.[/div]
[/div][/div]
ezgif-1-019375d410.gif

[/div][/div]

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

You need to either stop using nobr, or insert [br][/br] where the breaks should be.
 
Hi Lyro 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!
 
Idea said:
Hi Lyro 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!
Click to expand...
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..
 
Lyro said:
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..
Click to expand...

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?
 
Idea said:
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?
Click to expand...
Sure, let's talk in Discord, it'll be faster.
 
Status
Not open for further replies.

Users who are viewing this thread

Total: 4 (members: 0, guests: 4)

Similar threads

Noxxy
Help Bbcode tutor?
Replies
2
Views
79
Ness_eb
Ness_eb
Lumpkinz11
Help SOLVED: ISO Simple BBCode Character Sheet
Replies
2
Views
229
Idea
Idea
Back
Top