• 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.
iMeisaki iMeisaki ; you definitely can still use the old bbcode! the bbcode+ just allows users to have more options and special effects for their codes!
 
Hi, how would Implement bbcode+ on the forums in a post, like say for example, do I just find what i wanna use for bbcode+ and paste that in the post box and then post it or how do I do that?
 
Hi, how would Implement bbcode+ on the forums in a post, like say for example, do I just find what i wanna use for bbcode+ and paste that in the post box and then post it or how do I do that?
Yes, that's correct. It works just like regular BBCode. Just turn off the RTE for a better experience (the gear icon in the top-right of the editor).
 
Yes, that's correct. It works just like regular BBCode. Just turn off the RTE for a better experience (the gear icon in the top-right of the editor).
Also, what other inputs are valid besides textarea? can there be stuff like skill point assignment with a limit that is assigned based on a set value for a character sheet?
 
Also, what other inputs are valid besides textarea? can there be stuff like skill point assignment with a limit that is assigned based on a set value for a character sheet?
There are currently only four possible input types: text, password, textarea and button. They match up to the corresponding HTML elements.
For your example, you would need to add some additional logic using BBScript (e.g. by using manually created buttons to increment the value).
 
There are currently only four possible input types: text, password, textarea and button. They match up to the corresponding HTML elements.
For your example, you would need to add some additional logic using BBScript (e.g. by using manually created buttons to increment the value).
okay thank you.
 
Is there any way for me to use an image I have on my computer as a background image?
You'll need to upload the image to a server on the Internet for that. People can't access images on your computer. One possibility is to upload it to your RpN gallery, and reference it from there.

You'll then need to set the background-image property to the URL of your upload image. Regular BBCode is enough for this; you don't need BBCode+.
 
Ah. Okay. Well that's a bit inconvenient. -sigh- Oh well. No helping it then. Thank you!
Inconvenient perhaps, but it would be rather worrisome if anybody could see any file on your computer just like that. :P

Technically, you can reference an image on your computer on some browsers, but only you (and other people who have that image at the exact same location on their computers) will see it, so it's not really practical. Modern browsers typically prohibit this though.
 
Hey people!

Hopefully, this is an easy fix, but any clue as to why I can't get words to go to the next line in my tab here? It should be going to the next line for each thing; name, age, etc., etc. This is my first real attempt at BBCode+ and I literally just adjusted the tab demo to fit my needs so I'm sure I manipulated something I shouldn't have.






[class=tabs] border-radius: 5px; box-sizing: border-box; color: #91a7c6; font-size: 18px; line-height: 1; margin: 20px auto; min-width: 350px; text-align: left; width: 50%; [/class] [class=tab] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; [/class] [class name=tab state=hover] background-color: #657c92; [/class] [script class=tab on=click] hide tabsContent removeClass activeTab tab addClass activeTab set currentTab (getText) if (eq ${currentTab} Colbee) (show tabsContentColbee) if (eq ${currentTab} Biography) (show tabsContentBiography) [/script] [div class=tabs][div class="tab activeTab"]Colbee[/div][div class=tab]Biography[/div][/div] [div class="tabsContent tabsContentColbee"] Name: Colbee (Col) Langston Age: 34 Height: 6'3" Weight: 235lbs Enhancements: Increased Durability/Density of Skin, Muscles, and Bones [/div] [div class="tabsContent tabsContentBiography" style="display: none;"]Create your character using the provided character generator.[/div]
Code:
[centerblock=85]

[row]

[column=span4]

[div=background:url('https://img.timesnownews.com/37998591_504806646656363_5971082891763908608_n_1533996583__rend_1_1.jpg'); background-size:cover; height:500px; width:500px][/div]

[/column]

[column=span2]

[nobr]

    [class=tabs]

        border-radius: 5px;

        box-sizing: border-box;

        color: #91a7c6;

        font-size: 18px;

        line-height: 1;

        margin: 20px auto;

        min-width: 350px;

        text-align: left;

        width: 50%;

    [/class]



    [class=tab]

        box-sizing: border-box;

        cursor: pointer;

        display: inline-block;

        padding: 10px 0;

        width: 33%;

    [/class]



    [class name=tab state=hover]

        background-color: #657c92;

    [/class]



    [script class=tab on=click]

        hide tabsContent

        removeClass activeTab tab

        addClass activeTab

        set currentTab (getText)

        if (eq ${currentTab} Colbee) (show tabsContentColbee)

        if (eq ${currentTab} Biography) (show tabsContentBiography)

    [/script]



    [div class=tabs][div class="tab activeTab"]Colbee[/div][div class=tab]Biography[/div][/div]



    [div class="tabsContent tabsContentColbee"]

Name: Colbee (Col) Langston



Age: 34



Height: 6'3"



Weight: 235lbs



Enhancements: Increased Durability/Density of Skin, Muscles, and Bones

[/div]



    [div class="tabsContent tabsContentBiography" style="display: none;"]Create your character using the provided character generator.[/div]

[/nobr]

[/column]

[/row]

[/centerblock]
 
