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

Help New to BBCode+

iMeisaki

mighty lil goon
Alright, so I've played around with regular BBCode and I felt like I had a grasp of what all of this stuff meant.

Now.. :( I've tried to get into BBCode+ but I've hit a wall. What I wanted to do was to make tabs that are stacked onto each other -- like accordions. However, I wanted the content to be on the right/left side of the tabs.

I first tried to but [{br}] after the tab, but it doesn't seem to work. Any ideas on how to achieve this? I'm mainly having trouble with understanding classes and what to put in them, I don't have a simple understanding of it and that's why I'm struggling so hard, there's too many codes and I don't really have a grasp at all, any help would be appreciated.

I've already read the BBCode+ thread multiple times but I'm still very confused by it :/

Thank you.
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
The easiest way to do this would be to approach it with the regular BBCode columns since you're starting out. The columns tag can be used to put content side by side on desktop (not mobile because mobile is a small resolution). Put your tabs in one column and then your tabbed content within the other column.

Tabs in here
Tabbed content here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat, lectus id luctus aliquam, nibh lacus consectetur erat, quis gravida lorem odio at neque. Nullam sit amet nulla at erat posuere volutpat. Praesent a dui neque. Nullam vulputate pretium dictum. Duis felis ligula, tempus quis augue non, hendrerit aliquam ipsum. Etiam dignissim, massa ut luctus pharetra, leo velit sagittis urna, eu tincidunt orci eros non odio. Aenean commodo ante sed blandit ultrices. Sed molestie ac neque nec vestibulum. Donec tempus lectus est, nec laoreet elit imperdiet vitae. Integer auctor lobortis tellus sed sollicitudin. Mauris porta vehicula consequat. Cras imperdiet quam ac turpis laoreet consectetur. In fringilla non nulla auctor consequat.

Code:
[row][column=span2]Tabs in here[/column][column=span6]Tabbed content here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat, lectus id luctus aliquam, nibh lacus consectetur erat, quis gravida lorem odio at neque. Nullam sit amet nulla at erat posuere volutpat. Praesent a dui neque. Nullam vulputate pretium dictum. Duis felis ligula, tempus quis augue non, hendrerit aliquam ipsum. Etiam dignissim, massa ut luctus pharetra, leo velit sagittis urna, eu tincidunt orci eros non odio. Aenean commodo ante sed blandit ultrices. Sed molestie ac neque nec vestibulum. Donec tempus lectus est, nec laoreet elit imperdiet vitae. Integer auctor lobortis tellus sed sollicitudin. Mauris porta vehicula consequat. Cras imperdiet quam ac turpis laoreet consectetur. In fringilla non nulla auctor consequat.[/column][/row]
You can read more about columns here: Tutorial - RpNation - BBcode Guide
 

iMeisaki

mighty lil goon
@Fyuri

Okay so the first problem I've run into is the tabbed content won't separate from the tab.

Here's the code I've tried
Code:
[tabs][row][column=span2][Tab=Tab A][/column][column=span6]Tabbed content here.

[/tab]
[/column]
[column=span2][Tab=Tab B][/column]
[column=span6]content here
[/column]
[/Tab]

[/row]
I KNOW IT LOOKS PATHETIC LMAO pls dont judge me im trying to understand it ahhhh ;-; i understand tabs by themselves and accordions by themselves but when im trying to do something out of the box im having a hard time.
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
@Fyuri

Okay so the first problem I've run into is the tabbed content won't separate from the tab.

Here's the code I've tried
Code:
[tabs][row][column=span2][Tab=Tab A][/column][column=span6]Tabbed content here.

[/tab]
[/column]
[column=span2][Tab=Tab B][/column]
[column=span6]content here
[/column]
[/Tab]

[/row]
I KNOW IT LOOKS PATHETIC LMAO pls dont judge me im trying to understand it ahhhh ;-; i understand tabs by themselves and accordions by themselves but when im trying to do something out of the box im having a hard time.
Ah, that is because you aren't using BBCode+ tabs, you are using regular BBCode tab tags which won't work like this. I had assumed when you put BBCode+ you were using the BBCode+ tabs coding as seen in the BBCode+ thread (click the Tabs text for a working example of bbcode+ tabs).
 

iMeisaki

mighty lil goon
Okay @Fyuri

I've attempted it again and I've made a pretty strong step forward! I've ran into a few problems and ultimately one question.

The problems are:
  1. The tabs themselves seem very low to the post
  2. The tabbed content is very high and doesn't look like it fits with the tabs.
  3. I've tried to put in manual breaks but it looks very weird when i do it, when i insert the manual breaks it looks like the tabs are extremely spaced apart rather than the background ending; hence making it look like there's only 1 tab rather than 3-in-1. In my code, I do not include breaks.
The question I have is: Can i insert a picture for the tab backgrounds?

Here's the code
Code:
[row]
[column=span2]
[class=tabs]background-color:#070d32; border-radius: 5px; box-sizing: border-box; box-shadow: 0px 0px 5px #070d32; color: #e4eeff; font-size: 18px; font-weight: bold; line-height: 1; margin: 20px auto; min-width: 350px; text-align: center; width: 50%; [/class]
    
[class name=tab state=hover]
        background-color: #e4eeff;
[/class]
  [script class=tab on=click]
        hide tabsContent
        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]Information[/div]
[div class=tab]Rules[/div]
[div class=tab]Characters[/div][/div]
[/column]
[column=span9]
[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]

[/column]
[/row]
 

Fyuri

ᴍᴏɴᴀᴄʜᴏᴘsɪs
Administrator
Supporter
Okay I see what you did. Whenever you use ANY coding, it leaves gaps because of the various line breaks. It's why you'll see us using the NOBR tags because it removes them. I've gone ahead and cleaned up your code and removed the gaps.

Another important thing to note with divs is that they automatically cause a line break under them. So when you hit the enter key you're adding an additional line break. So in order for the content to not have those breaks you have to have the divs all on the same 'line.'

Information
Rules
Characters

Some general information about Generic RP #42.



Code:
[row][column=span2][div class=tabs][div class=tab]Information[/div][div class=tab]Rules[/div][div class=tab]Characters[/div][/div]
[/column][column=span9][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][/column][/row]

[nobr]
[class=tabs]background-color:#070d32; border-radius: 5px; box-sizing: border-box; box-shadow: 0px 0px 5px #070d32; color: #e4eeff; font-size: 18px; font-weight: bold; line-height: 1; margin: 20px auto; min-width: 100%; text-align: center; width: 50%; [/class]
    
[class name=tab state=hover]
background-color: #e4eeff;
color: #070d32; 
box-sizing: border-box;
[/class]

  [script class=tab on=click]
        hide tabsContent
        set currentTab (getText)
 if (eq ${currentTab} Information) (show tabsContentInformation)
 if (eq ${currentTab} Rules) (show tabsContentRules)
 if (eq ${currentTab} Characters) (show tabsContentCharacters)
    [/script][/nobr]
 

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

Top