BBCode Help

Status
Not open for further replies.
rissa

rissa

the clairvoyant pterodactyl
Original poster
VENGEANCE
DONATING MEMBER
MYTHICAL MEMBER
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.
H E L P F U LxxL I N K S

 
Last edited:
  • Love
Reactions: tascha, Nemopedia, Gossip and 11 others
Pahn said:
Oh thanks! But I meant specifically for a bit of code, lemme grab it.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula rutrum leo, eu molestie metus facilisis ullamcorper. Nulla vel dignissim odio. Aliquam a condimentum mi. Integer sollicitudin gravida turpis sit amet tempor. Etiam facilisis faucibus mauris id fringilla. Ut a felis convallis, interdum nibh sit amet, accumsan elit. Nam ut erat felis. Maecenas lacinia felis pretium nibh consequat, sit amet iaculis turpis dictum. Aliquam pretium sollicitudin ligula vel vestibulum. Phasellus rhoncus magna vel lacus efficitur varius. Nunc a orci et sem consectetur elementum et sed lacus.



Code: 
[div=background:url(http://i.imgur.com/JBUUQao.png); background-size: 800px 720px; width:780px; height:700px; padding:20px 0px 0px 20px; overflow:hidden; margin:auto;][div=background:black; border-radius:20px; width:580px; height:600px; opacity:0.20; color:white; padding:15px 15px 15px 15px; overflow-x:auto; font-size:10px; font-family:verdana;]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula rutrum leo, eu molestie metus facilisis ullamcorper. Nulla vel dignissim odio. Aliquam a condimentum mi. Integer sollicitudin gravida turpis sit amet tempor. Etiam facilisis faucibus mauris id fringilla. Ut a felis convallis, interdum nibh sit amet, accumsan elit. Nam ut erat felis. Maecenas lacinia felis pretium nibh consequat, sit amet iaculis turpis dictum. Aliquam pretium sollicitudin ligula vel vestibulum. Phasellus rhoncus magna vel lacus efficitur varius. Nunc a orci et sem consectetur elementum et sed lacus.
[/div][/div]
Click to expand...
Ahhh. That one is old, but yea. For that example the opacity of the font is also affected by the opacity of the black background. It's cause I changed the opacity for the entire div, meaning that its children get affected as well.

Like rissa mentioned tho, a way to change the just the opacity of the background colour is to use an the rgba value instead.
 
  • Thank You
Reactions: Pahn
darkflames13 said:
Ahhh. That one is old, but yea. For that example the opacity of the font is also affected by the opacity of the black background. It's cause I changed the opacity for the entire div, meaning that its children get affected as well.

Like rissa mentioned tho, a way to change the just the opacity of the background colour is to use an the rgba value instead.
Click to expand...
Ahh that makes sense. (What are rgba values and where can I find them...?)
 
Pahn said:
Ahh that makes sense. (What are rgba values and where can I find them...?)
Click to expand...
Rgba stands for red blue green alpha. You can google for the rgb values of all colour hexas. Just slap in a fourth parameter for the opacity.

rgb(0,0,0)

rgba(0,0,0,0.7)
 
  • Thank You
Reactions: rissa and Pahn
Is there any way to hide or prettify the scroll bar itself when you have a div box with overflow-y:scroll?
I haven't done coding in a while and I have no idea but would really appreciate some help ._.

This is the code I have for that particular div box so far, if that's any help.

Code: 
[div=width:65%; height:200px; display:inline-block; vertical-align:top; text-align:justify;line-height:12pt;
overflow-y: scroll;]

[/div]
 
RedPanda said:
Is there any way to hide or prettify the scroll bar itself when you have a div box with overflow-y:scroll?
I haven't done coding in a while and I have no idea but would really appreciate some help ._.

This is the code I have for that particular div box so far, if that's any help.

Code: 
[div=width:65%; height:200px; display:inline-block; vertical-align:top; text-align:justify;line-height:12pt;
overflow-y: scroll;]

[/div]
Click to expand...

You can add a flex code over it, but as far as I know it's definitely not mobile friendly. Not sure how much that matters to you. I can't get you the code I have ATM cause I'm on mobile but if no one jumps in before me, I'll send it your way tomorrow morning ASAP :)
 
  • Thank You
Reactions: RedPanda
RedPanda said:
Is there any way to hide or prettify the scroll bar itself when you have a div box with overflow-y:scroll?
I haven't done coding in a while and I have no idea but would really appreciate some help ._.

This is the code I have for that particular div box so far, if that's any help.

Code: 
[div=width:65%; height:200px; display:inline-block; vertical-align:top; text-align:justify;line-height:12pt;
overflow-y: scroll;]

[/div]
Click to expand...

I usually hide the scrollbar behind another div box. There are two ways to do it regular div or with a flex. Both are rather similar to each other in code, but the effect of the flex is that it is more mobile friendly, as in, the text doesn't go behind the box because of the messed up padding.

I answered this question here

For flex just go add in a [display: flex;] at the start and then add in [flex:1;] to both boxes (main and text box inside). Be sure to bring the [margin:auto;] with the defining width out to the very front, because your box won't center otherwise.

Edit: as of the moment there is no way to change the colour of the scroll. Hiding it is your best option!
 
  • Useful
Reactions: darkflames13 and RedPanda
How do you make those tiny buttons that play a YouTube video when you click on them, and pause when you click on them again? I think it involves embedding a YouTube video and making it really small, and perhaps coding around it in such a way that the tiny video looks more like a button or a darkened/transparent version of itself, but I don't know if that's it, or how I'd begin to implement it.
 
Quincunx said:
How do you make those tiny buttons that play a YouTube video when you click on them, and pause when you click on them again? I think it involves embedding a YouTube video and making it really small, and perhaps coding around it in such a way that the tiny video looks more like a button or a darkened/transparent version of itself, but I don't know if that's it, or how I'd begin to implement it.
Click to expand...
An old user actually made a tutorial on this before. Here's a link to it: Sam's bbCode Tidbits! :)
 
  • Thank You