Hey people!

Hopefully, this is an easy fix, but any clue as to why I can't get words to go to the next line in my tab here? It should be going to the next line for each thing; name, age, etc., etc. This is my first real attempt at BBCode+ and I literally just adjusted the tab demo to fit my needs so I'm sure I manipulated something I shouldn't have.






[class=tabs] border-radius: 5px; box-sizing: border-box; color: #91a7c6; font-size: 18px; line-height: 1; margin: 20px auto; min-width: 350px; text-align: left; width: 50%; [/class] [class=tab] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; [/class] [class name=tab state=hover] background-color: #657c92; [/class] [script class=tab on=click] hide tabsContent removeClass activeTab tab addClass activeTab set currentTab (getText) if (eq ${currentTab} Colbee) (show tabsContentColbee) if (eq ${currentTab} Biography) (show tabsContentBiography) [/script] [div class=tabs][div class="tab activeTab"]Colbee[/div][div class=tab]Biography[/div][/div] [div class="tabsContent tabsContentColbee"] Name: Colbee (Col) Langston Age: 34 Height: 6'3" Weight: 235lbs Enhancements: Increased Durability/Density of Skin, Muscles, and Bones [/div] [div class="tabsContent tabsContentBiography" style="display: none;"]Create your character using the provided character generator.[/div]
Code:
[centerblock=85]

[row]

[column=span4]

[div=background:url('https://img.timesnownews.com/37998591_504806646656363_5971082891763908608_n_1533996583__rend_1_1.jpg'); background-size:cover; height:500px; width:500px][/div]

[/column]

[column=span2]

[nobr]

    [class=tabs]

        border-radius: 5px;

        box-sizing: border-box;

        color: #91a7c6;

        font-size: 18px;

        line-height: 1;

        margin: 20px auto;

        min-width: 350px;

        text-align: left;

        width: 50%;

    [/class]



    [class=tab]

        box-sizing: border-box;

        cursor: pointer;

        display: inline-block;

        padding: 10px 0;

        width: 33%;

    [/class]



    [class name=tab state=hover]

        background-color: #657c92;

    [/class]



    [script class=tab on=click]

        hide tabsContent

        removeClass activeTab tab

        addClass activeTab

        set currentTab (getText)

        if (eq ${currentTab} Colbee) (show tabsContentColbee)

        if (eq ${currentTab} Biography) (show tabsContentBiography)

    [/script]



    [div class=tabs][div class="tab activeTab"]Colbee[/div][div class=tab]Biography[/div][/div]



    [div class="tabsContent tabsContentColbee"]

Name: Colbee (Col) Langston



Age: 34



Height: 6'3"



Weight: 235lbs



Enhancements: Increased Durability/Density of Skin, Muscles, and Bones

[/div]



    [div class="tabsContent tabsContentBiography" style="display: none;"]Create your character using the provided character generator.[/div]

[/nobr]

[/column]

[/row]

[/centerblock]
You need to use [br][/br] to force a line break
 
I tried that between each line, but it didn't work. I can try again, but it just made my text not show up so I am assuming I did it incorrectly.
 
I tried that between each line, but it didn't work. I can try again, but it just made my text not show up so I am assuming I did it incorrectly.
Anything inside the tags will not show up. Just do [br][/br] between each line.
 
Follow up question:

Is there a way to get div boxes to scale with the column span?
 
Code:
[row]
[column=span4]
[div=background:url('https://img.timesnownews.com/37998591_504806646656363_5971082891763908608_n_1533996583__rend_1_1.jpg'); background-size:cover; width: 100%; height: auto][/div]
[/column]
[/row]

I got rid of all the other stuff so I could focus here, but it seems to just remove my image. I'm wondering where I went wrong.
 
Because you don't have any content inside the div, height: auto makes it shrink down to 0
 
I think I'll just have to keep it at a px size because removing the auto is still making it blank and I don't want to put the photo inside the div.
 
Hey, quick question! Is this the same code we’d use in our signature? I’ve been trying to embed a image via Imgur link all morning but it keeps telling me something went wrong and that I should contact an administrator if it continues. I doesn’t cite what the problem is and nothing I do is helping. The image is 900w x 100h if that matters but like I said, it’s an Imgur link—not uploading directly. Is the problem that I’m on mobile? Is there a different code I’m supposed to be using? I’m getting unbelievably frustrated and ready to break down completely.

Thank you!
 
Last edited:
Hey, quick question! Is this the same code we’d use in our signature? I’ve been trying to embed a image via Imgur link all morning but it keeps telling me something went wrong and that I should contact an administrator if it continues. I doesn’t cite what the problem is and nothing I do is helping. The image is 900w x 100h if that matters but like I said, it’s an Imgur link—not uploading directly. Is the problem that I’m on mobile? Is there a different code I’m supposed to be using? I’m getting unbelievably frustrated and ready to break down completely.

Thank you!
hmmm... what is the image link you're using. There is a height limit to the signature, but I don't remember what the height is.
 
Status
Not open for further replies.

Users who are viewing this thread

Back
Top