BBCode Help

[rissa]

BBCODE AND DIVBOX INQUIRIES

---

A place specifically designed for bbcode and divbox related questions! Need help figuring out a bit of code? Not sure why your code keeps breaking? Unsure if what you want to do is even possible? Fret not! This thread's creation is for the sole purpose of helping you figure out your coding, one question at a time.

F. A. Q.

INDEX TO FREQUENTLY ASKED QUESTIONS​

• Link Color
• Circlular (radial) Images
• Changing Slide Colors
• Borderless Accordions
• Side by Side Images
• Tables
• Changing Font in Tabs
• Different Column Methods
• Adding DIV Background Images
• Gradiant BG
• How to Show Code

Thank you @Elle Joyner for compiling this list!

BBCH VI​

H E L P F U LxxL I N K S

• Iwaku's BBCode Guide
• Darkflames13's Playground
• Divtionary
• CSS Reference
• Color Hexa
• Google Fonts

 

[junebug]

Flex boxes would be your best bet! Columns work too, but they're not very mobile friendly.

Okay, so I've never heard of flex boxes. Do you guys happen to have a tutorial on how to make them? :)

 

[Elle Joyner]

I'm terrible at them, myself XD But @darkflames13 and @rissa are the reigning Flex Box champs XD

 

[darkflames13]

Okay, so I've never heard of flex boxes. Do you guys happen to have a tutorial on how to make them? :)

No tutorials from us yet, but this is my go to reference for them. There's also this game like interactive thing that you can use to help learn how to flexbox :)

Flexboxes aren't the only way to achieve your desired outcome tho. There's also the option of just using inline-block divs and like Elle mentioned, the columns property which can actually be mobile friendly so long as there's a column-width set to go along with it.

Using inline-block:

