Tutorial BBCode Assistance Thread

[Fable]

hey, i have a stupid question (again) but i'm lazy and don't want to figure it out. how do i do the scroll-y picture with the div box?

You might need to give a better definition by what you mean exactly by "scroll-y picture."

A scroll box with a BG img maybe?

 

[myfanwy]

You might need to give a better definition by what you mean exactly by "scroll-y picture."

A scroll box with a BG img maybe?

ah, yes. that's what i meant ^^"

 

[Fable]

aha, yeah. that's what i meant ^^" i am terrible at english

Ah :3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper orci eu augue euismod pretium. Praesent at lacus lacinia, consequat quam id, tristique mauris. Nam rutrum semper neque, fringilla dignissim erat porttitor nec. Nullam malesuada ante risus, vitae elementum mauris dignissim ac. Duis scelerisque sapien tellus, vitae bibendum mauris dictum ac. Sed odio lectus, blandit eu sodales in, tempor at orci. Ut euismod suscipit ante, eget sagittis est. Nulla metus nunc, suscipit sit amet nunc vitae, consequat mattis lorem. Cras non diam quis dui porta tristique sed vitae diam. Praesent vitae malesuada leo.

Suspendisse potenti. Cras imperdiet elit nisi. Suspendisse potenti. Integer sagittis est non urna lobortis, sed tincidunt quam pharetra. Ut eget erat a dui venenatis malesuada. Nunc vehicula urna risus, sagittis euismod sem pretium cursus. Fusce volutpat arcu et ante tincidunt, sit amet vulputate mi cursus.