Reactions: rissa and Mollisol
Hello! I have a quick question (apologies if it's already been asked, I've been scrolling and searching for about two hours now with no luck finding an answer ^.^)

I'm getting ready to start a new RP, I've found the BB codes list (yay!) so I'm totally set there. The only thing I'm a little worried about is having the OOC, IC, and Character threads/chats all jumbled into one mess. I've perused some of the other RP threads and have seen 'click here' links that sent me to a separate thread within the RP to keep all that separate. How do I do that?

Thanks for your time! Hope my question made sense ^.^

~Siryn
 
Siryn_Sueng said:
Hello! I have a quick question (apologies if it's already been asked, I've been scrolling and searching for about two hours now with no luck finding an answer ^.^)

I'm getting ready to start a new RP, I've found the BB codes list (yay!) so I'm totally set there. The only thing I'm a little worried about is having the OOC, IC, and Character threads/chats all jumbled into one mess. I've perused some of the other RP threads and have seen 'click here' links that sent me to a separate thread within the RP to keep all that separate. How do I do that?

Thanks for your time! Hope my question made sense ^.^

~Siryn
Click to expand...

You would basically just hyperlink the thread :)

So for example

PAGE SIX OF THIS THREAD

Code: 
[url=https://www.iwakuroleplay.com/threads/bbcode-help.166186/page-6]PAGE SIX OF THIS THREAD[/url]
 
  • Thank You
Reactions: Siryn_Sueng
  • Thank You
Reactions: Siryn_Sueng
Hello,

I've spent some time making this code, and even though most everything is the way I want it, there's this big empty space that appears at the bottom of the post for reasons I don't understand. What's causing the empty space, and how do I remove it?

EDIT: While I'm at it, how do I keep the flex boxes the same height, particularly when resizing the window? When I enter "height: 420;" on both of them, they come out at different sizes.

EDIT 2: While trying to fix the problem raised in the first edit, I somehow removed the empty space. I still am lost as to how to keep the boxes at the same height.

ﾟ｡･*. ﾟ☆Puellabytes☆ﾟ.*･｡ﾟ (original post)
ARENAE CLARE
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tristique senectus et netus. Auctor eu augue ut lectus arcu bibendum at. Nulla facilisi nullam vehicula ipsum a arcu cursus. Mauris vitae ultricies leo integer. Id aliquet lectus proin nibh nisl condimentum. Quis lectus nulla at volutpat diam ut venenatis. Leo vel fringilla est ullamcorper eget. Montes nascetur ridiculus mus mauris vitae ultricies. Purus faucibus ornare suspendisse sed nisi. Eget mi proin sed libero enim. Faucibus a pellentesque sit amet porttitor eget. Praesent tristique magna sit amet purus gravida quis.

Quis varius quam quisque id diam vel quam. Elit eget gravida cum sociis natoque penatibus et magnis. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Tristique senectus et netus et. Magna sit amet purus gravida quis. Tincidunt id aliquet risus feugiat in ante metus. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Tincidunt id aliquet risus feugiat. Maecenas ultricies mi eget mauris pharetra et ultrices. Laoreet sit amet cursus sit. Arcu ac tortor dignissim convallis aenean et. Lacus suspendisse faucibus interdum posuere. Lectus magna fringilla urna porttitor rhoncus dolor. Duis at consectetur lorem donec. Dolor sit amet consectetur adipiscing elit duis. In hac habitasse platea dictumst vestibulum rhoncus. Tellus mauris a diam maecenas sed enim. Accumsan sit amet nulla facilisi morbi tempus iaculis. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Vitae elementum curabitur vitae nunc sed velit dignissim.
 
Last edited:
Quincunx said:
Hello,

I've spent some time making this code, and even though most everything is the way I want it, there's this big empty space that appears at the bottom of the post for reasons I don't understand. What's causing the empty space, and how do I remove it?

EDIT: While I'm at it, how do I keep the flex boxes the same height, particularly when resizing the window? When I enter "height: 420;" on both of them, they come out at different sizes.

EDIT 2: While trying to fix the problem raised in the first edit, I somehow removed the empty space. I still am lost as to how to keep the boxes at the same height.

ﾟ｡･*. ﾟ☆Puellabytes☆ﾟ.*･｡ﾟ (original post)
ARENAE CLARE
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tristique senectus et netus. Auctor eu augue ut lectus arcu bibendum at. Nulla facilisi nullam vehicula ipsum a arcu cursus. Mauris vitae ultricies leo integer. Id aliquet lectus proin nibh nisl condimentum. Quis lectus nulla at volutpat diam ut venenatis. Leo vel fringilla est ullamcorper eget. Montes nascetur ridiculus mus mauris vitae ultricies. Purus faucibus ornare suspendisse sed nisi. Eget mi proin sed libero enim. Faucibus a pellentesque sit amet porttitor eget. Praesent tristique magna sit amet purus gravida quis.

Quis varius quam quisque id diam vel quam. Elit eget gravida cum sociis natoque penatibus et magnis. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Tristique senectus et netus et. Magna sit amet purus gravida quis. Tincidunt id aliquet risus feugiat in ante metus. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Tincidunt id aliquet risus feugiat. Maecenas ultricies mi eget mauris pharetra et ultrices. Laoreet sit amet cursus sit. Arcu ac tortor dignissim convallis aenean et. Lacus suspendisse faucibus interdum posuere. Lectus magna fringilla urna porttitor rhoncus dolor. Duis at consectetur lorem donec. Dolor sit amet consectetur adipiscing elit duis. In hac habitasse platea dictumst vestibulum rhoncus. Tellus mauris a diam maecenas sed enim. Accumsan sit amet nulla facilisi morbi tempus iaculis. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Vitae elementum curabitur vitae nunc sed velit dignissim.
Click to expand...

Since you're already using flexboxes, you don't have to have a specified height on both the columns. Just having it on the second column works. The first column should stretch itself accordingly to match the height of the second. :)
 
  • Thank You
