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
@Matizze - You could use flex boxes and sliders. It's extremely complex, but if you're comfy with that I could get the code for you. But just so you know the one I have isn't remotely mobile friendly. You can also use accordions, but I'm not sure if that's what you meant?
 
Elle Joyner said:
@Matizze - You could use flex boxes and sliders. It's extremely complex, but if you're comfy with that I could get the code for you. But just so you know the one I have isn't remotely mobile friendly. You can also use accordions, but I'm not sure if that's what you meant?
Click to expand...
I'm 100% not comfy with anything more complex than cursive letters, but I'd love for you to share the code anyway. If anything, it might give me an idea of how to proceed.

Yeah, I'm not sure what I meant with accordions either, but I guess I like the way they kind of slowly extend if that makes any sense, but then I would have to try and make a vertical accordion without flipping the text too, and I don't know how customizable accordions are either (I'm planning on adding scrolling and a background later too) ... and I realise I am rambling... please ignore it!
 
Matizze said:
Yeah, I'm not sure what I meant with accordions either, but I guess I like the way they kind of slowly extend if that makes any sense, but then I would have to try and make a vertical accordion without flipping the text too, and I don't know how customizable accordions are either (I'm planning on adding scrolling and a background later too) ... and I realise I am rambling... please ignore it!
Click to expand...
You can do this.... But it's extremely complicated (and I've yet to fully figure it out myself >_<;)! Less complicated would be landscape images -- It's relatively easy to set a picture as an accordion slide's bg.
 
rissa said:
You can do this.... But it's extremely complicated (and I've yet to fully figure it out myself >_<;)! Less complicated would be landscape images -- It's relatively easy to set a picture as an accordion slide's bg.
Click to expand...
Hahah, perhaps I should try that instead then. At least until I've gotten better at coding :P

How do I set a picture as an accordion slide's background, by the way? I imagine I'd have to use these: { or am I completely wrong?
 
Matizze said:
Hahah, perhaps I should try that instead then. At least until I've gotten better at coding :P

How do I set a picture as an accordion slide's background, by the way? I imagine I'd have to use these: { or am I completely wrong?
Click to expand...

.
LOREM!!



I added a height code to show ya more of the picture, so you can adjust/delete it if you need to!

Code: 
[accordion=100%]{slide=[div=
   margin: -8px; 
   padding: 8px; 
   background-color: #fff; 
   background-size: 100%;
   height: 200px;
   background-image: url(https://i.ytimg.com/vi/9udYi7exojk/maxresdefault.jpg); 
   background-repeat: no-repeat; 
   background-position: 20% 20%;][color=transparent].[/color][/div]}[div=
   margin: -8px; 
   padding: 8px; 
   background-color: #fff;][div=
   padding: 5px;]LOREM!![/div][/div]{/slide}
[/accordion]

Basically my "base" code for accordions.
 
  • Thank You
Reactions: Matizze
La Reina said:
Thank you @darkflames13 !

One more question. (Since my OCD is on overdrive right now) Is there a way to make the human picture more in line? Its like floating and not attached to the center box like the demon picture is. Get what I mean? Is it the image size?
Click to expand...
Try setting the background size to 'cover' for the div containing the human pic :)
 
  • Thank You
Reactions: Reina and rissa
  • Thank You
Reactions: darkflames13
Hello!!
Sorry if this has been asked before, but I'm struggling with margins !! I have a few text boxes in a post, but when I try to move one up or down, it effects the others next to it?? I don't know how to make them independent to each other ,,
Hope this made sense, any help is welcomed !!!!
 
King said:
Hello!!
Sorry if this has been asked before, but I'm struggling with margins !! I have a few text boxes in a post, but when I try to move one up or down, it effects the others next to it?? I don't know how to make them independent to each other ,,
Hope this made sense, any help is welcomed !!!!
Click to expand...
Hmm. I'm not entirely sure I understand. Could you provide the code or a screenshot? (:
 
rissa said:
Hmm. I'm not entirely sure I understand. Could you provide the code or a screenshot? (:
Click to expand...

Yeah sure!!

| We All Float Down Here |

The three boxes with text aren't lined up the way I'd like them to be, so I try to edit that by moving the margin top! But every time I edit it so the big one moves up, the other two small ones are effected by that change. E.G, they move up or down with the box.

I'd ideally like to be able to move a box without it effecting the others!
 
Sorry for the super late reply, @King, I had to wait until I was able to get on my computer!

Now, truth be told, I almost never position my div's with margin outside of [0 auto;], which simply "centers" the outermost div I put it in. The best solution I can see here is to replace those text-boxes with flexboxes, (tho we might need to summon @darkflames13 to help with the stacking, I'm not entirely sure if flexboxes can line up like that.)

Simple flexbox div code:

Code: 
[div= 
   max-width: 600px; 
   height: auto; 
   margin: 0 auto;][div=
   display: flex;][div=
   flex: 1; 
   height: 200px; 
   margin: 5px;
   background-color: pink;]Text box 1[/div][div=
   flex: 2; 
   height: 200px; 
   margin: 5px;
   background-color: grey;]Text box 2[/div][/div]
[/div]
Preview:
Text box 1
Text box 2


It should also be completely mobile friendly!
 
  • Love
Reactions: King
rissa said:
Sorry for the super late reply, @King, I had to wait until I was able to get on my computer!

Now, truth be told, I almost never position my div's with margin outside of [0 auto;], which simply "centers" the outermost div I put it in. The best solution I can see here is to replace those text-boxes with flexboxes, (tho we might need to summon @darkflames13 to help with the stacking, I'm not entirely sure if flexboxes can line up like that.)

