What's new

Tutorial RpNation - BBCode+ Guide

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#51
@Lyro , quick question about tabs: I made use of your tab coding on mylore page. I managed to make it functional and all, but when I started moving from tab to tab, it kept displacing itself. It gets higher from tab 1 to tab 10. I tried to manually code it out and it seemed to work at first but I learned that the way it is right now is still not a good fix since in other screens, I can see the displacement still happening.

Is there anyway to make the tabContent to be properly marginalized without manually doing so? Thanks in advance!
This is because you are inserting manual breaks everywhere. Every time you write a new line, by default, the editor adds an HTML "br" (break) tag. The solution is either to use a combination of [nobr][/nobr] (no breaks) and [br][/br] (insert a manual break), or to make sure your content divs end and start on the same line (as in, you write something like [/div][div class="tabsContent Kairo" style="display: none;"], all stuck together like that).
 
#52
This is because you are inserting manual breaks everywhere. Every time you write a new line, by default, the editor adds an HTML "br" (break) tag. The solution is either to use a combination of [nobr][/nobr] (no breaks) and [br][/br] (insert a manual break), or to make sure your content divs end and start on the same line (as in, you write something like [/div][div class="tabsContent Kairo" style="display: none;"], all stuck together like that).
Oh, so the "['br][/br]" will still work even if inside nobr s? I'll go give it a try! Thanks again!
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#53
Oh, so the "['br][/br]" will still work even if inside nobr s? I'll go give it a try! Thanks again!
Yep, that's the idea. The downside is you'll need to insert a lot of them. Alternatively, you can surround every paragraph in a classed div (I call mine p for paragraph) with a margin on the bottom and a small text indent. Since DIVs display as blocks, this will automatically insert a line break. Alternatively alternatively, you can check out the white-space property for the content DIVs, to make sure the content inside wraps normally: CSS white-space property
 
#54
I've been playing with the new tabs (really neat btw) but I can't get my scroll box in the center of the tab, is there an easier way to make the tab scroll?

