• 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.
Woebegone said:
Lyro 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!
Click to expand...
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).
 
Lyro said:
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).
Click to expand...

Oh, so the "['br][/br]" will still work even if inside nobr s? I'll go give it a try! Thanks again!
 
Woebegone said:
Oh, so the "['br][/br]" will still work even if inside nobr s? I'll go give it a try! Thanks again!
Click to expand...
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
 
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]
 
youngkyun youngkyun , 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]
 
Woebegone said:
youngkyun youngkyun , 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]
Click to expand...
It doesn't for me :c
 
Y o u n g j a e said:
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]
Click to expand...
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.

ewolf20 said:
hi Lyro Lyro is there a plug in for notepad++ that allows you to use bbcode and bb+?
Click to expand...
Not to my knowledge, no. I use Markdown syntax highlighting as a close approximation.
 
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!
 
Dragon Slayer Arcos said:
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!
Click to expand...
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.
 
Lyro 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.
 
Woebegone said:
Lyro 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.
Click to expand...
No, this is not possible unfortunately, unless maybe you do some trickery using "inherit" values for the properties in class 2.
 
Lyro said:
No, this is not possible unfortunately, unless maybe you do some trickery using "inherit" values for the properties in class 2.
Click to expand...
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!
 
Lyro 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?
 
Pinesap said:
Lyro 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?
Click to expand...

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

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.
 
Here you go:

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

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]
 
Lyro said:
Here you go:

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

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]
Click to expand...

Ahhh I see! I was getting close, just not quite in the right direction haahh. Thank you!
 
With something like
Code: 
[input class="csginput csgage" type=text maxlength=3][/input]
Are you creating an instance of the "csginput" class named "csgage"?
 
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
75
Ness_eb
Ness_eb
Lumpkinz11
Help SOLVED: ISO Simple BBCode Character Sheet
Replies
2
Views
229
Idea
Idea
Back
Top