Simple flexbox div code:

Code: 
[div=
   max-width: 600px;
   height: auto;
   margin: 0 auto;][div=
   display: flex;][div=
   flex: 1;
   height: 200px;
   margin: 5px;
   background-color: pink;]Text box 1[/div][div=
   flex: 2;
   height: 200px;
   margin: 5px;
   background-color: grey;]Text box 2[/div][/div]
[/div]
Preview:
Text box 1
Text box 2


It should also be completely mobile friendly!
Click to expand...

Thanks so much!! I'll give it a go 8)
 
  • Like
Reactions: rissa
I has been summoned.
Sorry I'm late. Took me 5ever to get my laptop to connect to the internet again.

Anyway, to stack flexboxes on top of each other, all you do is define the flex-direction to be column.
column 1; row 1
column 1; row 2

Code: 
[div=height:200px; display:flex; flex-direction:column;
	][div=flex:1; background-color:pink; margin:5px;
		]column 1; row 1
	[/div][div=flex:1; background-color:red; margin:5px;
		]column 1; row 2
[/div][/div]

Merging this with Rissa's code, will look something like this:

column 1; row 1
column 1; row 2

column 2


Code: 
[div=max-width:600px !important; display:flex; height:200px; margin:auto;]
	[div=/*col1*/ flex:1; display:flex; flex-direction:column;
		][div=/*col1row1*/ flex:1; background-color:pink; margin:5px;
			]column 1; row 1
		[/div][div=/*col1row2*/ flex:1; background-color:red; margin:5px;
			]column 1; row 2
		[/div][/div]
	[div=/*col2*/ flex:1; background-color:grey; margin:5px;
		]column 2
	[/div]
[/div]
 
  • Love
  • Nice Execution!
Reactions: Nemopedia, Mollisol, King and 2 others
Hello folks! I hope the holidays are treating you well. A while ago, @darkflames13 gave me this awesome link to a website about flexboxes. I think flexboxes are very interesting, but the only thing I am stuck on is how to translate the HTML from that website to BBcode on Iwakuroleplay. If anyone could give me some idea of how to format the syntax correctly, I'd really appreciate it.
 
@Absyinthe

The most basic flexbox code:

Code: 
[div=
display: flex;][div=
flex: 1; 
height: #px;
margin: 5px;]lorem[/div][div=
flex: 1; 
height: #px; 
margin: 5px;]lorem[/div][/div]
 
yo! So i've been trying to figure out the whole interactive tab business but I just can't wrap my head around it. That's probably what I get for just looking at + using codes and not really figuring out what everything does. But I still thought I'd ask about it!

Here is what I'm working on

Aka I wanna make the buttons on the left switch the tabs, I feel like that's how people do those things right? Clearly, I'm missing something, or maybe it's just way out of my ability *shrug*

