RESOURCE BBCode Help

  • Welcome back, Iwaku! While we are still working on the site to get it back into shape, we've come back online so you can get back to doing what you love. Check out this announcement for more details.

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#1
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.
[accordion=100%]{slide=
F. A. Q.
}{/slide}{slide=
H E L P F U LxxL I N K S
}{/slide}[/size][/accordion]
 
Last edited:

darkflames13

Fancy Coding Fucker
DONATING MEMBER
Roleplay Invitations
Group Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
9PM ~ 2AM (GMT + 8)
Writing Levels
Adept, Advanced
Genders You Prefer Playing
Male, Female, Androgynous
Genre You DON'T Like
Yuri. Yaoi. Furry. Mecha.
I thought I made a simple enough code buuuut noooooo.

The Queen's Chambers

Its the first one with Kathryn. It keeps cutting off the 'N' in her name. WHHHYYY?
It's because the text doesn't fit in the area provided. Try removing the side paddings (padding: 130px 0;) and changing the text-align to centre it :)
 

Reina

I'll always be THE queen
ROLEPLAY DEPARTMENT
DONATING MEMBER
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
In the mornings usually but only during the week. Weekends are devoted to the family.
Writing Levels
Adept, Advanced, Adaptable
Genders You Prefer Playing
No Preferences
Playing Style- Passive or Aggressive
Both, depends on mood. If I have a lot of ideas for a scene then I will take the aggressive role but if I don't I'll slip into passive. I'm ok with both.
Favorite Genres
Modern, Magical, Romance, Medieval
Genre You DON'T Like
Scifi, Horror, Yaoi, Furry, Slice of Life
It's because the text doesn't fit in the area provided. Try removing the side paddings (padding: 130px 0;) and changing the text-align to centre it :)
The name fits now but the text is on her face instead of at the bottom
 

darkflames13