[div=background-image
:url('https://www.rpnation.com/media/bg-blue.24726/full?d=1490285904'); height:300px; max-width:300px; margin:auto; overflow:auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper orci eu augue euismod pretium. Praesent at lacus lacinia, consequat quam id, tristique mauris. Nam rutrum semper neque, fringilla dignissim erat porttitor nec. Nullam malesuada ante risus, vitae elementum mauris dignissim ac. Duis scelerisque sapien tellus, vitae bibendum mauris dictum ac. Sed odio lectus, blandit eu sodales in, tempor at orci. Ut euismod suscipit ante, eget sagittis est. Nulla metus nunc, suscipit sit amet nunc vitae, consequat mattis lorem. Cras non diam quis dui porta tristique sed vitae diam. Praesent vitae malesuada leo.

Suspendisse potenti. Cras imperdiet elit nisi. Suspendisse potenti. Integer sagittis est non urna lobortis, sed tincidunt quam pharetra. Ut eget erat a dui venenatis malesuada. Nunc vehicula urna risus, sagittis euismod sem pretium cursus. Fusce volutpat arcu et ante tincidunt, sit amet vulputate mi cursus.[/div]

Just be sure that any bg images are HTTPS and not HTTP.

 

[StoneWolf18]

ah, yes. that's what i meant ^^"

Or did you mean something like this?

text

 

[myfanwy]

Or did you mean something like this?

text

ah! yes. that's what i needed, sorry Fable n.n''

 

[StoneWolf18]

ah! yes. that's what i needed, sorry Fable n.n''

Ah! You'll wanna put 'fixed' on the back-end of the background parameter like so:

[div=background: url(URL) fixed;] content [/div]

 

[myfanwy]

Ah! You'll wanna put 'fixed' on the back-end of the background parameter like so:

[div=background: url(URL) fixed;] content [/div]

thank you so much!

 

[LittleMissFoxy]

I am not sure if this has been asked and I just can't find it anywhere, what is the code to make your div box have rounded edges and do circles with images or text in them?

 

[Lyro]

I am not sure if this has been asked and I just can't find it anywhere, what is the code to make your div box have rounded edges and do circles with images or text in them?

You'll want to apply the border-radius property to a DIV. Example:

[DIV=border-radius: 5px;]A div with slightly rounded edges[/DIV]

A div with slightly rounded edges

[DIV=border-radius: 50%;]A div with very rounded edges[/DIV]

A div with very rounded edges

See here for more details.

 

[LittleMissFoxy]

You'll want to apply the border-radius property to a DIV. Example:

[DIV=border-radius: 5px;]A div with slightly rounded edges[/DIV]

A div with slightly rounded edges

[DIV=border-radius: 50%;]A div with very rounded edges[/DIV]

A div with very rounded edges

See here for more details.

Oh my goodness, thank you so much!

 

[Role Model]

How would I go about centering the tab group in this?

 

[StoneWolf18]

How would I go about centering the tab group in this?

Sorry hun, as far as I'm aware, centering tabs is impossible as of right now.

 

[Role Model]

Sorry hun, as far as I'm aware, centering tabs is impossible as of right now.

What a shame, it looks so off with the tabs being uncentered..

 

[Lyro]

How would I go about centering the tab group in this?

There might be a way, but I haven't tried it. It would require wrapping the tabs in a div that is exactly the width of the tabs and relatively positioned. Then, using absolute positioning, shift the tab contents out of the relatively positioned area so that it overflows from the normal tab area (the overflow would normally be hidden, but since it's absolutely positioned it won't have an impact, since the nearest non-static element is outside of the overflow hider) by the amount required for it to be centered.

I just gave it a quick attempt in the inspector and it seems like it could work. Happy experimenting!

 

[myfanwy]

You'll want to apply the border-radius property to a DIV. Example:

[DIV=border-radius: 5px;]A div with slightly rounded edges[/DIV]

A div with slightly rounded edges

[DIV=border-radius: 50%;]A div with very rounded edges[/DIV]

A div with very rounded edges

See here for more details.

using this div, i seem to keep breaking the code when i apply it to be a border. does anyone know how to fix it so it will stay as a border?

 

[Fable]

using this div, i seem to keep breaking the code when i apply it to be a border. does anyone know how to fix it so it will stay as a border?

Did you mean adding a border? Like this?

A div with very rounded edges

 

[StoneWolf18]

using this div, i seem to keep breaking the code when i apply it to be a border. does anyone know how to fix it so it will stay as a border?

You mean to get it JUST a border without the background?

 

[myfanwy]

ah, yes, just the border, no background. though i suppose i could use Fable 's idea and just make the background white.
either one would work ^^"

 

[Fable]

ah, yes, just the border, no background. though i suppose i could use Fable 's idea and just make the background white.
either one would work ^^"

I was being lazy and wanted to be sure that was what you wanted. X3 You can completely axe the bg color in the code so it's more theme friendly.

A div with very rounded edges

[DIV=border:1px solid; border-radius: 50%; height: 200px; padding: 50px; width: 200px;]A div with very rounded edges[/DIV]

 

[myfanwy]

I was being lazy and wanted to be sure that was what you wanted. X3 You can completely axe the bg color in the code so it's more theme friendly.

A div with very rounded edges

[DIV=border:1px solid; border-radius: 50%; height: 200px; padding: 50px; width: 200px;]A div with very rounded edges[/DIV]

thank you so much! after the border, i could add a bg colour like i normally would, correct? my codes are always theme unfriendly bc pastels are life.

 

[Lyro]

thank you so much! after the border, i could add a bg colour like i normally would, correct? my codes are always theme unfriendly bc pastels are life.

Yes, but (at least in my opinion) the simplest way is just to add the background-color CSS property to the DIV.

 

[Fable]

thank you so much! after the border, i could add a bg colour like i normally would, correct? my codes are always theme unfriendly bc pastels are life.

If you mean with just the BG BBCode tag it won't appear like you probably intend.

A div with very rounded edges

vs

A div with very rounded edges

 

[Maevrys]

So I'm trying to get a profile template into a tab, where the profile template itself has tabs, but every time I put the whole thing between the code brackets, it only contains the first tab of the profile template and the rest of them have made their way out of the code.

^ The red underlined are what's supposed to be within the code bracket. Now, when I take out the code brackets, the profile appears normally within the tab I placed it in, but the issue I get only exists when I try to put the profile between code brackets, the other tabs run out of the code.

In the spoiler is an example of the issue I'm having. Do tabs within code brackets within tabs just don't work well?

Spoiler

• INTRO
• SETTING
• RULES
• CHARACTERS

• 
  stuff
  
• 
  stuff
  
• 
  stuff
  
• 
  stuff

 

[myfanwy]

If you mean with just the BG BBCode tag it won't appear like you probably intend.

A div with very rounded edges

vs

A div with very rounded edges

so i think the second one is best and when quoting i saw what it was, so thank you guys so much for the help! divs are somewhat tricky at times

 

[IctoraPost]

So I'm trying to get a profile template into a tab, where the profile template itself has tabs, but every time I put the whole thing between the code brackets, it only contains the first tab of the profile template and the rest of them have made their way out of the code.

^ The red underlined are what's supposed to be within the code bracket. Now, when I take out the code brackets, the profile appears normally within the tab I placed it in, but the issue I get only exists when I try to put the profile between code brackets, the other tabs run out of the code.

In the spoiler is an example of the issue I'm having. Do tabs within code brackets within tabs just don't work well?

Spoiler

• INTRO
• SETTING
• RULES
• CHARACTERS

• 
  stuff
  
• 
  stuff
  
• 
  stuff
  
• 
  stuff

That's some weird behaviour there.
...I think it might even be a bug.