Code:
[column=span4][centerblock=60]
[nobr]
    [class=tabs]
        background-color: #DCDCDC;
        border-radius: 2px;
        box-shadow: 0px 0px 1px #DCDCDC;
        box-sizing: border-box;
        color: black;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        margin: 20px auto;
        min-width: 250px;
        text-align: center;
        width: 30%;
    [/class]
    
    [class=tab]
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        padding: 2px 0;
        width: 33%;
    [/class]

    [class name=tab state=hover]
        background-color: #DCDCDC;
    [/class]
    
    [script class=tab on=click]
        hide tabsContent
        set currentTab (getText)
        if (eq ${currentTab} Nothing) (show tabsContentNothing)
        if (eq ${currentTab} Without) (show tabsContentWithout)
        if (eq ${currentTab} You) (show tabsContentYou)
    [/script]
    
    [div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Nothing[/div][div class=tab]Without[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]You[/div][/div]
    
    [div class="tabsContent tabsContentNothing"][center][color=black]beq.[/color][/center][color=black][/color][/div][color=black][center]
    
    [div class="tabsContent tabsContentWithout"]vavsbba[/div]
    
    [div class="tabsContent tabsContentYou"][div=width: 300px; height:300px; box-sizing: border-box; overflow: hidden; background-color: #fdf9f7; padding: 10px;][div=width: 100%; height: 100%; overflow-y: scroll; padding-center: 150px;]bwbbvFFW[/div][/div] 

[/div]
[/center][/color][/nobr][/centerblock][/column]
 
#55
@Y o u n g j a e , I don't know if it produces the same result on your screen but this seemed to do the trick for me:

[column=span4][centerblock=60]
[nobr]
[class=tabs]
background-color: #DCDCDC;
border-radius: 2px;
box-shadow: 0px 0px 1px #DCDCDC;
box-sizing: border-box;
color: black;
font-size: 18px;
font-weight: bold;
line-height: 1;
margin: 20px auto;
min-width: 250px;
text-align: center;
width: 30%;
[/class]

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

[class name=tab state=hover]
background-color: #DCDCDC;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Nothing) (show tabsContentNothing)
if (eq ${currentTab} Without) (show tabsContentWithout)
if (eq ${currentTab} You) (show tabsContentYou)
[/script]

[div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Nothing[/div][div class=tab]Without[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]You[/div][/div]

[div class="tabsContent tabsContentNothing"][center][color=black]beq.[/color][/center][color=black][/color][/div][color=black][center]

[div class="tabsContent tabsContentWithout"]vavsbba[/div]

[div class="tabsContent tabsContentYou"][div=width: 300px; height:300px; box-sizing:border-box; overflow: hidden; background-color: #fdf9f7; padding: 10px; margin-left:185px;][div=width: 100%; height: 100%; overflow-y: scroll; padding-center: 150px; ]bwbbvFFW[/div][/div]

[/div]
[/center][/color][/nobr][/centerblock][/column]
 
#56
@Y o u n g j a e , I don't know if it produces the same result on your screen but this seemed to do the trick for me:

[column=span4][centerblock=60]
[nobr]
[class=tabs]
background-color: #DCDCDC;
border-radius: 2px;
box-shadow: 0px 0px 1px #DCDCDC;
box-sizing: border-box;
color: black;
font-size: 18px;
font-weight: bold;
line-height: 1;
margin: 20px auto;
min-width: 250px;
text-align: center;
width: 30%;
[/class]

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

[class name=tab state=hover]
background-color: #DCDCDC;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Nothing) (show tabsContentNothing)
if (eq ${currentTab} Without) (show tabsContentWithout)
if (eq ${currentTab} You) (show tabsContentYou)
[/script]

[div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Nothing[/div][div class=tab]Without[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]You[/div][/div]

[div class="tabsContent tabsContentNothing"][center][color=black]beq.[/color][/center][color=black][/color][/div][color=black][center]

[div class="tabsContent tabsContentWithout"]vavsbba[/div]

[div class="tabsContent tabsContentYou"][div=width: 300px; height:300px; box-sizing:border-box; overflow: hidden; background-color: #fdf9f7; padding: 10px; margin-left:185px;][div=width: 100%; height: 100%; overflow-y: scroll; padding-center: 150px; ]bwbbvFFW[/div][/div]

[/div]
[/center][/color][/nobr][/centerblock][/column]
It doesn't for me :c
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#58
I've been playing with the new tabs (really neat btw) but I can't get my scroll box in the center of the tab, is there an easier way to make the tab scroll?

Code:
[column=span4][centerblock=60]
[nobr]
    [class=tabs]
        background-color: #DCDCDC;
        border-radius: 2px;
        box-shadow: 0px 0px 1px #DCDCDC;
        box-sizing: border-box;
        color: black;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        margin: 20px auto;
        min-width: 250px;
        text-align: center;
        width: 30%;
    [/class]
    
    [class=tab]
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        padding: 2px 0;
        width: 33%;
    [/class]

    [class name=tab state=hover]
        background-color: #DCDCDC;
    [/class]
    
    [script class=tab on=click]
        hide tabsContent
        set currentTab (getText)
        if (eq ${currentTab} Nothing) (show tabsContentNothing)
        if (eq ${currentTab} Without) (show tabsContentWithout)
        if (eq ${currentTab} You) (show tabsContentYou)
    [/script]
    
    [div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Nothing[/div][div class=tab]Without[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]You[/div][/div]
    
    [div class="tabsContent tabsContentNothing"][center][color=black]beq.[/color][/center][color=black][/color][/div][color=black][center]
    
    [div class="tabsContent tabsContentWithout"]vavsbba[/div]
    
    [div class="tabsContent tabsContentYou"][div=width: 300px; height:300px; box-sizing: border-box; overflow: hidden; background-color: #fdf9f7; padding: 10px;][div=width: 100%; height: 100%; overflow-y: scroll; padding-center: 150px;]bwbbvFFW[/div][/div] 

[/div]
[/center][/color][/nobr][/centerblock][/column]
Just add a margin: 0 auto; to the DIV with the fix width and height. This isn't really a BBCode+ question, though, as it's pure CSS.

hi @Lyro is there a plug in for notepad++ that allows you to use bbcode and bb+?
Not to my knowledge, no. I use Markdown syntax highlighting as a close approximation.
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#60
How would you add a field in the CSG for an image url that would embed the image in the skeleton. Also with a height restrict would be great!
You would have to add an input field for the image URL, then alter the template code to add a height restrict containing an image which in turn contains a DIV whose text you can set via a script to the inputted image URL. Take a look at the other parameters to see how they are embedded.
 
#63
@Lyro , is it possible to insert a class within a class when defining it? Example:

[class=1]
property;
[/class]

[class=2]
property;
[/class]

[class name=1 state=hover]
change both class1 and class 2 properties here.
[/class]


Goal: Let's pretend that class 1 is a container and class 2 is a content. Whenever I hover on class 1, class 2 properties are also changed.
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#64
@Lyro , is it possible to insert a class within a class when defining it? Example:

[class=1]
property;
[/class]

[class=2]
property;
[/class]

[class name=1 state=hover]
change both class1 and class 2 properties here.
[/class]


Goal: Let's pretend that class 1 is a container and class 2 is a content. Whenever I hover on class 1, class 2 properties are also changed.
No, this is not possible unfortunately, unless maybe you do some trickery using "inherit" values for the properties in class 2.
 
#65
No, this is not possible unfortunately, unless maybe you do some trickery using "inherit" values for the properties in class 2.
Yeah, that's what I actually did, I played with z:indexes and it seemed to fire the intended effect that I wanted but the interaction goes clunky for the contents that follow afterwards. I'll try to play around a bit ,and ask for your advice if I can't find the proper work around.

Thanks again!
 

Hoax

Professional Angst Machine
#66
@Lyro
Figured it'd be better to ask you here and not in the comments: I saw your example on changing text color when clicked on, but I can't figure out how to revert the color back if one clicks on something else?
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#67
@Lyro
Figured it'd be better to ask you here and not in the comments: I saw your example on changing text color when clicked on, but I can't figure out how to revert the color back if one clicks on something else?
You would have to make a call to removeClass for all elements of the tab class. So if your class is myTab, then on the click script for myTab you would call something like: removeClass activeTab myTab
 

Hoax

Professional Angst Machine
#68
You would have to make a call to removeClass for all elements of the tab class. So if your class is myTab, then on the click script for myTab you would call something like: removeClass activeTab myTab
Hmm... Would you be able to give me a lil' example? Despite my messing around I can only seem to get it one colour or the other.
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
#69
Here you go:

Information
Rules
Characters
Some general information about Generic RP #42.


Code:
[nobr]
    [class=tabs]
        background-color: #509cf7;
        border-radius: 5px;
        box-shadow: 0px 0px 5px #000088;
        box-sizing: border-box;
        color: #e4eeff;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        margin: 20px auto;
        min-width: 350px;
        text-align: center;
        width: 50%;
    [/class]
    
    [class=tab]
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        padding: 10px 0;
        width: 33%;
    [/class]
    
    [class name=activeTab]
        background-color: #657c92;
    [/class]
    
    [class name=tab state=hover]
        background-color: #2b7abb;
    [/class]

    [script class=tab on=click]
        hide tabsContent
        removeClass activeTab tab
        addClass activeTab
        set currentTab (getText)
        if (eq ${currentTab} Information) (show tabsContentInformation)
        if (eq ${currentTab} Rules) (show tabsContentRules)
        if (eq ${currentTab} Characters) (show tabsContentCharacters)
    [/script]
    
    [div class=tabs][div class="tab activeTab" style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Information[/div][div class=tab]Rules[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Characters[/div][/div]
    
    [div class="tabsContent tabsContentInformation"]Some general information about Generic RP #42.[/div]
    
    [div class="tabsContent tabsContentRules" style="display: none;"]A few rules you should follow in this roleplay.[/div]
    
    [div class="tabsContent tabsContentCharacters" style="display: none;"]Create your character using the provided character generator.[/div]
[/nobr]
 

Hoax

Professional Angst Machine
#70
Here you go:

Information
Rules
Characters
Some general information about Generic RP #42.


Code:
[nobr]
    [class=tabs]
        background-color: #509cf7;
        border-radius: 5px;
        box-shadow: 0px 0px 5px #000088;
        box-sizing: border-box;
        color: #e4eeff;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        margin: 20px auto;
        min-width: 350px;
        text-align: center;
        width: 50%;
    [/class]
    
    [class=tab]
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        padding: 10px 0;
        width: 33%;
    [/class]
    
    [class name=activeTab]
        background-color: #657c92;
    [/class]
    
    [class name=tab state=hover]
        background-color: #2b7abb;
    [/class]

    [script class=tab on=click]
        hide tabsContent
        removeClass activeTab tab
        addClass activeTab
        set currentTab (getText)
        if (eq ${currentTab} Information) (show tabsContentInformation)
        if (eq ${currentTab} Rules) (show tabsContentRules)
        if (eq ${currentTab} Characters) (show tabsContentCharacters)
    [/script]
    
    [div class=tabs][div class="tab activeTab" style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Information[/div][div class=tab]Rules[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Characters[/div][/div]
    
    [div class="tabsContent tabsContentInformation"]Some general information about Generic RP #42.[/div]
    
    [div class="tabsContent tabsContentRules" style="display: none;"]A few rules you should follow in this roleplay.[/div]
    
    [div class="tabsContent tabsContentCharacters" style="display: none;"]Create your character using the provided character generator.[/div]
[/nobr]
Ahhh I see! I was getting close, just not quite in the right direction haahh. Thank you!
 
#75
With something like
Code:
[input class="csginput csgage" type=text maxlength=3][/input]
Are you creating an instance of the "csginput" class named "csgage"?
 

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

Top