Fancy Coding Fucker
DONATING MEMBER
Roleplay Invitations
Group Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
9PM ~ 2AM (GMT + 8)
Writing Levels
Adept, Advanced
Genders You Prefer Playing
Male, Female, Androgynous
Genre You DON'T Like
Yuri. Yaoi. Furry. Mecha.
The name fits now but the text is on her face instead of at the bottom
You can put back the paddings you had for the top and bottom, but not the right and left sides :'D
Defining a second parameter in the padding property allows for a different value to be set for the sides.
[div=
background:url(http://data.whicdn.com/images/65745597/large.gif);
width: 500px;
height: 250px;
background-position: ;
margin: auto;
border-radius: 80px;
border: 12px solid #8B0000;]

[div=
font-family: GARAMOND; text-transform: UPPERCASE; font-size: 57px; color: #8B0000; text-align: center; padding:130px 0; letter-spacing: -3px; text-shadow: 1px 1px 1px #b5b5b5;]Kathryn[/div][/div]

[div=background:#1d1d1d; font-size:15px; font-family:courier new; border:1px solid #1d1d1d; color:#ececec;][div=padding:10px;]Code:[/div][div=padding:10px; background:#3e3e3e;][div=max-height:200px; overflow-y:auto; background:#3e3e3e; color:#d2d2d2; font-size:12px; font-family:courier new; line-height:20px;][plain][div=
background:url(http://data.whicdn.com/images/65745597/large.gif);
width: 500px;
height: 250px;
background-position: ;
margin: auto;
border-radius: 80px;
border: 12px solid #8B0000;]

[div=
font-family: GARAMOND; text-transform: UPPERCASE; font-size: 57px; color: #8B0000; text-align: center; padding:130px 0; letter-spacing: -3px; text-shadow: 1px 1px 1px #b5b5b5;]Kathryn[/div][/div][/plain]
[/div][/div][/div]

Orrr you can turn the outermost div into a flexbox with align-items set to flex-end and justify-content set to center.
[div=
background:url(http://data.whicdn.com/images/65745597/large.gif);
width: 500px;
height: 250px;
background-position: ;
margin: auto;
border-radius: 80px;
border: 12px solid #8B0000; display:flex; align-items:flex-end; justify-content:center;]

[div=
font-family: GARAMOND; text-transform: UPPERCASE; font-size: 57px; color: #8B0000; text-align: center; letter-spacing: -3px; text-shadow: 1px 1px 1px #b5b5b5;]Kathryn[/div][/div]

[div=background:#1d1d1d; font-size:15px; font-family:courier new; border:1px solid #1d1d1d; color:#ececec;][div=padding:10px;]Code:[/div][div=padding:10px; background:#3e3e3e;][div=max-height:200px; overflow-y:auto; background:#3e3e3e; color:#d2d2d2; font-size:12px; font-family:courier new; line-height:20px;][plain][div=
background:url(http://data.whicdn.com/images/65745597/large.gif);
width: 500px;
height: 250px;
background-position: ;
margin: auto;
border-radius: 80px;
border: 12px solid #8B0000; display:flex; align-items:flex-end; justify-content:center;]

[div=
font-family: GARAMOND; text-transform: UPPERCASE; font-size: 57px; color: #8B0000; text-align: center; letter-spacing: -3px; text-shadow: 1px 1px 1px #b5b5b5;]Kathryn[/div][/div][/plain]
[/div][/div][/div]
 

Astroblaze

Traverser#824|The Ally|Autobot|Knight of Doom
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
A Few Posts a Week
My Usual Online Time
9am-9pm every day, though availability within that span depends on IRL activity
Writing Levels
Intermediate, Adept, Adaptable
Genders You Prefer Playing
Male, Female, Androgynous, No Preferences
Playing Style- Passive or Aggressive
Neutral, passive leanings
Favorite Genres
fantasy, sci-fi, superheroes, action, adventure, combat, science fantasy, supernatural, hurt/comfort, modern fantasy
Genre You DON'T Like
honestly I haven't yet found a genre I specifically don't like
Hai, I'm trying to put together some things for an RP I'm thinking about starting but my scoreboard isn't cooperating O^Q I want the top three scores to align under the hr in one line and normally for this kind of thing I'd use float commands but apparently there is no float: center option, which would be perfect for the second place score :< What should I do? (I just have it set up with text-align for the proper x-axis positions but the y-axis is off)
I would also like to put the scores into probably three or four columns but I have absolutely no clue what code would do that.

link to what it looks like as-is

Code:
[div=border-radius: 15px; margin: 10px; padding: 15px; border: 20px #ffbf00 solid; background-color: #000; height: 640px; max-width: 800px !important;][div==margin: 10px; padding: 10px; font-size: 25px; text-align: center; color: #9f3;][font=Aldrich]【 SCOREBOARD 】[/font][/div][hr="border: 1px solid #9f3;"][/hr][div=font-size: 15px; color: #9f3;][font=Aldrich][div=text-align: left;]FIRST PLACE: SCORE[/div][div=text-align: center;]SECOND PLACE: SCORE[/div][div=text-align: right;]THIRD PLACE: SCORE[/div][/font][/div][div=max-width: 800px; max-height: 500px; overflow-x: scroll; padding: 15px; color: #9f3;][font=Courier New][u]A[/u]
N/A

[u]B[/u]
N/A

[u]C[/u]
N/A

[u]D[/u]
N/A

[u]E[/u]
N/A

[u]F[/u]
N/A

[u]G[/u]
N/A

[u]H[/u]
N/A

[u]I[/u]
N/A

[u]J[/u]
N/A

[u]K[/u]
N/A

[u]L[/u]
N/A

[u]M[/u]
N/A

[u]N[/u]
N/A

[u]O[/u]
N/A

[u]P[/u]
N/A

[u]Q[/u]
N/A

[u]R[/u]
N/A

[u]S[/u]
N/A

[u]T[/u]
N/A

[u]U[/u]
N/A

[u]V[/u]
N/A

[u]W[/u]
N/A

[u]X[/u]
N/A

[u]Y[/u]
N/A

[u]Z[/u]
N/A
[/font][/div][/div]
[accordion]
{slide=Battle Points (BP)}

{/slide}
{slide=Demonstration}

{/slide}
[/accordion]
 

rissa

the clairvoyant pterodactyl
DONATING MEMBER
Hai, I'm trying to put together some things for an RP I'm thinking about starting but my scoreboard isn't cooperating O^Q I want the top three scores to align under the hr in one line and normally for this kind of thing I'd use float commands but apparently there is no float: center option, which would be perfect for the second place score :< What should I do? (I just have it set up with text-align for the proper x-axis positions but the y-axis is off)
I would also like to put the scores into probably three or four columns but I have absolutely no clue what code would do that.

link to what it looks like as-is

Code:
[div=border-radius: 15px; margin: 10px; padding: 15px; border: 20px #ffbf00 solid; background-color: #000; height: 640px; max-width: 800px !important;][div==margin: 10px; padding: 10px; font-size: 25px; text-align: center; color: #9f3;][font=Aldrich]【 SCOREBOARD 】[/font][/div][hr="border: 1px solid #9f3;"][/hr][div=font-size: 15px; color: #9f3;][font=Aldrich][div=text-align: left;]FIRST PLACE: SCORE[/div][div=text-align: center;]SECOND PLACE: SCORE[/div][div=text-align: right;]THIRD PLACE: SCORE[/div][/font][/div][div=max-width: 800px; max-height: 500px; overflow-x: scroll; padding: 15px; color: #9f3;][font=Courier New][u]A[/u]
N/A

[u]B[/u]
N/A

[u]C[/u]
N/A

[u]D[/u]
N/A

[u]E[/u]
N/A

[u]F[/u]
N/A

[u]G[/u]
N/A

[u]H[/u]
N/A

[u]I[/u]
N/A

[u]J[/u]
N/A

[u]K[/u]
N/A

[u]L[/u]
N/A

[u]M[/u]
N/A

[u]N[/u]
N/A

[u]O[/u]
N/A

[u]P[/u]
N/A

[u]Q[/u]
N/A

[u]R[/u]
N/A

[u]S[/u]
N/A

[u]T[/u]
N/A

[u]U[/u]
N/A

[u]V[/u]
N/A

[u]W[/u]
N/A

[u]X[/u]
N/A

[u]Y[/u]
N/A

[u]Z[/u]
N/A
[/font][/div][/div]
[accordion]
{slide=Battle Points (BP)}

{/slide}
{slide=Demonstration}

{/slide}
[/accordion]
You could use a flexbox?

FIRST PLACE: SCORE
SECOND PLACE: SCORE
THIRD PLACE: SCORE


[div=display: flex;][div= flex:1;]FIRST PLACE: SCORE[/div][div=flex:1;]SECOND PLACE: SCORE[/div][div=flex:1;]THIRD PLACE: SCORE[/div][/div]
 

Astroblaze

Traverser#824|The Ally|Autobot|Knight of Doom
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
A Few Posts a Week
My Usual Online Time
9am-9pm every day, though availability within that span depends on IRL activity
Writing Levels
Intermediate, Adept, Adaptable
Genders You Prefer Playing
Male, Female, Androgynous, No Preferences
Playing Style- Passive or Aggressive
Neutral, passive leanings
Favorite Genres
fantasy, sci-fi, superheroes, action, adventure, combat, science fantasy, supernatural, hurt/comfort, modern fantasy
Genre You DON'T Like
honestly I haven't yet found a genre I specifically don't like
You could use a flexbox?

FIRST PLACE: SCORE
SECOND PLACE: SCORE
THIRD PLACE: SCORE


[div=display: flex;][div= flex:1;]FIRST PLACE: SCORE[/div][div=flex:1;]SECOND PLACE: SCORE[/div][div=flex:1;]THIRD PLACE: SCORE[/div][/div]
oh is that what those do? cool, thank ^^
Any thoughts on how I could do columns? I'm still p new to divboxing ^^"
 
Writing Levels
Elementary, Intermediate
Genders You Prefer Playing
Female, Androgynous, Primarily Prefer Female
Playing Style- Passive or Aggressive
Depends on character
Favorite Genres
Fantasy, Romance, ERP
Genre You DON'T Like
weird stuff
I'm having problems with tables as there is always a large space above it that i don't know how to remove!! I've added the raw code as well as how it looks when functional, Please help me!
HTML:
[table="border: 3px solid;"]
[tr][td]Attribute[/td]      [td]Points[/td]   [td]Class Gains[/td]  [td]Multiplier[/td]  [td]Total[/td][/tr]
[tr][td]Strength[/td]       [td]20[/td]          [td][/td]                       [td]2[/td]                [td]80[/td][/tr]
[tr][td]Intelligence[/td]  [td]240[/td]        [td][/td]                       [td]1[/td]                [td]240[/td][/tr]
[tr][td]Vitality[/td]          [td]60[/td]          [td][/td]                       [td]2[/td]                [td]120[/td][/tr]
[tr][td]Constitution[/td] [td]90[/td]          [td][/td]                        [td]1[/td]                [td]90[/td][/tr]
[tr][td]Wisdom[/td]       [td]95[/td]          [td][/td]                        [td]1[/td]                [td]95[/td][/tr]
[tr][td]Endurance[/td]   [td]100[/td]        [td][/td]                        [td]1.5*2[/td]         [td]300[/td][/tr]
[tr][td]Dexterity[/td]      [td]15[/td]          [td][/td]                        [td]1[/td]                [td]15[/td][/tr]
[tr][td]Agility[/td]           [td]15[/td]          [td][/td]                        [td]1[/td]               [td]15[/td][/tr]
[tr][td]Luck[/td]             [td]15[/td]          [td][/td]                        [td]1[/td]               [td]15[/td][/tr]
[tr][td]Charisma[/td]     [td]45[/td]          [td][/td]                        [td]1[/td]               [td]45[/td][/tr]
[tr][td]Perception[/td]   [td]70[/td]          [td][/td]                        [td]1.5*2[/td]         [td]210[/td][/tr]
[tr][td]Faith[/td]            [td]60[/td]          [td][/td]                        [td]1[/td]                [td]60[/td][/tr]
[tr][td]Karma[/td]          [td]15[/td]         [td][/td]                        [td]1[/td]                [td]15[/td][/tr]
[/table]

Attribute

Points

Class Gains

Multiplier

Total

Strength

20

 

2

80

Intelligence

240

 

1

240

Vitality

60

 

2

120

Constitution

90

 

1

90

Wisdom

95

 

1

95

Endurance

100

 

1.5*2

300

Dexterity

15

 

1

15

Agility

15

 

1

15

Luck

15

 

1

15

Charisma

45

 

1

45

Perception

70

 

1.5*2

210

Faith

60

 

1

60

Karma

15

 

1

15

 

darkflames13

Fancy Coding Fucker
DONATING MEMBER
Roleplay Invitations
Group Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
9PM ~ 2AM (GMT + 8)
Writing Levels
Adept, Advanced
Genders You Prefer Playing
Male, Female, Androgynous
Genre You DON'T Like
Yuri. Yaoi. Furry. Mecha.
Any thoughts on how I could do columns? I'm still p new to divboxing ^^"
Uber late response here, but you could use the table bbcode to make columns. Or like Rissa showed, you could use divs that use flexboxes :)

Table:

Column 1

Column 2

Column 3


Code:
[table][tr][td]Column 1[/td][td]Column 2[/td][td]Column 3[/td][/tr][/table]
Flexbox div:
Column 1

Column 2

Column 3


Code:
[div=display:flex;][div=margin:5px;]Column 1[/div]
[div=margin:5px;]Column 2[/div]
[div=margin:5px;]Column 3[/div]
[/div]



I'm having problems with tables as there is always a large space above it that i don't know how to remove!! I've added the raw code as well as how it looks when functional, Please help me!
Did a little poking around, the space before the table is actually caused by the linebreaks between the table rows ([tr][/tr]). Removing the line breaks fixes the problem, but sadly it ruins the code's readability :c
[table="border: 3px solid;"][tr][td]Attribute[/td] [td]Points[/td] [td]Class Gains[/td] [td]Multiplier[/td] [td]Total[/td][/tr][tr][td]Strength[/td] [td]20[/td] [td][/td] [td]2[/td] [td]80[/td][/tr][tr][td]Intelligence[/td] [td]240[/td] [td][/td] [td]1[/td] [td]240[/td][/tr][tr][td]Vitality[/td] [td]60[/td] [td][/td] [td]2[/td] [td]120[/td][/tr][tr][td]Constitution[/td] [td]90[/td] [td][/td] [td]1[/td] [td]90[/td][/tr][tr][td]Wisdom[/td] [td]95[/td] [td][/td] [td]1[/td] [td]95[/td][/tr][tr][td]Endurance[/td] [td]100[/td] [td][/td] [td]1.5*2[/td] [td]300[/td][/tr][tr][td]Dexterity[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Agility[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Luck[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Charisma[/td] [td]45[/td] [td][/td] [td]1[/td] [td]45[/td][/tr][tr][td]Perception[/td] [td]70[/td] [td][/td] [td]1.5*2[/td] [td]210[/td][/tr][tr][td]Faith[/td] [td]60[/td] [td][/td] [td]1[/td] [td]60[/td][/tr][tr][td]Karma[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][/table]

[code]
[table="border: 3px solid;"][tr][td]Attribute[/td] [td]Points[/td] [td]Class Gains[/td] [td]Multiplier[/td] [td]Total[/td][/tr][tr][td]Strength[/td] [td]20[/td] [td][/td] [td]2[/td] [td]80[/td][/tr][tr][td]Intelligence[/td] [td]240[/td] [td][/td] [td]1[/td] [td]240[/td][/tr][tr][td]Vitality[/td] [td]60[/td] [td][/td] [td]2[/td] [td]120[/td][/tr][tr][td]Constitution[/td] [td]90[/td] [td][/td] [td]1[/td] [td]90[/td][/tr][tr][td]Wisdom[/td] [td]95[/td] [td][/td] [td]1[/td] [td]95[/td][/tr][tr][td]Endurance[/td] [td]100[/td] [td][/td] [td]1.5*2[/td] [td]300[/td][/tr][tr][td]Dexterity[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Agility[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Luck[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Charisma[/td] [td]45[/td] [td][/td] [td]1[/td] [td]45[/td][/tr][tr][td]Perception[/td] [td]70[/td] [td][/td] [td]1.5*2[/td] [td]210[/td][/tr][tr][td]Faith[/td] [td]60[/td] [td][/td] [td]1[/td] [td]60[/td][/tr][tr][td]Karma[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][/table][/code]
 

Astroblaze

Traverser#824|The Ally|Autobot|Knight of Doom
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
A Few Posts a Week
My Usual Online Time
9am-9pm every day, though availability within that span depends on IRL activity
Writing Levels
Intermediate, Adept, Adaptable
Genders You Prefer Playing
Male, Female, Androgynous, No Preferences
Playing Style- Passive or Aggressive
Neutral, passive leanings
Favorite Genres
fantasy, sci-fi, superheroes, action, adventure, combat, science fantasy, supernatural, hurt/comfort, modern fantasy
Genre You DON'T Like
honestly I haven't yet found a genre I specifically don't like
Uber late response here, but you could use the table bbcode to make columns. Or like Rissa showed, you could use divs that use flexboxes :)

Table:

Column 1

Column 2

Column 3


Code:
[table][tr][td]Column 1[/td][td]Column 2[/td][td]Column 3[/td][/tr][/table]
Flexbox div:
Column 1

Column 2

Column 3


Code:
[div=display:flex;][div=margin:5px;]Column 1[/div]
[div=margin:5px;]Column 2[/div]
[div=margin:5px;]Column 3[/div]
[/div]




Did a little poking around, the space before the table is actually caused by the linebreaks between the table rows ([tr][/tr]). Removing the line breaks fixes the problem, but sadly it ruins the code's readability :c
[table="border: 3px solid;"][tr][td]Attribute[/td] [td]Points[/td] [td]Class Gains[/td] [td]Multiplier[/td] [td]Total[/td][/tr][tr][td]Strength[/td] [td]20[/td] [td][/td] [td]2[/td] [td]80[/td][/tr][tr][td]Intelligence[/td] [td]240[/td] [td][/td] [td]1[/td] [td]240[/td][/tr][tr][td]Vitality[/td] [td]60[/td] [td][/td] [td]2[/td] [td]120[/td][/tr][tr][td]Constitution[/td] [td]90[/td] [td][/td] [td]1[/td] [td]90[/td][/tr][tr][td]Wisdom[/td] [td]95[/td] [td][/td] [td]1[/td] [td]95[/td][/tr][tr][td]Endurance[/td] [td]100[/td] [td][/td] [td]1.5*2[/td] [td]300[/td][/tr][tr][td]Dexterity[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Agility[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Luck[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Charisma[/td] [td]45[/td] [td][/td] [td]1[/td] [td]45[/td][/tr][tr][td]Perception[/td] [td]70[/td] [td][/td] [td]1.5*2[/td] [td]210[/td][/tr][tr][td]Faith[/td] [td]60[/td] [td][/td] [td]1[/td] [td]60[/td][/tr][tr][td]Karma[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][/table]

[code]
[table="border: 3px solid;"][tr][td]Attribute[/td] [td]Points[/td] [td]Class Gains[/td] [td]Multiplier[/td] [td]Total[/td][/tr][tr][td]Strength[/td] [td]20[/td] [td][/td] [td]2[/td] [td]80[/td][/tr][tr][td]Intelligence[/td] [td]240[/td] [td][/td] [td]1[/td] [td]240[/td][/tr][tr][td]Vitality[/td] [td]60[/td] [td][/td] [td]2[/td] [td]120[/td][/tr][tr][td]Constitution[/td] [td]90[/td] [td][/td] [td]1[/td] [td]90[/td][/tr][tr][td]Wisdom[/td] [td]95[/td] [td][/td] [td]1[/td] [td]95[/td][/tr][tr][td]Endurance[/td] [td]100[/td] [td][/td] [td]1.5*2[/td] [td]300[/td][/tr][tr][td]Dexterity[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Agility[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Luck[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][tr][td]Charisma[/td] [td]45[/td] [td][/td] [td]1[/td] [td]45[/td][/tr][tr][td]Perception[/td] [td]70[/td] [td][/td] [td]1.5*2[/td] [td]210[/td][/tr][tr][td]Faith[/td] [td]60[/td] [td][/td] [td]1[/td] [td]60[/td][/tr][tr][td]Karma[/td] [td]15[/td] [td][/td] [td]1[/td] [td]15[/td][/tr][/table][/code]
I figured it out: there's a code for columns in CSS that wasn't in the Divtionary
 

Calypso Major

Musical Astronomy Nerd
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
One Post a Day, A Few Posts a Week
My Usual Online Time
I'm more active on the weekends, but with summer expect me to attempt to check this site once a day.
Writing Levels
Intermediate, Adept, Adaptable
Genders You Prefer Playing
Primarily Prefer Female
Playing Style- Passive or Aggressive
It depends, to be honest. If I'm playing a more major part (example being within a small group RP) then I'll try to be more aggressive. If it's a very large story with more prominent characters already being played, then I'll most likely play more passively.
Favorite Genres
Horror, Fantasy, Modern (in that order, those are my top three)
Genre You DON'T Like
...None, specifically?
I'm not sure if this question's been asked already (and if it has, sorry!)-- but for the table/flex-box columns, could you (theoretically?) put two div-boxes next to one another?

For context, I'm relatively new to the BBcoding business-- having only a basic concept of div-boxes and fieldboxes and what-have-you. Now, I'm attempting to put all those things together to create a CS template (of sorts)
(here is the prosecutor post) with a format inspired by this post and this post (both by darkflames13 darkflames13 ).

Obviously, I don't want to steal their coding (that would be rude!)-- and already I've attempted to use both the float feature (boy-oh-boy was that a mistake) and making the widths of both div-boxes small enough so that they
should have fit in one line. When that didn't work, I tried the columns method mentioned in the F.A.Q. section of this thread-- adjusting the length and width to be the same as my div-boxes...and seeing as how the end result looked like a digital crime scene, I caved and decided to ask for help.

Also, one more question. Is there someway to re-size images with coding? Or do I need to use an image-resizer on the web?

(Sorry for the lengthy post!)
 

darkflames13

Fancy Coding Fucker
DONATING MEMBER
Roleplay Invitations
Group Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
9PM ~ 2AM (GMT + 8)
Writing Levels
Adept, Advanced
Genders You Prefer Playing
Male, Female, Androgynous
Genre You DON'T Like
Yuri. Yaoi. Furry. Mecha.
I'm not sure if this question's been asked already (and if it has, sorry!)-- but for the table/flex-box columns, could you (theoretically?) put two div-boxes next to one another?

For context, I'm relatively new to the BBcoding business-- having only a basic concept of div-boxes and fieldboxes and what-have-you. Now, I'm attempting to put all those things together to create a CS template (of sorts)
(here is the prosecutor post) with a format inspired by this post and this post (both by darkflames13 darkflames13 ).

Obviously, I don't want to steal their coding (that would be rude!)-- and already I've attempted to use both the float feature (boy-oh-boy was that a mistake) and making the widths of both div-boxes small enough so that they
should have fit in one line. When that didn't work, I tried the columns method mentioned in the F.A.Q. section of this thread-- adjusting the length and width to be the same as my div-boxes...and seeing as how the end result looked like a digital crime scene, I caved and decided to ask for help.

Also, one more question. Is there someway to re-size images with coding? Or do I need to use an image-resizer on the web?

(Sorry for the lengthy post!)
From what I saw from your code, I think simply adding display:inline-block to your two column divs should put them on the same line beside each other :)

If you’re interested in using flex boxes instead tho, I explained them a bit in a post here. Just remove the code for the rows from it and you should have the bare bones for a 2 column layout!

Edit: forgot to answer the other question :’D You can use divs to resize an image, but you’re going to have to set it as a background image with the background-size property set to cover c:
 
Last edited:

Calypso Major

Musical Astronomy Nerd
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
One Post a Day, A Few Posts a Week
My Usual Online Time
I'm more active on the weekends, but with summer expect me to attempt to check this site once a day.
Writing Levels
Intermediate, Adept, Adaptable
Genders You Prefer Playing
Primarily Prefer Female
Playing Style- Passive or Aggressive
It depends, to be honest. If I'm playing a more major part (example being within a small group RP) then I'll try to be more aggressive. If it's a very large story with more prominent characters already being played, then I'll most likely play more passively.
Favorite Genres
Horror, Fantasy, Modern (in that order, those are my top three)
Genre You DON'T Like
...None, specifically?
Thank you so much! I used the inline-block method, and they both showed up side by side! (^ - ^)

...However, now I'm having an issue of them not vertically lining up with one another. (o . o '') Both of my div-boxes are the same height, and the only difference between the two is a (overflow-y: scroll) property to the second one. Now, the second one is "raised" higher than my first, and I'm sort of stuck on what went wrong.

Could it just be the format of my inline-blocks?

( Link here )
 

darkflames13

Fancy Coding Fucker
DONATING MEMBER
Roleplay Invitations
Group Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
9PM ~ 2AM (GMT + 8)
Writing Levels
Adept, Advanced
Genders You Prefer Playing
Male, Female, Androgynous
Genre You DON'T Like
Yuri. Yaoi. Furry. Mecha.
Thank you so much! I used the inline-block method, and they both showed up side by side! (^ - ^)

...However, now I'm having an issue of them not vertically lining up with one another. (o . o '') Both of my div-boxes are the same height, and the only difference between the two is a (overflow-y: scroll) property to the second one. Now, the second one is "raised" higher than my first, and I'm sort of stuck on what went wrong.

Could it just be the format of my inline-blocks?

( Link here )
Try removing the line break between the first column’s closing div and the second column’s opening one (if there is one). If that doesn’t work, try adding a “vertical-align:top;” to at least one of them :)
 

Calypso Major

Musical Astronomy Nerd
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
One Post a Day, A Few Posts a Week
My Usual Online Time
I'm more active on the weekends, but with summer expect me to attempt to check this site once a day.
Writing Levels
Intermediate, Adept, Adaptable
Genders You Prefer Playing
Primarily Prefer Female
Playing Style- Passive or Aggressive
It depends, to be honest. If I'm playing a more major part (example being within a small group RP) then I'll try to be more aggressive. If it's a very large story with more prominent characters already being played, then I'll most likely play more passively.
Favorite Genres
Horror, Fantasy, Modern (in that order, those are my top three)
Genre You DON'T Like
...None, specifically?
Try removing the line break between the first column’s closing div and the second column’s opening one (if there is one). If that doesn’t work, try adding a “vertical-align:top;” to at least one of them :)
Thank you again! I added the "vertical-align: top;" to my first box, and it worked!
 

Absyinthe

Creator of Worlds
DONATING MEMBER
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
A Few Posts a Week, Slow As Molasses
My Usual Online Time
Everyday
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Male, Female
Playing Style- Passive or Aggressive
A little bit of both.
Favorite Genres
Fantasy, Modern, Magical, Sc-fi, Horror, Steampunk, anything really
Genre You DON'T Like
I don't really mind Yaoi but something that doesn't have a good plot.
Is there anyway to make the bullet points mobile friendly? They always shift too far to the right and cut off the text when I try and combine them with my code.
 

darkflames13

Fancy Coding Fucker
DONATING MEMBER
Roleplay Invitations
Group Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
9PM ~ 2AM (GMT + 8)
Writing Levels
Adept, Advanced
Genders You Prefer Playing
Male, Female, Androgynous
Genre You DON'T Like
Yuri. Yaoi. Furry. Mecha.
Is there anyway to make the bullet points mobile friendly? They always shift too far to the right and cut off the text when I try and combine them with my code.
Not sure but, maybe try wrapping them around a div with a max-width set?
 

oerba

avid procrastinator.
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
A Few Posts A Day, One Post a Day, A Few Posts a Week, One Post a Week, Slow As Molasses
Writing Levels
Adept, Advanced, Adaptable
Genders You Prefer Playing
No Preferences
Playing Style- Passive or Aggressive
I'm fine with doing both, although I tend to be more on the passive side.
Favorite Genres
Slice of Life, Modern, Horror, Mystery, Drama, Fantasy, Angst, Tragedy
Genre You DON'T Like
Furry, Most Fandoms
so i'm kinda struggling with trying to make my coding look all pretty and stuff but i've figured out some stuff so far!! but i'm stuck lmfao
basically, what i need help with is creating the other textbox that i'd put all of the major info in. i wanted it to be next to the lil box i created and have the scrolling function (which i'm also confused about)
on top of all that, i wanted the teal text (ie appearance, first look, etc) to act as tabs. so you'd click on the words and it'd take you to a different textbook with different info, but i can't figure out how to do that either..

Code:
[div=display: inline-block; height: 500px; width: 220px; vertical-align: top; background-color: #ffffff; margin: auto;][div="flex: 1; background-color: #ffffff;"][IMG]https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fd2evmtiohlxukx.cloudfront.net%2Fuploads%2Fmodel-profile-images%2Fdiego-barrueco%2F1971_DIEGO8371-1-826x850.jpg&f=1[/IMG]  [/div]

 [div=height: 50px; width: 400px; background-color: #fffff; margin: auto; margin-top: -45px; font-family: Chaucer; color: #ffdab9; letter-spacing: 3px;]

[CENTER]luca jaxon amello[/CENTER]
[/div][div=color: #7FFFD4; text-align: center; font-family: Chaucer; font-size: 0.5em;]
A HEARTBREAKING LOSER[/div]
[div= color: #7FFFD4; text-align: center; font-family: Chaucer; letter-spacing: 2px; font-size: .8em;]appearance

first look

digging a little deeper

relationships

history[/div][/div]

code2.PNG





luca jaxon amello​

A HEARTBREAKING LOSER

appearance

first look

digging a little deeper

relationships

history


ik im helpless but thank you to anyone who tries to assist me !!
 
Last edited:

Vio

Lavender Drops
Roleplay Invitations
One on One Roleplays, Chat Roleplays, Not Taking RP Invites at this Time, Private Convo Roleplays
Posting Speed
A Few Posts a Week, One Post a Week, Slow As Molasses
My Usual Online Time
Mon - Thurs I have school from 8am - 2pm. Will not write during that time, but will be active for plotting or chatting. Will be available for posts 3pm - 11pm. I usually work thurs - sun, but my schedule is not fixed. May or may not be able to post during work hours.
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
No Preferences
Playing Style- Passive or Aggressive
I can switch back and forth between passive and aggressive play style. I used to be really aggressive, but these days I'm really tired most the time or busy. I just don't have the energy to be as aggressive these days, so I like finding partners who I can lean on for creative input when I can't provide.
Favorite Genres
I don't have a favorite genre. I can role-play under any genre and I enjoy doing so. Though, I tend to stray more towards Fantasy, Modern, Scifi, Drama, Magical, Supernatural, and Romance (Yaoi/Hetero/Yuri).
Genre You DON'T Like
My least favorites are horror, historical, and western.
Hey guys. So I am not new to coding, but I have never had to build my own div code. Usually I've used codes others have provided for me, and I end up altering the code into something new by accident. I tried exploring with in in my own thread recently, and I just don't get it. I recently wanted to recode an old layout for a CS but I am not sure what the proper div codes I need to get what I am looking for. I want the general layout of the CS to remain the same, the only difference is that I don't want there to be an accordion but a text box with a scroll bar. I tried doing it myself and couldn't get the code to work.
Screenshot

The link above is the current layout of the post. None of it is using div. Here is what it looks like when editing the post.
Code:
[LEFT][imga=left]http://i292.photobucket.com/albums/mm10/violaceous/1212121images%201_zpsszqhowwf.png[/imga][/LEFT]
[RIGHT]"Don't let the looks fool you, I was made with more spice than sugar, sugar."
-Ariah[/RIGHT]
[LEFT][/LEFT]
[CENTER][accordion=bright|50%]
{slide=⌈GENERAL INFO⌋|center}
Name
Ariah

Age

Sex

Gender

Orientation

{/slide}

{slide=⌈COMMITTED CRIME(S)⌋|center|open}
Crimes

Level
[1][2][3]

Gang

Position

{/slide}

{slide=⌈APPEARANCE⌋|center|open}
Facial Structure

Body Structure

Eye Color

Hair Color

Height

Weight

Skin Tone

Scars

Tattoos

Piercings

Marks

{/slide}

{slide=⌈PERSONALITY⌋|center|open}
Five Good Traits

Five Bad Traits

Details

Quirks

Like

Dislikes

{/slide}

{slide=⌈STRENGHTS⌋|center|open}
Arsenal

Physical

Mental

Contraband

{/slide}

{/slide}
{slide=⌈WEAKNESSES⌋|center|open}
Fears

Physical

Mental

{/slide}

{/slide}
{slide=⌈RELATIONSHIPS⌋|center|open}

Allies

Enemies

{/slide}

{/slide}
{slide=⌈MISC⌋|center|open}

Theme Song

Extra

{/slide}

[/accordion]
[/CENTER]
 

AshenAngel

Edgesquire
DONATING MEMBER
Roleplay Invitations
Group Roleplays, One on One Roleplays, Private Convo Roleplays
Posting Speed
Several Posts a Day, A Few Posts A Day, One Post a Day, A Few Posts a Week, One Post a Week
My Usual Online Time
Whenever I can get on.
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Male, Female, Primarily Prefer Male
Playing Style- Passive or Aggressive
I'm fine either way, though it depends on which of my characters you'd like to work with.
Favorite Genres
Fantasy, Comedy, Medieval, Romance, Sci-Fi, Modern
Genre You DON'T Like
No smexy time for you.
Hello there great and powerful coding wizards. I'm trying to get these two pictures to align side by side in the character sheet below. I somehow managed to do it on another sheet using two different images I was working on while I was drunk, but that attempt didn't work when I applied the same method to this sheet.

Also, how does one center a youtube video that is inside a div box on a sheet?



Code:
[div=max-width: 800px !important; max-height: 900px; padding: 10px; margin: auto; border: 10px #94f9f9; border-radius: 15px;
background-image: url(https://i.pinimg.com/originals/11/7e/d3/117ed3a30f949a6cacbb576ae93e4c38.jpg);
background-position: repeat center fixed][div=background-color: #fff; max-width: 750px !important; padding: 20px; margin: 10px; border: 10px #fff; border-radius: 30%; font-size: 40px; text-align: center; color: black;][FONT=Aldrich]【 Matthew Volt 】[/FONT][/div][div=border-radius: 15px; margin: 10px; padding: 15px; border: 10px #000 solid; background-color: #fff; max-height: 500px; overflow-y: scroll; overflow-x: hidden; max-width: 800px !important;][div="position: center; display:inline-block; border-radius: 4px; width: 750px; height: 32px;"][div="opacity: 0.5; width: 750px; height: 32px; overflow: hidden;"][div="position: center; top: -134px;"][media=youtube]Tc-XxqEyolU[/media][/div][/div][/div]

[imga=left]https://www.iwakuroleplay.com/attachments/volt-jpg.161622/[/imga][imga=right]https://www.iwakuroleplay.com/attachments/voltcostume-jpg.161623/[/imga]

[tabs]
[tab=Basic]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Basic 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][FONT=Aldrich][SIZE=4][B]Full Name:[/B][/SIZE][/FONT]
[INDENT]Matthew Michael Volt[/INDENT]

[FONT=Aldrich][SIZE=4][B]Current Alias:[/B][/SIZE][/FONT]
[INDENT]Havoc[/INDENT]

[FONT=Aldrich][SIZE=4][B]Nicknames:[/B][/SIZE][/FONT]
[INDENT]Zappy, Shocker[/INDENT]

[FONT=Aldrich][SIZE=4][B]Age:[/B][/SIZE][/FONT]
[INDENT]32[/INDENT]

[FONT=Aldrich][SIZE=4][B]Gender:[/B][/SIZE][/FONT]
[INDENT]Male[/INDENT]

[FONT=Aldrich][SIZE=4][B]Race:[/B][/SIZE][/FONT]
[INDENT]Mutate[/INDENT]

[FONT=Aldrich][SIZE=4][B]Height:[/B][/SIZE][/FONT]
[INDENT]6' - 2"[/INDENT]

[/div][/tab]
[tab=Background]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Background 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][FONT=Aldrich][SIZE=4][B]History:[/B][/SIZE][/FONT]
[INDENT]Matthew Volt was dropped off at an orphanage when he was just an infant. Growing up out of an orphanage in Detroit was rough. Getting called Zappy due to the fact that he somehow managed to generate enough static electricity to shock quite literally everyone he touched was even worse, and really not helpful due to his unfortunate last name. He became a target to bullies due to his quiet nature, and when he stood his ground he was met with physical violence. He could deal with that. When he was taking the train home, things went far past what he was capable of dealing with.

One of the guys who had been giving him a hard time was involved in some sort of gang. He got jumped on the platform by a small group of gang members, and after taking a severe beating, was thrown down onto the tracks. He hit the third rail, and the entire west side of Detroit blacked out. When he woke up, he was in an interrogation room. Apparently the guys who had attacked him had been electrocuted. He was soon transferred into a training program in order to gain control of his abilities. It was all very obscure, no legitimate names or clear answers. This program turned out to be some sort of military prep school, where he learned a great deal about hand to hand combat, as well as firearms and other weapons. While he thrived in this environment, he was fearful of what their end game was. After all, they were turning empowered kids into highly effective weapons, without much of a moral code.

He didn't do that great in close-combat training, seeing as he was the only kid using restraint. It was noted how his base output voltage level increased drastically when he was under duress. He doesn't like to think about how they figured that out. After several ineffective attempts at training him in using his electrokinesis during close combat, they focused on his technopathy instead.

He was immediately aware of how they were using him. His technopathy training had garnered whoever this group was a great deal of information on several things that anyone in a 'training facility' should not know. He had to give them something, otherwise he'd probably get thrown back into combat training, and with some of the information he got into, he knew that that could be fatal for him. The 'problems' he was given to solve did not originate with this group, and he used this time to gain an understanding of how the facility worked and what he could manipulate within it. He became increasingly aware of the security stationed around the facility, and how it seemed like he and the other students here were being kept in rather than threats being kept out.

Slowly but surely he formed a plan of escape with a couple of other kids that managed to keep their heads on straight, and after the fight of their lives they managed to actually get away. He helped them establish identities online, faking photos and records in order to let them blend in and start new lives, leaving their pasts behind them. He chose to stay off the grid, and exposed the facility when they had a small electrical fire that caused emergency crews to flock to the scenes. Investigations were launched immediately when files leaked out about the treatment of the children at the facility, but the results didn't satisfy the teen. He decided then and there that he'd handle things on his own.

With his newfound freedom, Matthew took on the alias Havoc, in memory of his role in the escape. He began his work as a vigilante, and garnered some fame and infamy for his ability to wipe the slate clean. He helped people who needed it, as he could make them disappear and slide into a new life. He frequently took out major threats when he came into a new area, some being left for police with damning evidence that would keep them in whatever dark hole they got shoved in, and some getting the electric chair for their crimes. He never stayed anywhere for too long, since he was aiming to avoid clashing with other do-gooders.

Of course, he couldn't avoid potential problems forever. He crossed paths with Behemoth a few times while the guy was still with the Justiciars, occasionally fighting with him and occasionally helping him out. It depended on the day, mission, and target. Eventually, Behemoth approached him regarding a new method of fighting crime. One that he was already well versed with. They hadn't killed each other when they were on opposing sides and there was some mutual respect there. He initially disliked the idea of working in a group, since he really didn't want to end up in another situation where his abilities would be abused, but he knew Behemoth well enough to make an educated decision. The guy was a bit of an ass sometimes, but he wasn't that big of an ass, so Havoc became a founding member of the Crusaders.[/INDENT]

[FONT=Aldrich][SIZE=4][B]Personality:[/B][/SIZE][/FONT]
[INDENT]Matthew is a calm individual. Being relaxed under pressure is one of his specialties and he very rarely breaks his composure. He can be sociable when he has to be, though he tends to get worn out by too much contact. He can be a bit sarcastic when he feels like it and enjoys giving people a bit of grief when they do something stupid. Trickery and relatively harmless pranks also have a tendency to occur around him when he gets bored. He likes to believe that he's doing something truly good for the world by working with the Crusaders, and keeps a careful balance between right and wrong in the punishment of criminals.[/INDENT]

[/div]
[/tab]
[tab=Gear]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Gear 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][B][FONT=Aldrich][SIZE=4]Equipment:[/SIZE][/FONT][/B]
[INDENT]RUBBER GLOVES AND RUBBER SOLED BOOTS - due to the constant charges released by his body, he wears rubber gloves and boots in order to prevent himself from accidentally short circuiting any technological devices when he isn't off saving the world.

SUIT - composed of a self-healing metal and synthetic material weave, this suit is highly conductive to electricity and magnifies his electrokinetic attacks. it's also bullet resistant, not bullet proof. the suit repairs slower than average due to the constant charges being released by him, so if he gets shot multiple times in the same spot in a rapid time frame, the bullets could get through and actually cause injury. the suit doesn't hold up too well against heat, either.
[/indent]
[B][FONT=Aldrich][SIZE=4]Weapons:[/SIZE][/FONT][/B]
[indent]TWIN PISTOLS - in the case of him not being able to use his more combative abilities when he's a little too close to the action.

RIFLE - range is his best friend. give him a vantage point and watch him go.

BOOT KNIFE - for when shit really hits the fan.[/INDENT]
[/div][/tab]
[tab=Skills & Know-How]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Skills and Knowledges 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;]
[FONT=Aldrich][SIZE=4][B]Practical Know-How:[/B][/SIZE][/FONT]
[INDENT]HACKER - he knows all about getting into websites and systems that he really shouldn't be able to without getting caught. he can find information with absolute ease and cause a bit of havoc if building security controls are within his electronic reach.

HAND TO HAND - he doesn't like it, but he knows how to fight up close and personal when he has to. emphasis on doesn't like. putting himself in the "get your head punched off" range is just plain stupid. too much risk, considering that he doesn't have any kind of enhanced strength or durability.

MEDICAL - he knows how to treat injuries from a lot of personal experience. he generally doesn't trust anyone to treat his own injuries, considering the fact that he probably would end up zapping whoever was attempting the feat.
[/indent]
[FONT=Aldrich][SIZE=4][B]Skillset:[/B][/SIZE][/FONT]
[indent]GUNNER - he's had extensive firearms training and has a very keen eye. this comes in handy when his abilities are compromised, since it's relatively easy to negate his more offensive one.

TACTICAL - he was trained during his stint in pseudo-military prep school in order to make plans and adapt to the situation at hand. he doesn't like operating without a game plan and generally refuses to take on a mission until something vaguely reasonable is framed out.

PAIN TOLERANCE - he can operate under duress. ignoring pain and tuning it out until he can actually do something about it is something that he was trained to do. it probably isn't the healthiest thing in the world, but it does the trick during a fight.

[/INDENT]

[FONT=Aldrich][SIZE=4][B]Powers:[/B][/SIZE][/FONT]
[INDENT]TECHNOPATH - he can manipulate technology by utilizing his electrokinesis to access a mental interface from which he can control a given piece of technology. this requires a certain proximity depending on the level of difficulty.

ELECTROKINESIS - his body generates a high level of electricity that he is able to manipulate in order to fry security systems, zap opponents, or occasionally shock people that need a slap on the wrist. it's effective in ranged format as well as close combat, but he really doesn't like getting in close to his opponents.[/INDENT]

[FONT=Aldrich][SIZE=4][B]Weaknesses:[/B][/SIZE][/FONT]
[INDENT]LOW TECH - his technopathy doesn't work on purely mechanical devices, and the older and more outdated the technology is, the harder it is for him to manipulate.

PROXIMITY - his technopathy requires him to be close enough to observe what he is manipulating.

SHORT CIRCUIT - if he attempts to use his electrokinesis when his skin is in contact with water, there is an extremely high risk of him zapping himself instead.

NON-CONDUCTIVE MATTER - materials such as rubber and silicate are extremely resistant to electrical charges and pose some aggravating problems when worn by opponents.

MAGNETS - electrokinesis gets whacky as all hell around magnets. his ability to aim any impulses gets extremely distorted, and there is a risk of him short-circuiting if he makes contact with a strong enough magnet. not to mention his suit is made up of some metal compounds, so he could get stuck on a powerful enough magnet. his technopathy would also get glitchy when exposed to high powered magnets.[/INDENT]

[/div]
[/tab]
[tab=Relational]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Relational 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][B][FONT=Aldrich][SIZE=4]Affiliations:[/SIZE][/FONT][/B]
[INDENT]The Nobody Kids - a group of empowered people who had escaped a highly questionable government institution and garnered secret identities for themselves, forging backgrounds and starting their lives over again.

The Crusaders[/INDENT]

[FONT=Aldrich][SIZE=4][B]What made him cross the line?[/B][/SIZE][/FONT]
[INDENT]He was always over the line. People don't stop until they are forced to, and while sometimes this force doesn't have to be fatal, sometimes it does. He holds no issue with that fact.[/INDENT][/tab][/tabs]
[/div][/div][/div]
【 Matthew Volt 】

{/slide}
{slide}

Basic Background Gear Skills & Know-How Relational


  • 《 Basic 》
    Full Name:
    Matthew Michael Volt​

    Current Alias:
    Havoc​

    Nicknames:
    Zappy, Shocker​

    Age:
    32​

    Gender:
    Male​

    Race:
    Mutate​

    Height:
    6' - 2"​


  • 《 Background 》
    History:
    Matthew Volt was dropped off at an orphanage when he was just an infant. Growing up out of an orphanage in Detroit was rough. Getting called Zappy due to the fact that he somehow managed to generate enough static electricity to shock quite literally everyone he touched was even worse, and really not helpful due to his unfortunate last name. He became a target to bullies due to his quiet nature, and when he stood his ground he was met with physical violence. He could deal with that. When he was taking the train home, things went far past what he was capable of dealing with.

    One of the guys who had been giving him a hard time was involved in some sort of gang. He got jumped on the platform by a small group of gang members, and after taking a severe beating, was thrown down onto the tracks. He hit the third rail, and the entire west side of Detroit blacked out. When he woke up, he was in an interrogation room. Apparently the guys who had attacked him had been electrocuted. He was soon transferred into a training program in order to gain control of his abilities. It was all very obscure, no legitimate names or clear answers. This program turned out to be some sort of military prep school, where he learned a great deal about hand to hand combat, as well as firearms and other weapons. While he thrived in this environment, he was fearful of what their end game was. After all, they were turning empowered kids into highly effective weapons, without much of a moral code.

    He didn't do that great in close-combat training, seeing as he was the only kid using restraint. It was noted how his base output voltage level increased drastically when he was under duress. He doesn't like to think about how they figured that out. After several ineffective attempts at training him in using his electrokinesis during close combat, they focused on his technopathy instead.

    He was immediately aware of how they were using him. His technopathy training had garnered whoever this group was a great deal of information on several things that anyone in a 'training facility' should not know. He had to give them something, otherwise he'd probably get thrown back into combat training, and with some of the information he got into, he knew that that could be fatal for him. The 'problems' he was given to solve did not originate with this group, and he used this time to gain an understanding of how the facility worked and what he could manipulate within it. He became increasingly aware of the security stationed around the facility, and how it seemed like he and the other students here were being kept in rather than threats being kept out.

    Slowly but surely he formed a plan of escape with a couple of other kids that managed to keep their heads on straight, and after the fight of their lives they managed to actually get away. He helped them establish identities online, faking photos and records in order to let them blend in and start new lives, leaving their pasts behind them. He chose to stay off the grid, and exposed the facility when they had a small electrical fire that caused emergency crews to flock to the scenes. Investigations were launched immediately when files leaked out about the treatment of the children at the facility, but the results didn't satisfy the teen. He decided then and there that he'd handle things on his own.

    With his newfound freedom, Matthew took on the alias Havoc, in memory of his role in the escape. He began his work as a vigilante, and garnered some fame and infamy for his ability to wipe the slate clean. He helped people who needed it, as he could make them disappear and slide into a new life. He frequently took out major threats when he came into a new area, some being left for police with damning evidence that would keep them in whatever dark hole they got shoved in, and some getting the electric chair for their crimes. He never stayed anywhere for too long, since he was aiming to avoid clashing with other do-gooders.

    Of course, he couldn't avoid potential problems forever. He crossed paths with Behemoth a few times while the guy was still with the Justiciars, occasionally fighting with him and occasionally helping him out. It depended on the day, mission, and target. Eventually, Behemoth approached him regarding a new method of fighting crime. One that he was already well versed with. They hadn't killed each other when they were on opposing sides and there was some mutual respect there. He initially disliked the idea of working in a group, since he really didn't want to end up in another situation where his abilities would be abused, but he knew Behemoth well enough to make an educated decision. The guy was a bit of an ass sometimes, but he wasn't that big of an ass, so Havoc became a founding member of the Crusaders.​

    Personality:
    Matthew is a calm individual. Being relaxed under pressure is one of his specialties and he very rarely breaks his composure. He can be sociable when he has to be, though he tends to get worn out by too much contact. He can be a bit sarcastic when he feels like it and enjoys giving people a bit of grief when they do something stupid. Trickery and relatively harmless pranks also have a tendency to occur around him when he gets bored. He likes to believe that he's doing something truly good for the world by working with the Crusaders, and keeps a careful balance between right and wrong in the punishment of criminals.​



  • 《 Gear 》
    Equipment:
    RUBBER GLOVES AND RUBBER SOLED BOOTS - due to the constant charges released by his body, he wears rubber gloves and boots in order to prevent himself from accidentally short circuiting any technological devices when he isn't off saving the world.

    SUIT - composed of a self-healing metal and synthetic material weave, this suit is highly conductive to electricity and magnifies his electrokinetic attacks. it's also bullet resistant, not bullet proof. the suit repairs slower than average due to the constant charges being released by him, so if he gets shot multiple times in the same spot in a rapid time frame, the bullets could get through and actually cause injury. the suit doesn't hold up too well against heat, either.
    Weapons:
    TWIN PISTOLS - in the case of him not being able to use his more combative abilities when he's a little too close to the action.

    RIFLE - range is his best friend. give him a vantage point and watch him go.

    BOOT KNIFE - for when shit really hits the fan.​

  • 《 Skills and Knowledges 》

    Practical Know-How:
    HACKER - he knows all about getting into websites and systems that he really shouldn't be able to without getting caught. he can find information with absolute ease and cause a bit of havoc if building security controls are within his electronic reach.

    HAND TO HAND - he doesn't like it, but he knows how to fight up close and personal when he has to. emphasis on doesn't like. putting himself in the "get your head punched off" range is just plain stupid. too much risk, considering that he doesn't have any kind of enhanced strength or durability.

    MEDICAL - he knows how to treat injuries from a lot of personal experience. he generally doesn't trust anyone to treat his own injuries, considering the fact that he probably would end up zapping whoever was attempting the feat.
    Skillset:
    GUNNER - he's had extensive firearms training and has a very keen eye. this comes in handy when his abilities are compromised, since it's relatively easy to negate his more offensive one.

    TACTICAL - he was trained during his stint in pseudo-military prep school in order to make plans and adapt to the situation at hand. he doesn't like operating without a game plan and generally refuses to take on a mission until something vaguely reasonable is framed out.

    PAIN TOLERANCE - he can operate under duress. ignoring pain and tuning it out until he can actually do something about it is something that he was trained to do. it probably isn't the healthiest thing in the world, but it does the trick during a fight.


    Powers:
    TECHNOPATH - he can manipulate technology by utilizing his electrokinesis to access a mental interface from which he can control a given piece of technology. this requires a certain proximity depending on the level of difficulty.

    ELECTROKINESIS - his body generates a high level of electricity that he is able to manipulate in order to fry security systems, zap opponents, or occasionally shock people that need a slap on the wrist. it's effective in ranged format as well as close combat, but he really doesn't like getting in close to his opponents.​

    Weaknesses:
    LOW TECH - his technopathy doesn't work on purely mechanical devices, and the older and more outdated the technology is, the harder it is for him to manipulate.

    PROXIMITY - his technopathy requires him to be close enough to observe what he is manipulating.

    SHORT CIRCUIT - if he attempts to use his electrokinesis when his skin is in contact with water, there is an extremely high risk of him zapping himself instead.

    NON-CONDUCTIVE MATTER - materials such as rubber and silicate are extremely resistant to electrical charges and pose some aggravating problems when worn by opponents.

    MAGNETS - electrokinesis gets whacky as all hell around magnets. his ability to aim any impulses gets extremely distorted, and there is a risk of him short-circuiting if he makes contact with a strong enough magnet. not to mention his suit is made up of some metal compounds, so he could get stuck on a powerful enough magnet. his technopathy would also get glitchy when exposed to high powered magnets.​



  • 《 Relational 》
    Affiliations:
    The Nobody Kids - a group of empowered people who had escaped a highly questionable government institution and garnered secret identities for themselves, forging backgrounds and starting their lives over again.

    The Crusaders​

    What made him cross the line?
    He was always over the line. People don't stop until they are forced to, and while sometimes this force doesn't have to be fatal, sometimes it does. He holds no issue with that fact.​

 

darkflames13

Fancy Coding Fucker
DONATING MEMBER
Roleplay Invitations
Group Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
9PM ~ 2AM (GMT + 8)
Writing Levels
Adept, Advanced
Genders You Prefer Playing
Male, Female, Androgynous
Genre You DON'T Like
Yuri. Yaoi. Furry. Mecha.
so i'm kinda struggling with trying to make my coding look all pretty and stuff but i've figured out some stuff so far!! but i'm stuck lmfao
basically, what i need help with is creating the other textbox that i'd put all of the major info in. i wanted it to be next to the lil box i created and have the scrolling function (which i'm also confused about)
on top of all that, i wanted the teal text (ie appearance, first look, etc) to act as tabs. so you'd click on the words and it'd take you to a different textbook with different info, but i can't figure out how to do that either..

Code:
[div=display: inline-block; height: 500px; width: 220px; vertical-align: top; background-color: #ffffff; margin: auto;][div="flex: 1; background-color: #ffffff;"][IMG]https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fd2evmtiohlxukx.cloudfront.net%2Fuploads%2Fmodel-profile-images%2Fdiego-barrueco%2F1971_DIEGO8371-1-826x850.jpg&f=1[/IMG]  [/div]

 [div=height: 50px; width: 400px; background-color: #fffff; margin: auto; margin-top: -45px; font-family: Chaucer; color: #ffdab9; letter-spacing: 3px;]

[CENTER]luca jaxon amello[/CENTER]
[/div][div=color: #7FFFD4; text-align: center; font-family: Chaucer; font-size: 0.5em;]
A HEARTBREAKING LOSER[/div]
[div= color: #7FFFD4; text-align: center; font-family: Chaucer; letter-spacing: 2px; font-size: .8em;]appearance

first look

digging a little deeper

relationships

history[/div][/div]






luca jaxon amello​

A HEARTBREAKING LOSER

appearance

first look

digging a little deeper

relationships

history


ik im helpless but thank you to anyone who tries to assist me !!
Sounds like what you're looking for is stabs!

Unfortunately, I don't have a guide out for it yet, but I do have a template for the base of it. It's pretty much what I use for all my stabs works xD Template can be found here. It involves a bit of math with the heights, those have to be pretty precise otherwise things may break, but don't let that intimidate you! The formulas you'll be needing are in bold. That template doesn't have the stabs background cheat yet so you're going to have to Frankenstein it up with the stabs background instructions from this post as well.

Try having a go at it and let me know if you have any troubles with it or have any further questions :D

A few extra notes to help you out with understanding the formulas I have in the post:
stabs_height - refers to the height you set the stabs to. It's the second parameter following the 'x' in the stabs bbcode.
content_div_height - this refers to the height of the div found inside the slide slave tag.
num_tabs - number of tabs you plan on having.
height - height of your outermost div.
tab_width - width of your tabs (which can't really be seen in the template cause they're cut off, but it's important to set this to make it mobile friendly!).
outermost_max-width - max-width of your outermost div.



Planning is important for stabs layouts. It's best to know how tall you want your layout to be before proceeding to coding it. Remember, stabs here on iwaku have a limit on their height. The max height of your layout is also dependant on how many tabs you'll be having so plan those ahead as well. It's harder to change the number of tabs you have when you've already started coding your layout.


Hey guys. So I am not new to coding, but I have never had to build my own div code. Usually I've used codes others have provided for me, and I end up altering the code into something new by accident. I tried exploring with in in my own thread recently, and I just don't get it. I recently wanted to recode an old layout for a CS but I am not sure what the proper div codes I need to get what I am looking for. I want the general layout of the CS to remain the same, the only difference is that I don't want there to be an accordion but a text box with a scroll bar. I tried doing it myself and couldn't get the code to work.
Screenshot

The link above is the current layout of the post. None of it is using div. Here is what it looks like when editing the post.
Code:
[LEFT][imga=left]http://i292.photobucket.com/albums/mm10/violaceous/1212121images%201_zpsszqhowwf.png[/imga][/LEFT]
[RIGHT]"Don't let the looks fool you, I was made with more spice than sugar, sugar."
-Ariah[/RIGHT]
[LEFT][/LEFT]
[CENTER][accordion=bright|50%]
{slide=⌈GENERAL INFO⌋|center}
Name
Ariah

Age

Sex

Gender

Orientation

{/slide}

{slide=⌈COMMITTED CRIME(S)⌋|center|open}
Crimes

Level
[1][2][3]

Gang

Position

{/slide}

{slide=⌈APPEARANCE⌋|center|open}
Facial Structure

Body Structure

Eye Color

Hair Color

Height

Weight

Skin Tone

Scars

Tattoos

Piercings

Marks

{/slide}

{slide=⌈PERSONALITY⌋|center|open}
Five Good Traits

Five Bad Traits

Details

Quirks

Like

Dislikes

{/slide}

{slide=⌈STRENGHTS⌋|center|open}
Arsenal

Physical

Mental

Contraband

{/slide}

{/slide}
{slide=⌈WEAKNESSES⌋|center|open}
Fears

Physical

Mental

{/slide}

{/slide}
{slide=⌈RELATIONSHIPS⌋|center|open}

Allies

Enemies

{/slide}

{/slide}
{slide=⌈MISC⌋|center|open}

Theme Song

Extra

{/slide}

[/accordion]
[/CENTER]
Hey there! You mentioned trying to do it yourself before? Could you perhaps post the code of your attempt so we can see what went wrong and how we can fix it? It may better to fix already existing code rather than having you start over from scratch c:


Hello there great and powerful coding wizards. I'm trying to get these two pictures to align side by side in the character sheet below. I somehow managed to do it on another sheet using two different images I was working on while I was drunk, but that attempt didn't work when I applied the same method to this sheet.

Also, how does one center a youtube video that is inside a div box on a sheet?



Code:
[div=max-width: 800px !important; max-height: 900px; padding: 10px; margin: auto; border: 10px #94f9f9; border-radius: 15px;
background-image: url(https://i.pinimg.com/originals/11/7e/d3/117ed3a30f949a6cacbb576ae93e4c38.jpg);
background-position: repeat center fixed][div=background-color: #fff; max-width: 750px !important; padding: 20px; margin: 10px; border: 10px #fff; border-radius: 30%; font-size: 40px; text-align: center; color: black;][FONT=Aldrich]【 Matthew Volt 】[/FONT][/div][div=border-radius: 15px; margin: 10px; padding: 15px; border: 10px #000 solid; background-color: #fff; max-height: 500px; overflow-y: scroll; overflow-x: hidden; max-width: 800px !important;][div="position: center; display:inline-block; border-radius: 4px; width: 750px; height: 32px;"][div="opacity: 0.5; width: 750px; height: 32px; overflow: hidden;"][div="position: center; top: -134px;"][media=youtube]Tc-XxqEyolU[/media][/div][/div][/div]

[imga=left]https://www.iwakuroleplay.com/attachments/volt-jpg.161622/[/imga][imga=right]https://www.iwakuroleplay.com/attachments/voltcostume-jpg.161623/[/imga]

[tabs]
[tab=Basic]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Basic 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][FONT=Aldrich][SIZE=4][B]Full Name:[/B][/SIZE][/FONT]
[INDENT]Matthew Michael Volt[/INDENT]

[FONT=Aldrich][SIZE=4][B]Current Alias:[/B][/SIZE][/FONT]
[INDENT]Havoc[/INDENT]

[FONT=Aldrich][SIZE=4][B]Nicknames:[/B][/SIZE][/FONT]
[INDENT]Zappy, Shocker[/INDENT]

[FONT=Aldrich][SIZE=4][B]Age:[/B][/SIZE][/FONT]
[INDENT]32[/INDENT]

[FONT=Aldrich][SIZE=4][B]Gender:[/B][/SIZE][/FONT]
[INDENT]Male[/INDENT]

[FONT=Aldrich][SIZE=4][B]Race:[/B][/SIZE][/FONT]
[INDENT]Mutate[/INDENT]

[FONT=Aldrich][SIZE=4][B]Height:[/B][/SIZE][/FONT]
[INDENT]6' - 2"[/INDENT]

[/div][/tab]
[tab=Background]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Background 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][FONT=Aldrich][SIZE=4][B]History:[/B][/SIZE][/FONT]
[INDENT]Matthew Volt was dropped off at an orphanage when he was just an infant. Growing up out of an orphanage in Detroit was rough. Getting called Zappy due to the fact that he somehow managed to generate enough static electricity to shock quite literally everyone he touched was even worse, and really not helpful due to his unfortunate last name. He became a target to bullies due to his quiet nature, and when he stood his ground he was met with physical violence. He could deal with that. When he was taking the train home, things went far past what he was capable of dealing with.

One of the guys who had been giving him a hard time was involved in some sort of gang. He got jumped on the platform by a small group of gang members, and after taking a severe beating, was thrown down onto the tracks. He hit the third rail, and the entire west side of Detroit blacked out. When he woke up, he was in an interrogation room. Apparently the guys who had attacked him had been electrocuted. He was soon transferred into a training program in order to gain control of his abilities. It was all very obscure, no legitimate names or clear answers. This program turned out to be some sort of military prep school, where he learned a great deal about hand to hand combat, as well as firearms and other weapons. While he thrived in this environment, he was fearful of what their end game was. After all, they were turning empowered kids into highly effective weapons, without much of a moral code.

He didn't do that great in close-combat training, seeing as he was the only kid using restraint. It was noted how his base output voltage level increased drastically when he was under duress. He doesn't like to think about how they figured that out. After several ineffective attempts at training him in using his electrokinesis during close combat, they focused on his technopathy instead.

He was immediately aware of how they were using him. His technopathy training had garnered whoever this group was a great deal of information on several things that anyone in a 'training facility' should not know. He had to give them something, otherwise he'd probably get thrown back into combat training, and with some of the information he got into, he knew that that could be fatal for him. The 'problems' he was given to solve did not originate with this group, and he used this time to gain an understanding of how the facility worked and what he could manipulate within it. He became increasingly aware of the security stationed around the facility, and how it seemed like he and the other students here were being kept in rather than threats being kept out.

Slowly but surely he formed a plan of escape with a couple of other kids that managed to keep their heads on straight, and after the fight of their lives they managed to actually get away. He helped them establish identities online, faking photos and records in order to let them blend in and start new lives, leaving their pasts behind them. He chose to stay off the grid, and exposed the facility when they had a small electrical fire that caused emergency crews to flock to the scenes. Investigations were launched immediately when files leaked out about the treatment of the children at the facility, but the results didn't satisfy the teen. He decided then and there that he'd handle things on his own.

With his newfound freedom, Matthew took on the alias Havoc, in memory of his role in the escape. He began his work as a vigilante, and garnered some fame and infamy for his ability to wipe the slate clean. He helped people who needed it, as he could make them disappear and slide into a new life. He frequently took out major threats when he came into a new area, some being left for police with damning evidence that would keep them in whatever dark hole they got shoved in, and some getting the electric chair for their crimes. He never stayed anywhere for too long, since he was aiming to avoid clashing with other do-gooders.

Of course, he couldn't avoid potential problems forever. He crossed paths with Behemoth a few times while the guy was still with the Justiciars, occasionally fighting with him and occasionally helping him out. It depended on the day, mission, and target. Eventually, Behemoth approached him regarding a new method of fighting crime. One that he was already well versed with. They hadn't killed each other when they were on opposing sides and there was some mutual respect there. He initially disliked the idea of working in a group, since he really didn't want to end up in another situation where his abilities would be abused, but he knew Behemoth well enough to make an educated decision. The guy was a bit of an ass sometimes, but he wasn't that big of an ass, so Havoc became a founding member of the Crusaders.[/INDENT]

[FONT=Aldrich][SIZE=4][B]Personality:[/B][/SIZE][/FONT]
[INDENT]Matthew is a calm individual. Being relaxed under pressure is one of his specialties and he very rarely breaks his composure. He can be sociable when he has to be, though he tends to get worn out by too much contact. He can be a bit sarcastic when he feels like it and enjoys giving people a bit of grief when they do something stupid. Trickery and relatively harmless pranks also have a tendency to occur around him when he gets bored. He likes to believe that he's doing something truly good for the world by working with the Crusaders, and keeps a careful balance between right and wrong in the punishment of criminals.[/INDENT]

[/div]
[/tab]
[tab=Gear]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Gear 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][B][FONT=Aldrich][SIZE=4]Equipment:[/SIZE][/FONT][/B]
[INDENT]RUBBER GLOVES AND RUBBER SOLED BOOTS - due to the constant charges released by his body, he wears rubber gloves and boots in order to prevent himself from accidentally short circuiting any technological devices when he isn't off saving the world.

SUIT - composed of a self-healing metal and synthetic material weave, this suit is highly conductive to electricity and magnifies his electrokinetic attacks. it's also bullet resistant, not bullet proof. the suit repairs slower than average due to the constant charges being released by him, so if he gets shot multiple times in the same spot in a rapid time frame, the bullets could get through and actually cause injury. the suit doesn't hold up too well against heat, either.
[/indent]
[B][FONT=Aldrich][SIZE=4]Weapons:[/SIZE][/FONT][/B]
[indent]TWIN PISTOLS - in the case of him not being able to use his more combative abilities when he's a little too close to the action.

RIFLE - range is his best friend. give him a vantage point and watch him go.

BOOT KNIFE - for when shit really hits the fan.[/INDENT]
[/div][/tab]
[tab=Skills & Know-How]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Skills and Knowledges 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;]
[FONT=Aldrich][SIZE=4][B]Practical Know-How:[/B][/SIZE][/FONT]
[INDENT]HACKER - he knows all about getting into websites and systems that he really shouldn't be able to without getting caught. he can find information with absolute ease and cause a bit of havoc if building security controls are within his electronic reach.

HAND TO HAND - he doesn't like it, but he knows how to fight up close and personal when he has to. emphasis on doesn't like. putting himself in the "get your head punched off" range is just plain stupid. too much risk, considering that he doesn't have any kind of enhanced strength or durability.

MEDICAL - he knows how to treat injuries from a lot of personal experience. he generally doesn't trust anyone to treat his own injuries, considering the fact that he probably would end up zapping whoever was attempting the feat.
[/indent]
[FONT=Aldrich][SIZE=4][B]Skillset:[/B][/SIZE][/FONT]
[indent]GUNNER - he's had extensive firearms training and has a very keen eye. this comes in handy when his abilities are compromised, since it's relatively easy to negate his more offensive one.

TACTICAL - he was trained during his stint in pseudo-military prep school in order to make plans and adapt to the situation at hand. he doesn't like operating without a game plan and generally refuses to take on a mission until something vaguely reasonable is framed out.

PAIN TOLERANCE - he can operate under duress. ignoring pain and tuning it out until he can actually do something about it is something that he was trained to do. it probably isn't the healthiest thing in the world, but it does the trick during a fight.

[/INDENT]

[FONT=Aldrich][SIZE=4][B]Powers:[/B][/SIZE][/FONT]
[INDENT]TECHNOPATH - he can manipulate technology by utilizing his electrokinesis to access a mental interface from which he can control a given piece of technology. this requires a certain proximity depending on the level of difficulty.

ELECTROKINESIS - his body generates a high level of electricity that he is able to manipulate in order to fry security systems, zap opponents, or occasionally shock people that need a slap on the wrist. it's effective in ranged format as well as close combat, but he really doesn't like getting in close to his opponents.[/INDENT]

[FONT=Aldrich][SIZE=4][B]Weaknesses:[/B][/SIZE][/FONT]
[INDENT]LOW TECH - his technopathy doesn't work on purely mechanical devices, and the older and more outdated the technology is, the harder it is for him to manipulate.

PROXIMITY - his technopathy requires him to be close enough to observe what he is manipulating.

SHORT CIRCUIT - if he attempts to use his electrokinesis when his skin is in contact with water, there is an extremely high risk of him zapping himself instead.

NON-CONDUCTIVE MATTER - materials such as rubber and silicate are extremely resistant to electrical charges and pose some aggravating problems when worn by opponents.

MAGNETS - electrokinesis gets whacky as all hell around magnets. his ability to aim any impulses gets extremely distorted, and there is a risk of him short-circuiting if he makes contact with a strong enough magnet. not to mention his suit is made up of some metal compounds, so he could get stuck on a powerful enough magnet. his technopathy would also get glitchy when exposed to high powered magnets.[/INDENT]

[/div]
[/tab]
[tab=Relational]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Relational 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][B][FONT=Aldrich][SIZE=4]Affiliations:[/SIZE][/FONT][/B]
[INDENT]The Nobody Kids - a group of empowered people who had escaped a highly questionable government institution and garnered secret identities for themselves, forging backgrounds and starting their lives over again.

The Crusaders[/INDENT]

[FONT=Aldrich][SIZE=4][B]What made him cross the line?[/B][/SIZE][/FONT]
[INDENT]He was always over the line. People don't stop until they are forced to, and while sometimes this force doesn't have to be fatal, sometimes it does. He holds no issue with that fact.[/INDENT][/tab][/tabs]
[/div][/div][/div]
【 Matthew Volt 】

{/slide}
{slide}

Basic Background Gear Skills & Know-How Relational


  • 《 Basic 》
    Full Name:
    Matthew Michael Volt​

    Current Alias:
    Havoc​

    Nicknames:
    Zappy, Shocker​

    Age:
    32​

    Gender:
    Male​

    Race:
    Mutate​

    Height:
    6' - 2"​


  • 《 Background 》
    History:
    Matthew Volt was dropped off at an orphanage when he was just an infant. Growing up out of an orphanage in Detroit was rough. Getting called Zappy due to the fact that he somehow managed to generate enough static electricity to shock quite literally everyone he touched was even worse, and really not helpful due to his unfortunate last name. He became a target to bullies due to his quiet nature, and when he stood his ground he was met with physical violence. He could deal with that. When he was taking the train home, things went far past what he was capable of dealing with.

    One of the guys who had been giving him a hard time was involved in some sort of gang. He got jumped on the platform by a small group of gang members, and after taking a severe beating, was thrown down onto the tracks. He hit the third rail, and the entire west side of Detroit blacked out. When he woke up, he was in an interrogation room. Apparently the guys who had attacked him had been electrocuted. He was soon transferred into a training program in order to gain control of his abilities. It was all very obscure, no legitimate names or clear answers. This program turned out to be some sort of military prep school, where he learned a great deal about hand to hand combat, as well as firearms and other weapons. While he thrived in this environment, he was fearful of what their end game was. After all, they were turning empowered kids into highly effective weapons, without much of a moral code.

    He didn't do that great in close-combat training, seeing as he was the only kid using restraint. It was noted how his base output voltage level increased drastically when he was under duress. He doesn't like to think about how they figured that out. After several ineffective attempts at training him in using his electrokinesis during close combat, they focused on his technopathy instead.

    He was immediately aware of how they were using him. His technopathy training had garnered whoever this group was a great deal of information on several things that anyone in a 'training facility' should not know. He had to give them something, otherwise he'd probably get thrown back into combat training, and with some of the information he got into, he knew that that could be fatal for him. The 'problems' he was given to solve did not originate with this group, and he used this time to gain an understanding of how the facility worked and what he could manipulate within it. He became increasingly aware of the security stationed around the facility, and how it seemed like he and the other students here were being kept in rather than threats being kept out.

    Slowly but surely he formed a plan of escape with a couple of other kids that managed to keep their heads on straight, and after the fight of their lives they managed to actually get away. He helped them establish identities online, faking photos and records in order to let them blend in and start new lives, leaving their pasts behind them. He chose to stay off the grid, and exposed the facility when they had a small electrical fire that caused emergency crews to flock to the scenes. Investigations were launched immediately when files leaked out about the treatment of the children at the facility, but the results didn't satisfy the teen. He decided then and there that he'd handle things on his own.

    With his newfound freedom, Matthew took on the alias Havoc, in memory of his role in the escape. He began his work as a vigilante, and garnered some fame and infamy for his ability to wipe the slate clean. He helped people who needed it, as he could make them disappear and slide into a new life. He frequently took out major threats when he came into a new area, some being left for police with damning evidence that would keep them in whatever dark hole they got shoved in, and some getting the electric chair for their crimes. He never stayed anywhere for too long, since he was aiming to avoid clashing with other do-gooders.

    Of course, he couldn't avoid potential problems forever. He crossed paths with Behemoth a few times while the guy was still with the Justiciars, occasionally fighting with him and occasionally helping him out. It depended on the day, mission, and target. Eventually, Behemoth approached him regarding a new method of fighting crime. One that he was already well versed with. They hadn't killed each other when they were on opposing sides and there was some mutual respect there. He initially disliked the idea of working in a group, since he really didn't want to end up in another situation where his abilities would be abused, but he knew Behemoth well enough to make an educated decision. The guy was a bit of an ass sometimes, but he wasn't that big of an ass, so Havoc became a founding member of the Crusaders.​

    Personality:
    Matthew is a calm individual. Being relaxed under pressure is one of his specialties and he very rarely breaks his composure. He can be sociable when he has to be, though he tends to get worn out by too much contact. He can be a bit sarcastic when he feels like it and enjoys giving people a bit of grief when they do something stupid. Trickery and relatively harmless pranks also have a tendency to occur around him when he gets bored. He likes to believe that he's doing something truly good for the world by working with the Crusaders, and keeps a careful balance between right and wrong in the punishment of criminals.​



  • 《 Gear 》
    Equipment:
    RUBBER GLOVES AND RUBBER SOLED BOOTS - due to the constant charges released by his body, he wears rubber gloves and boots in order to prevent himself from accidentally short circuiting any technological devices when he isn't off saving the world.

    SUIT - composed of a self-healing metal and synthetic material weave, this suit is highly conductive to electricity and magnifies his electrokinetic attacks. it's also bullet resistant, not bullet proof. the suit repairs slower than average due to the constant charges being released by him, so if he gets shot multiple times in the same spot in a rapid time frame, the bullets could get through and actually cause injury. the suit doesn't hold up too well against heat, either.
    Weapons:
    TWIN PISTOLS - in the case of him not being able to use his more combative abilities when he's a little too close to the action.

    RIFLE - range is his best friend. give him a vantage point and watch him go.

    BOOT KNIFE - for when shit really hits the fan.​

  • 《 Skills and Knowledges 》

    Practical Know-How:
    HACKER - he knows all about getting into websites and systems that he really shouldn't be able to without getting caught. he can find information with absolute ease and cause a bit of havoc if building security controls are within his electronic reach.

    HAND TO HAND - he doesn't like it, but he knows how to fight up close and personal when he has to. emphasis on doesn't like. putting himself in the "get your head punched off" range is just plain stupid. too much risk, considering that he doesn't have any kind of enhanced strength or durability.

    MEDICAL - he knows how to treat injuries from a lot of personal experience. he generally doesn't trust anyone to treat his own injuries, considering the fact that he probably would end up zapping whoever was attempting the feat.
    Skillset:
    GUNNER - he's had extensive firearms training and has a very keen eye. this comes in handy when his abilities are compromised, since it's relatively easy to negate his more offensive one.

    TACTICAL - he was trained during his stint in pseudo-military prep school in order to make plans and adapt to the situation at hand. he doesn't like operating without a game plan and generally refuses to take on a mission until something vaguely reasonable is framed out.

    PAIN TOLERANCE - he can operate under duress. ignoring pain and tuning it out until he can actually do something about it is something that he was trained to do. it probably isn't the healthiest thing in the world, but it does the trick during a fight.


    Powers:
    TECHNOPATH - he can manipulate technology by utilizing his electrokinesis to access a mental interface from which he can control a given piece of technology. this requires a certain proximity depending on the level of difficulty.

    ELECTROKINESIS - his body generates a high level of electricity that he is able to manipulate in order to fry security systems, zap opponents, or occasionally shock people that need a slap on the wrist. it's effective in ranged format as well as close combat, but he really doesn't like getting in close to his opponents.​

    Weaknesses:
    LOW TECH - his technopathy doesn't work on purely mechanical devices, and the older and more outdated the technology is, the harder it is for him to manipulate.

    PROXIMITY - his technopathy requires him to be close enough to observe what he is manipulating.

    SHORT CIRCUIT - if he attempts to use his electrokinesis when his skin is in contact with water, there is an extremely high risk of him zapping himself instead.

    NON-CONDUCTIVE MATTER - materials such as rubber and silicate are extremely resistant to electrical charges and pose some aggravating problems when worn by opponents.

    MAGNETS - electrokinesis gets whacky as all hell around magnets. his ability to aim any impulses gets extremely distorted, and there is a risk of him short-circuiting if he makes contact with a strong enough magnet. not to mention his suit is made up of some metal compounds, so he could get stuck on a powerful enough magnet. his technopathy would also get glitchy when exposed to high powered magnets.​



  • 《 Relational 》
    Affiliations:
    The Nobody Kids - a group of empowered people who had escaped a highly questionable government institution and garnered secret identities for themselves, forging backgrounds and starting their lives over again.

    The Crusaders​

    What made him cross the line?
    He was always over the line. People don't stop until they are forced to, and while sometimes this force doesn't have to be fatal, sometimes it does. He holds no issue with that fact.​

I think the reason why it may have worked previously and not now is because of the image sizes. The image may be too big and thus one of them cuts to the next line. What you can try to do is resize the image in paint or through online photo editors (imgur has a built in one) and see if the smaller images will stay beside each other with your current code.

Alternatively, you can also set it up with divs. Instead of using imga, use the img bbcode and then wrap each of the images in a div that has a width set and display:inline-block; Then wrap another div around those two with a max-width and margin:auto set. The code should look something like this:

Code:
[div=margin:auto; max-width:400px !important;][div=width:200px; display:inline-block;][img]https://www.iwakuroleplay.com/attachments/volt-jpg.161622/[/img][/div][div=width:200px; display:inline-block;][img]https://www.iwakuroleplay.com/attachments/voltcostume-jpg.161623/[/img][/div][/div]

If you want to add a gap between the two images, just add a margin to the two divs around them :)