Reactions: Mollisol
darkflames13 said:
Since you're already using flexboxes, you don't have to have a specified height on both the columns. Just having it on the second column works. The first column should stretch itself accordingly to match the height of the second. :)
Click to expand...
Thank you for your help!

I changed the flex boxes so the height was only specified on the right box. This has caused the boxes to be equal heights when my window is maximized, but they're still uneven when I resize the window (the right box becomes longer than the left). Also, there's a big empty space between the boxes. How do I fix this?

ARENAE CLARE
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tristique senectus et netus. Auctor eu augue ut lectus arcu bibendum at. Nulla facilisi nullam vehicula ipsum a arcu cursus. Mauris vitae ultricies leo integer. Id aliquet lectus proin nibh nisl condimentum. Quis lectus nulla at volutpat diam ut venenatis. Leo vel fringilla est ullamcorper eget. Montes nascetur ridiculus mus mauris vitae ultricies. Purus faucibus ornare suspendisse sed nisi. Eget mi proin sed libero enim. Faucibus a pellentesque sit amet porttitor eget. Praesent tristique magna sit amet purus gravida quis.

Quis varius quam quisque id diam vel quam. Elit eget gravida cum sociis natoque penatibus et magnis. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Tristique senectus et netus et. Magna sit amet purus gravida quis. Tincidunt id aliquet risus feugiat in ante metus. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Tincidunt id aliquet risus feugiat. Maecenas ultricies mi eget mauris pharetra et ultrices. Laoreet sit amet cursus sit. Arcu ac tortor dignissim convallis aenean et. Lacus suspendisse faucibus interdum posuere. Lectus magna fringilla urna porttitor rhoncus dolor. Duis at consectetur lorem donec. Dolor sit amet consectetur adipiscing elit duis. In hac habitasse platea dictumst vestibulum rhoncus. Tellus mauris a diam maecenas sed enim. Accumsan sit amet nulla facilisi morbi tempus iaculis. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Vitae elementum curabitur vitae nunc sed velit dignissim.
 
Quincunx said:
Thank you for your help!

I changed the flex boxes so the height was only specified on the right box. This has caused the boxes to be equal heights when my window is maximized, but they're still uneven when I resize the window (the right box becomes longer than the left). Also, there's a big empty space between the boxes. How do I fix this?