Code: [spoili]
[div=/*row 1*/][div=/*col 1*/ display:inline-block; width:200px; height:200px; background:#d4b2d4; margin-bottom:-4px;][/div][div=/*col 2*/ display:inline-block; width:200px; height:200px; background:#825282; margin:-4px 0;][/div][/div][div=/*row
2*/][div=/*col 1*/ display:inline-block; width:200px; height:200px; background:#e2e2e2; margin-bottom:-4px;][/div][div=/*col 2*/ display:inline-block; width:200px; height:200px; background:grey; margin-bottom:-4px;][/div][/div]
[/spoili]


Using columns:

Code: [spoili]
[div=/*r1*/ columns:2 200px; column-gap:0px; width:400px;][div=/*r1c1*/ height:200px; background:#d4b2d4;][/div][div= /*r1c2*/height:200px; background:#825282;][/div][/div][div=/*r2*/ columns:2 200px; column-gap:0px; width:400px;][div=/*r2c1*/ height:200px; background:#e2e2e2;][/div][div=/*r2c2*/ height:200px; background:grey;][/div][/div]
[/spoili]


Using flexboxes:

Code: [spoili]
[div=max-width:400px !important; display:flex; height:400px;]
[div=/*col1*/ flex:1; display:flex; flex-direction:column;][div=/*col1row1*/ flex:1; background-color:#d4b2d4;]
[/div][div=/*col1row2*/ flex:1; background-color:#e2e2e2;]
[/div][/div]
[div=/*col1*/ flex:1; display:flex; flex-direction:column;][div=/*col1row1*/ flex:1; background-color:#825282;]
[/div][div=/*col1row2*/ flex:1; background-color:grey;]
[/div][/div][/div]
[/spoili] or [spoili]
[div=/*row1*/ max-width:400px !important; display:flex;]
[div=/*r1c1*/ flex:1; height:200px; background-color:#d4b2d4;][/div]
[div=/*r1c2*/ flex:1; background-color:#825282;][/div]
[/div][div=/*row2*/ max-width:400px !important; display:flex;]
[div=/*r2c1*/ flex:1; height:200px; background-color:#e2e2e2;][/div]
[div=/*r2c2*/ flex:1; background-color:grey;][/div]
[/div]
[/spoili]
Only diff between these two flexbox codes is that the first one goes column first then row, while the second one goes row into column.


These three options look pretty much the same on the web browser. The main difference is how they look on mobile. Inline-block will stack but not stretch, columns will stack and stretch and lastly, flexboxes will shrink to fit tho they can also be made to stack and stretch with the addition of flex-wrap and min-widths to the columns.

 

[junebug]

@darkflames13 @Elle Joyner Thank you so much for showing me the different ways I could do this. Now, I have another question- I think it might have to do with margins and padding- but what kind of coding would I use to completely center the text right in the middle (very center) of the boxes?

 

[darkflames13]

@darkflames13 @Elle Joyner Thank you so much for showing me the different ways I could do this. Now, I have another question- I think it might have to do with margins and padding- but what kind of coding would I use to completely center the text right in the middle (very center) of the boxes?

There are two ways I could think of going about this.

The first is using table cells and vertical align. This is what I used to do to 'centre centre' my divs xD How it works is you make a div that has 'display:table-cell' and then have 'vertical-align:middle' in it. That makes it vertically centred. To make it horizontally centred, you can just have 'text-align:center' since it's just text, but if it was an image or another div element, you'd have to use 'margin:auto'

centre centre

Code: [spoili]
[div=width:200px; height:200px; background:purple; color:white; display:table-cell; vertical-align:middle; text-align:center;]centre centre[/div]
[/spoili]


The second way is through flexboxes. With flexboxes, you can specify how to align their children with the justify-content and align-items properties. These two properties only work when the div is a flexbox. This method of vertical centring what I usually use these days, mainly cause I already use flexboxes for most of what I do :'D Since this is just text we're centring, we'll only be needing the align-items property to vertically centre the text. We can centre it horizontally using the text-align property.

centre centre

Code: [spoili]
[div=width:200px; height:200px; display:flex; align-items:center; background:purple; color:white;][div=flex:1; text-align:center;]centre centre[/div][/div]
[/spoili]

 

[junebug]

@darkflames13 Thank you so much for you quick reply! I will let you guys know if I have any other questions. ^.^

 

[Jihae]

Hi hi hi! :D
This may be a simple problem to fix, but for some reason, whenever I add another div box, the overflow-y: scroll property starts working instead of the overflow-x: scroll property (which is what I want to use). How do I make it so, no matter how many boxes I put into the code, it won't scroll vertically?

[div=margin: auto;
max-width: 680px!important;
height: 380px;
padding: 10px;
background: RED;
overflow-x: scroll;
white-space: nowrap;][div=float: left; background: WHITE;
height: 250px;
width: 250px; overflow-y: scroll;][/div][div=float: left;
left: 10px;
background: WHITE;
height: 250px;
width: 250px; overflow-y: scroll;][/div][div=float: left;
left: 20px;
background: WHITE;
height: 250px;
width: 250px; overflow-y: scroll;][/div]
[/div][div=margin: auto;
width: 680px;
height: 40px;
padding: 10px;
background: BLUE;][/div]

 

[darkflames13]

Hi hi hi! :D
This may be a simple problem to fix, but for some reason, whenever I add another div box, the overflow-y: scroll property starts working instead of the overflow-x: scroll property (which is what I want to use). How do I make it so, no matter how many boxes I put into the code, it won't scroll vertically?

[div=margin: auto;
max-width: 680px!important;
height: 380px;
padding: 10px;
background: RED;
overflow-x: scroll;
white-space: nowrap;][div=float: left; background: WHITE;
height: 250px;
width: 250px; overflow-y: scroll;][/div][div=float: left;
left: 10px;
background: WHITE;
height: 250px;
width: 250px; overflow-y: scroll;][/div][div=float: left;
left: 20px;
background: WHITE;
height: 250px;
width: 250px; overflow-y: scroll;][/div]
[/div][div=margin: auto;
width: 680px;
height: 40px;
padding: 10px;
background: BLUE;][/div]

Adding overflow-y:hidden to the div with the overflow-x should force it to scroll horizontally on web, but with your current setup, it wont on mobile. On mobile the boxes just stack and get cut off due to vertical scrolling being disabled.

If you want to fix that as well, just replace the floats in your white boxes with display:inline-blocks and remove the lefts. Then add margin-right:10px to the first and second boxes to create the gap between them.

 

[Jihae]

Adding overflow-y:hidden to the div with the overflow-x should force it to scroll horizontally on web, but with your current setup, it wont on mobile. On mobile the boxes just stack and get cut off due to vertical scrolling being disabled.

If you want to fix that as well, just replace the floats in your white boxes with display:inline-blocks and remove the lefts. Then add margin-right:10px to the first and second boxes to create the gap between them.

You're a life saver. Thank you!

 

[Sketching101]

Hi! I was looking for a way to use an MP3 file in a post. I looked around the forums a bit but couldn't find any code for it. Is there a way to do that?

 

[rissa]

Hi! I was looking for a way to use an MP3 file in a post. I looked around the forums a bit but couldn't find any code for it. Is there a way to do that?

as far as I know, you cant use MP3 files. but it is possible to use youtube videos -- im at work right now, but there's a link on how to achieve this in the first post of this thread. (8

 

[King]

Hi guys!

I hope I explain this correctly here goes -

how does one split the text in a div box into two boxes, but scroll at the same time?

props to paint for this example:
And a link to the post I'm attempting to get that text onto: | We All Float Down Here |

And thank you so much if you can figure out what i am asking haha!

 

[darkflames13]

Hi guys!

I hope I explain this correctly here goes -

how does one split the text in a div box into two boxes, but scroll at the same time?

props to paint for this example:
And a link to the post I'm attempting to get that text onto: | We All Float Down Here |

And thank you so much if you can figure out what i am asking haha!

Have the two boxes be wrapped in another div and have that outer div contain the height and overflow-y :)

 

[Mollisol]

Hi all,

I am trying to put eight small images equidistant in a circle. Is there a way I can position them with bbcode?

 

[darkflames13]

Hi all,

I am trying to put eight small images equidistant in a circle. Is there a way I can position them with bbcode?

Err... I'm not quite sure I understand your question correctly. Do you mean something like this?

 

[Mollisol]

Err... I'm not quite sure I understand your question correctly. Do you mean something like this?

Sorry, I wrote this in the middle of the night right after waking up ^^ I'll try to explain it better now. I meant something more like this, witch each colored blob being a different image.



This is just a quick thing I made with my mouse in GIMP, but I imagine it as a "wheel" of images that are an equal distance apart. Is there a way to position them this way with bbcode, or am I better off trying to accomplish it in a graphics editing program?

 

[darkflames13]

Sorry, I wrote this in the middle of the night right after waking up ^^ I'll try to explain it better now. I meant something more like this, witch each colored blob being a different image.

View attachment 158280

This is just a quick thing I made with my mouse in GIMP, but I imagine it as a "wheel" of images that are an equal distance apart. Is there a way to position them this way with bbcode, or am I better off trying to accomplish it in a graphics editing program?

Ahhh. It's possible to do with codes, ye. I can think of a number of ways but most of them involve a lot of manual pushing and aren't very mobile friendly. Using clip-path is probably the best solution I can think of, but I've never used it before so I'm not a hundred percent sure if it'll work.

tl;dr: It'll be easier and faster if you use an editing program :'D

 

[Small Foxx]

Okay. So. I need halp. This is my code:

[div=display: inline-block;
width: 350px;
height: 500px;
float: right;
border: 10px groove green;
border-radius: 20px 30px 20px 30px;
margin-right: 30px;
box-shadow:  5px 5px #0000FF;
background: url('https://data.whicdn.com/images/304956435/large.jpg') no-repeat;
background-size: fill;[/div]

[div= margin-left: -460px;
margin-top: 60px;
font-size: 45px;
font-weight: 900;
border-radius: 30px 30px 30px 30px;
transform: rotate(-90deg);
text-shadow: 5px 5px 5px #0F7422;
text-align: center;
 [/div]


•SISTER•NATURE•[/div][/div]

[div=display:inline-block;
width: 400px;
height: 250px;
float: left;
border: 2px groove green;
border-radius: 20px 30px 20px 30px;
margin-left: 10px;
overflow: auto;
box-shadow:  2px 2px #0000FF;
background: url('http://www.fonstola.ru/large/201208/80205.jpg') no-repeat;
background-size: fill;[/div]

[div= font-color: black;
font-size: 15px;
font-weight: 900;
text-shadow: 5px 5px 5px white;
text-align: center;
 [/div]
Swag lo-fi hell of, officia labore 8-bit selfies copper mug 90's dolore. Lumbersexual tempor sunt banjo etsy vape, letterpress tumeric. Jianbing pok pok flexitarian sriracha. Thundercats incididunt semiotics cornhole in. Crucifix kale chips freegan letterpress offal. Organic street art occaecat, locavore twee deserunt ex +1 craft beer.

Helvetica banh mi etsy semiotics post-ironic viral. Dolor kinfolk polaroid waistcoat. Minim godard before they sold out commodo, laboris consectetur poke edison bulb knausgaard. Aesthetic unicorn hoodie commodo, coloring book normcore lyft squid selvage tousled laborum quinoa echo park. Franzen fashion axe craft beer freegan heirloom.

Sriracha lyft commodo fanny pack, qui next level forage microdosing synth vinyl dreamcatcher gochujang williamsburg skateboard nostrud. Helvetica pabst tilde woke kinfolk DIY. Cronut artisan officia, sunt fugiat semiotics minim raclette. Proident slow-carb distillery, bushwick kickstarter af sed knausgaard mustache beard cloud bread venmo jean shorts veniam taiyaki. Aliquip green juice actually asymmetrical direct trade neutra cold-pressed bicycle rights sriracha narwhal normcore air plant la croix. Yr church-key 8-bit, hella af deep v locavore meh id wolf kale chips trust fund. Before they sold out palo santo freegan blue bottle poutine polaroid.
[/div][/div]


[div=display:inline-block;
width: 400px;
height: 250px;
float: left;
border: 2px groove green;
border-radius: 20px 30px 20px 30px;
margin-left: 10px;
overflow-y: auto;
box-shadow:  2px 2px #0000FF;
background: url('http://www.fonstola.ru/large/201208/80205.jpg') no-repeat;
background-size: fill;[/div]

[div= font-color: black;
font-size: 15px;
font-weight: 900;
text-shadow: 5px 5px 5px white;
text-align: center;
 [/div]
Swag lo-fi hell of, officia labore 8-bit selfies copper mug 90's dolore. Lumbersexual tempor sunt banjo etsy vape, letterpress tumeric. Jianbing pok pok flexitarian sriracha. Thundercats incididunt semiotics cornhole in. Crucifix kale chips freegan letterpress offal. Organic street art occaecat, locavore twee deserunt ex +1 craft beer.

Helvetica banh mi etsy semiotics post-ironic viral. Dolor kinfolk polaroid waistcoat. Minim godard before they sold out commodo, laboris consectetur poke edison bulb knausgaard. Aesthetic unicorn hoodie commodo, coloring book normcore lyft squid selvage tousled laborum quinoa echo park. Franzen fashion axe craft beer freegan heirloom.

Sriracha lyft commodo fanny pack, qui next level forage microdosing synth vinyl dreamcatcher gochujang williamsburg skateboard nostrud. Helvetica pabst tilde woke kinfolk DIY. Cronut artisan officia, sunt fugiat semiotics minim raclette. Proident slow-carb distillery, bushwick kickstarter af sed knausgaard mustache beard cloud bread venmo jean shorts veniam taiyaki. Aliquip green juice actually asymmetrical direct trade neutra cold-pressed bicycle rights sriracha narwhal normcore air plant la croix. Yr church-key 8-bit, hella af deep v locavore meh id wolf kale chips trust fund. Before they sold out palo santo freegan blue bottle poutine polaroid.
[/div][/div]

When I use that code, I get this:

For the most part it's fine. However, what I want is for the left and right columns to actually be somewhat aligned with each other. I don't how they aren't, considering the code for both columns are the same with the exception of the floats. And the left column is the same size; the right column is 500px in height and 350px in width while the two boxes making up the left column are each 250px in height and 400px in width.

I'd also like for there to be a bit of space between the top box and the lower box -- about as much space as there is between the columns.

Most infuriating is the text inside. The space between the top and the box and where the paragraph begins is annoying me to no end, and I absolutely cannot get those ugly scroll bars to work. It'd be great if I could get the scroll bar actually a few pxs to the right of the box or, even better, pretty and rounded, but I'd honestly just settle for scrolls that actually work instead of just staring at me and mocking my pain.

WHERE DID I GO WRONG, SENSEIS?!

 

[serendipity]

@Small Foxx ; was this what you had wanted?

explanation: i gave the entire code a specific width which was "750px" and then i deleted some "extra" codes inside the divs that weren't needed. next, i edited the code to make it more aligned to each other. whenever 'floats' are used in any code, you'd have to manually specify the pixels to align. you were on the right path though and your code is pretty!

more helpful tips: another way to where you can get two images, two text boxes, or two "properties" together would be using the column code or flex-boxes! i believe using the column code is much easier to edit than using floats since you'd have to specify each margin and do a lot of manual alignments. i'm still looking at how coding works on this site since there's some differences of how codes work here compared to what i'm used to as well!

i hope this helped!

[div=width: 750px; margin: auto;][div=float: right;
width: 350px;
height: 500px;
border: 10px groove green;
border-radius: 20px 30px 20px 30px;
box-shadow:  5px 5px #0000FF;
background: url('https://data.whicdn.com/images/304956435/large.jpg') no-repeat;
background-size: fill;][div=display: inline-block;
margin-left: -200px;
margin-top: 130px;
font-size: 41px;
font-weight: 900;
border-radius: 30px 30px 30px 30px;
transform: rotate(-90deg);
text-shadow: 5px 5px 5px #0F7422;
text-align: center;]


•SISTER•NATURE•[/div][/div]
[div=display:inline-block;
margin-top: -18px;
width: 350px;
height: 244px;
border: 2px groove green;
border-radius: 20px 30px 20px 30px;
overflow: auto;
box-shadow:  2px 2px #0000FF;
background: url('http://www.fonstola.ru/large/201208/80205.jpg') no-repeat;
background-size: fill;][div= font-color: black;
font-size: 15px;
font-weight: 900;
text-shadow: 5px 5px 5px white;
text-align: center;]
Swag lo-fi hell of, officia labore 8-bit selfies copper mug 90's dolore. Lumbersexual tempor sunt banjo etsy vape, letterpress tumeric. Jianbing pok pok flexitarian sriracha. Thundercats incididunt semiotics cornhole in. Crucifix kale chips freegan letterpress offal. Organic street art occaecat, locavore twee deserunt ex +1 craft beer.

Helvetica banh mi etsy semiotics post-ironic viral. Dolor kinfolk polaroid waistcoat. Minim godard before they sold out commodo, laboris consectetur poke edison bulb knausgaard. Aesthetic unicorn hoodie commodo, coloring book normcore lyft squid selvage tousled laborum quinoa echo park. Franzen fashion axe craft beer freegan heirloom.

Sriracha lyft commodo fanny pack, qui next level forage microdosing synth vinyl dreamcatcher gochujang williamsburg skateboard nostrud. Helvetica pabst tilde woke kinfolk DIY. Cronut artisan officia, sunt fugiat semiotics minim raclette. Proident slow-carb distillery, bushwick kickstarter af sed knausgaard mustache beard cloud bread venmo jean shorts veniam taiyaki. Aliquip green juice actually asymmetrical direct trade neutra cold-pressed bicycle rights sriracha narwhal normcore air plant la croix. Yr church-key 8-bit, hella af deep v locavore meh id wolf kale chips trust fund. Before they sold out palo santo freegan blue bottle poutine polaroid.[/div][/div]

[div=display: inline-block;
width: 350px;
height: 244px;
border: 2px groove green;
border-radius: 20px 30px 20px 30px;
overflow: auto;
box-shadow:  2px 2px #0000FF;
background: url('http://www.fonstola.ru/large/201208/80205.jpg') no-repeat;
background-size: fill;][div= font-color: black;
font-size: 15px;
font-weight: 900;
text-shadow: 5px 5px 5px white;
text-align: center;]
Swag lo-fi hell of, officia labore 8-bit selfies copper mug 90's dolore. Lumbersexual tempor sunt banjo etsy vape, letterpress tumeric. Jianbing pok pok flexitarian sriracha. Thundercats incididunt semiotics cornhole in. Crucifix kale chips freegan letterpress offal. Organic street art occaecat, locavore twee deserunt ex +1 craft beer.

Helvetica banh mi etsy semiotics post-ironic viral. Dolor kinfolk polaroid waistcoat. Minim godard before they sold out commodo, laboris consectetur poke edison bulb knausgaard. Aesthetic unicorn hoodie commodo, coloring book normcore lyft squid selvage tousled laborum quinoa echo park. Franzen fashion axe craft beer freegan heirloom.

Sriracha lyft commodo fanny pack, qui next level forage microdosing synth vinyl dreamcatcher gochujang williamsburg skateboard nostrud. Helvetica pabst tilde woke kinfolk DIY. Cronut artisan officia, sunt fugiat semiotics minim raclette. Proident slow-carb distillery, bushwick kickstarter af sed knausgaard mustache beard cloud bread venmo jean shorts veniam taiyaki. Aliquip green juice actually asymmetrical direct trade neutra cold-pressed bicycle rights sriracha narwhal normcore air plant la croix. Yr church-key 8-bit, hella af deep v locavore meh id wolf kale chips trust fund. Before they sold out palo santo freegan blue bottle poutine polaroid.[/div][/div]

 

[Small Foxx]

YES! THANK YOU! @serendipity