Code: 
[div= width: 700px; height:600px; margin: auto;][stabs=bleft|700x600] {slide=tab 1|center}
[div= margin: auto;
z-index:3;
display: flex;
width: 600px;
height: 550px;
background-color: #a89b8a;
color: black;
padding: 8px;
overflow: hidden;] [div=
display: flex;
flex-direction:column;
width: 30%;
height: 550px;
background-color: #f9f4ed;
margin-right: 7px;
][div=
width: 100%;
height: 190px;
background:url(https://media.giphy.com/media/3o751RTmURk6rtWJ4Q/giphy.gif);
background-position: -70px 0px;
][/div] [div= width: 100%; height: 35px; margin: auto; border-bottom: solid 2px #a89b8a; color: #382d27; text-align: center;] Name Name [/div]{tab=1}[div= width: 90%; height: 60px; margin: auto; background-color: #c4b5a2; color: #382d27; text-align: center;]
Basics [/div]{/tab}{tab=2}[div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Appearance [/div]{/tab}[div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Personality [/div][div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Relations [/div][/div][div=
display: flex;
width: 69%;
height: 550px;
background-color: #f9f4ed;
display:inline-block;
][div= height: 80px; border-bottom: solid 2px #a89b8a; color: #382d27;] [div= padding: px; font-size: 50px; text-align: center;] Basics[/div] [/div][/div][/div]{/slide}
{slide=tab 2|center}
[div= margin: auto;
z-index:3;
display: flex;
width: 600px;
height: 550px;
background-color: #a89b8a;
color: black;
padding: 8px;
overflow: hidden;] [div=
display: flex;
flex-direction:column;
width: 30%;
height: 550px;
background-color: #f9f4ed;
margin-right: 7px;
][div=
width: 100%;
height: 190px;
background:url(https://media.giphy.com/media/3o751RTmURk6rtWJ4Q/giphy.gif);
background-position: -70px 0px;
][/div] [div= width: 100%; height: 35px; margin: auto; border-bottom: solid 2px #a89b8a; color: #382d27; text-align: center;] Name Name [/div][div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Basics [/div][div= width: 90%; height: 60px; margin: auto; background-color: #c4b5a2; color: #382d27; text-align: center;]
Appearance [/div][div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Personality [/div][div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Relations [/div][/div][div=
display: flex;
width: 69%;
height: 550px;
background-color: #f9f4ed;
display:inline-block;
][div= height: 80px; border-bottom: solid 2px #a89b8a; color: #382d27;] [div= padding: px; font-size: 50px; text-align: center;] Appearance [/div] [/div][/div][/div]{/slide}
[/stabs] [/div]
 
R✿bbit said:
yo! So i've been trying to figure out the whole interactive tab business but I just can't wrap my head around it. That's probably what I get for just looking at + using codes and not really figuring out what everything does. But I still thought I'd ask about it!

Here is what I'm working on

Aka I wanna make the buttons on the left switch the tabs, I feel like that's how people do those things right? Clearly, I'm missing something, or maybe it's just way out of my ability *shrug*

Code: 
[div= width: 700px; height:600px; margin: auto;][stabs=bleft|700x600] {slide=tab 1|center}
[div= margin: auto;
z-index:3;
display: flex;
width: 600px;
height: 550px;
background-color: #a89b8a;
color: black;
padding: 8px;
overflow: hidden;] [div=
display: flex;
flex-direction:column;
width: 30%;
height: 550px;
background-color: #f9f4ed;
margin-right: 7px;
][div=
width: 100%;
height: 190px;
background:url(https://media.giphy.com/media/3o751RTmURk6rtWJ4Q/giphy.gif);
background-position: -70px 0px;
][/div] [div= width: 100%; height: 35px; margin: auto; border-bottom: solid 2px #a89b8a; color: #382d27; text-align: center;] Name Name [/div]{tab=1}[div= width: 90%; height: 60px; margin: auto; background-color: #c4b5a2; color: #382d27; text-align: center;]
Basics [/div]{/tab}{tab=2}[div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Appearance [/div]{/tab}[div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Personality [/div][div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Relations [/div][/div][div=
display: flex;
width: 69%;
height: 550px;
background-color: #f9f4ed;
display:inline-block;
][div= height: 80px; border-bottom: solid 2px #a89b8a; color: #382d27;] [div= padding: px; font-size: 50px; text-align: center;] Basics[/div] [/div][/div][/div]{/slide}
{slide=tab 2|center}
[div= margin: auto;
z-index:3;
display: flex;
width: 600px;
height: 550px;
background-color: #a89b8a;
color: black;
padding: 8px;
overflow: hidden;] [div=
display: flex;
flex-direction:column;
width: 30%;
height: 550px;
background-color: #f9f4ed;
margin-right: 7px;
][div=
width: 100%;
height: 190px;
background:url(https://media.giphy.com/media/3o751RTmURk6rtWJ4Q/giphy.gif);
background-position: -70px 0px;
][/div] [div= width: 100%; height: 35px; margin: auto; border-bottom: solid 2px #a89b8a; color: #382d27; text-align: center;] Name Name [/div][div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Basics [/div][div= width: 90%; height: 60px; margin: auto; background-color: #c4b5a2; color: #382d27; text-align: center;]
Appearance [/div][div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Personality [/div][div= width: 90%; height: 60px; margin: auto; background-color: #a89b8a; color: #382d27; text-align: center;]
Relations [/div][/div][div=
display: flex;
width: 69%;
height: 550px;
background-color: #f9f4ed;
display:inline-block;
][div= height: 80px; border-bottom: solid 2px #a89b8a; color: #382d27;] [div= padding: px; font-size: 50px; text-align: center;] Appearance [/div] [/div][/div][/div]{/slide}
[/stabs] [/div]
Click to expand...
Not sure why {tab} isn't working when outside the divs, but try putting them inside the divs instead. It wont make the entire box a button, but at least the words will link to their respective tabs.
 
darkflames13 said:
Not sure why {tab} isn't working when outside the divs, but try putting them inside the divs instead. It wont make the entire box a button, but at least the words will link to their respective tabs.
Click to expand...

oh well okay, that worked, and it's something at least, haha, at least I know I wasn't doing it completely wrong, and that works just as good as anything i suppose! thank you <3
 
  • Like
Reactions: darkflames13
Hey guys! A question, if it's allowed here. I'm currently having problems to creating roleplay profiles with those borders.
 
Rapping-Monster said:
Hey guys! A question, if it's allowed here. I'm currently having problems to creating roleplay profiles with those borders.
Click to expand...
Questions are always welcomed here! I'd love to help - but I'll need you to elaborate further. Div borders or something else entirely?
 
  • Like
Reactions: Rapping-Monster
Status
Not open for further replies.
Top Bottom
Back