ARENAE CLARE
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tristique senectus et netus. Auctor eu augue ut lectus arcu bibendum at. Nulla facilisi nullam vehicula ipsum a arcu cursus. Mauris vitae ultricies leo integer. Id aliquet lectus proin nibh nisl condimentum. Quis lectus nulla at volutpat diam ut venenatis. Leo vel fringilla est ullamcorper eget. Montes nascetur ridiculus mus mauris vitae ultricies. Purus faucibus ornare suspendisse sed nisi. Eget mi proin sed libero enim. Faucibus a pellentesque sit amet porttitor eget. Praesent tristique magna sit amet purus gravida quis.

Quis varius quam quisque id diam vel quam. Elit eget gravida cum sociis natoque penatibus et magnis. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Tristique senectus et netus et. Magna sit amet purus gravida quis. Tincidunt id aliquet risus feugiat in ante metus. Et ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Tincidunt id aliquet risus feugiat. Maecenas ultricies mi eget mauris pharetra et ultrices. Laoreet sit amet cursus sit. Arcu ac tortor dignissim convallis aenean et. Lacus suspendisse faucibus interdum posuere. Lectus magna fringilla urna porttitor rhoncus dolor. Duis at consectetur lorem donec. Dolor sit amet consectetur adipiscing elit duis. In hac habitasse platea dictumst vestibulum rhoncus. Tellus mauris a diam maecenas sed enim. Accumsan sit amet nulla facilisi morbi tempus iaculis. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Vitae elementum curabitur vitae nunc sed velit dignissim.
Click to expand...
They're of the same height when I shrink my browser size on my end? o: Unless you mean the white box inside?

The gap in between is actually unused space from the first column. There are several ways you can go about fixing depending on the result you want to achieve.
Option 1: Changing the background-size to cover. This will make it such that the picture covers the unused space thereby eliminating it.

Option 2: Adding either a fixed width or a max-width to the first column. This will limit the size that the first column can take up. I don't recommend using a fixed width tho as that would eliminate it's ability to shrink down in size on a smaller browser size.

Option 3: Change the flex value of the second column. Bumping it up a notch will offset the ratio making it seem like the second column ate gap. A value of 3 should work. Note that with how the background image size is currently set, doing this will also make the image seem smaller on a smaller screen size. If you're going to go this route, I recommend changing the background-size property to 'cover' instead.

Option 4: Adding a max-width to the outermost div. This solution is a bit more brute force as it doesn't really address the root of the issue. It doesn't really remove the gap in a proper way, but it does make it appear smaller. The idea is that the gap only appears extremely wide on a wider screen. Limiting the outermost container to a certain width would make the gap seem smaller. Downside here tho is that the second column would also appear smaller.

I recommend giving each method a try to see which one yields the result you like best :)
 
  • Thank You
Reactions: Mollisol
darkflames13 said:
They're of the same height when I shrink my browser size on my end? o: Unless you mean the white box inside?

The gap in between is actually unused space from the first column. There are several ways you can go about fixing depending on the result you want to achieve.
Option 1: Changing the background-size to cover. This will make it such that the picture covers the unused space thereby eliminating it.

Option 2: Adding either a fixed width or a max-width to the first column. This will limit the size that the first column can take up. I don't recommend using a fixed width tho as that would eliminate it's ability to shrink down in size on a smaller browser size.

Option 3: Change the flex value of the second column. Bumping it up a notch will offset the ratio making it seem like the second column ate gap. A value of 3 should work. Note that with how the background image size is currently set, doing this will also make the image seem smaller on a smaller screen size. If you're going to go this route, I recommend changing the background-size property to 'cover' instead.

Option 4: Adding a max-width to the outermost div. This solution is a bit more brute force as it doesn't really address the root of the issue. It doesn't really remove the gap in a proper way, but it does make it appear smaller. The idea is that the gap only appears extremely wide on a wider screen. Limiting the outermost container to a certain width would make the gap seem smaller. Downside here tho is that the second column would also appear smaller.

I recommend giving each method a try to see which one yields the result you like best :)
Click to expand...
I wound up changing the background-size to "cover" and they're the same height now, even when I resize the window, so I don't know what was happening on my end before ._.

It also covered the big empty space in the middle!

Thanks; this was super handy!
 
  • Like
Reactions: rissa and darkflames13
Is there a way to create a box that has four separate areas- two for images, two for text? Like so:

Image.png

The first thing that comes to mind is tables, but I don't know if there would be a better code for this?
 
Kat said:
Is there a way to create a box that has four separate areas- two for images, two for text? Like so:

View attachment 154610

The first thing that comes to mind is tables, but I don't know if there would be a better code for this?
Click to expand...

Flex boxes would be your best bet! Columns work too, but they're not very mobile friendly.
 
  • Thank You
Reactions: junebug
Status
Not open for further replies.
Top Bottom
Back