BBCode Help

Thanks so much!
 
  • Ah Seen It
Reactions: rissa
it's me again with this janky-ass code. So I've done some fiddling to try and get it to look good on mobile and it does look ok on mobile now but now it looks weird on a computer >>

My question now is: why aren't my three circle images centered? I've tried adding padding which does artificially put them where I want them to be, but like it makes the circle on the left be cut off and the circle on the right overflow the width of the background image on mobile which I want to avoid.
Code:
[div=width: 600px; padding-left: 0px; padding-right: 0px; margin: auto; background: url(https://i.pinimg.com/originals/d6/7c/14/d67c14d751772ab0dd152060788f69ba.jpg); background-position: center; background-size: cover;]

[div=width: 500x; margin: auto;][div=display: flex; flex-wrap: wrap;][div=flex: 1; min-width: 200px !important; height: 200px; display: flex; flex-direction: row; justify-content: space-evenly;]

[div=flex: 1;][div=padding-left: 5px; margin-top: 50px;][div=width: 125px; height: 125px; border: 3px solid #e5e5e5; background: url(https://pbs.twimg.com/media/CzzVoftUkAAEEW3?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; border-radius: 50%;][/div][/div][/div] [div=flex: 1;][div=padding-left: 5px; margin-top: 50px;][div=width: 125px; height: 125px; border: 3px solid #e5e5e5; background: url(https://pbs.twimg.com/media/CzzVoftUkAAEEW3?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; border-radius: 50%;][/div][/div][/div] [div=flex: 1;][div=padding-right: 5px; padding-left: 5px; margin-top: 50px;][div=width: 125px; height: 125px; border: 3px solid #e5e5e5; background: url(https://everipedia-storage.s3-accelerate.amazonaws.com/ProfilePics/6666668721598697015-1490984190.jpeg); background-size: cover; background-repeat: no-repeat; border-radius: 50%;][/div][/div][/div][/div]
[div=width: 90%; margin: auto; background: gray; text-align: center;][div=height: inherit; margin: 2px;]INSERT NAME
[/div][/div]


This is hell on earth[/div][/div][/div]
Notes: On desktop 150px for pictures looks good but it overflows and clips on mobile phone screen. Don't know how to fix yet. No overflow on mobile at 120-125, up to 129 still looks ok but there's a little overlap on the corners of the box
Edit: the padding around the images makes it overflow again on mobile
 
Hii, I was wondering more information about tabs. Is there a way to move them and edit them??
I don't really know much about how they work in general, but would like to learn!
 
it's me again with this janky-ass code. So I've done some fiddling to try and get it to look good on mobile and it does look ok on mobile now but now it looks weird on a computer >>

My question now is: why aren't my three circle images centered? I've tried adding padding which does artificially put them where I want them to be, but like it makes the circle on the left be cut off and the circle on the right overflow the width of the background image on mobile which I want to avoid.
Code:
[div=width: 600px; padding-left: 0px; padding-right: 0px; margin: auto; background: url(https://i.pinimg.com/originals/d6/7c/14/d67c14d751772ab0dd152060788f69ba.jpg); background-position: center; background-size: cover;]

[div=width: 500x; margin: auto;][div=display: flex; flex-wrap: wrap;][div=flex: 1; min-width: 200px !important; height: 200px; display: flex; flex-direction: row; justify-content: space-evenly;]

[div=flex: 1;][div=padding-left: 5px; margin-top: 50px;][div=width: 125px; height: 125px; border: 3px solid #e5e5e5; background: url(https://pbs.twimg.com/media/CzzVoftUkAAEEW3?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; border-radius: 50%;][/div][/div][/div] [div=flex: 1;][div=padding-left: 5px; margin-top: 50px;][div=width: 125px; height: 125px; border: 3px solid #e5e5e5; background: url(https://pbs.twimg.com/media/CzzVoftUkAAEEW3?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; border-radius: 50%;][/div][/div][/div] [div=flex: 1;][div=padding-right: 5px; padding-left: 5px; margin-top: 50px;][div=width: 125px; height: 125px; border: 3px solid #e5e5e5; background: url(https://everipedia-storage.s3-accelerate.amazonaws.com/ProfilePics/6666668721598697015-1490984190.jpeg); background-size: cover; background-repeat: no-repeat; border-radius: 50%;][/div][/div][/div][/div]
[div=width: 90%; margin: auto; background: gray; text-align: center;][div=height: inherit; margin: 2px;]INSERT NAME
[/div][/div]


This is hell on earth[/div][/div][/div]
Notes: On desktop 150px for pictures looks good but it overflows and clips on mobile phone screen. Don't know how to fix yet. No overflow on mobile at 120-125, up to 129 still looks ok but there's a little overlap on the corners of the box
Edit: the padding around the images makes it overflow again on mobile

I squinted really hard, but I noticed that your width: 500 is missing a 'p' in the px. The code works for me if I add the 'p' in, so I think that is the issue you have? Let me know if it isn't. I will squint harder with you.

Hii, I was wondering more information about tabs. Is there a way to move them and edit them??
I don't really know much about how they work in general, but would like to learn!

Once upon a time I made a tutorial on how. Then an update came and it messed up the code and I promised I would look into it again whenever I have the time. Time never came, but I did play around and you can check it? It is unfinished, however and definitely a little messy, but it does what I wanted it to do and I hope you can make some sense out of it.
 
So, I have a question for BBCode veterans! I have this code that works on another forum (RPN), but some of the code doesn't seem to work here. Would anyone know any similar code with which I could replace it? I'd be really grateful!
The code is:
Code:
[CENTER][side=right]
[SIZE=7] [Font=Caudex]Ainya[/Font][/SIZE][Font= Caudex]
[imageFloat=center][heightrestrict=800px][IMG]https://file.toyhou.se/images/12550354_fzo5AoGyZPMNPIu.jpg[/IMG][/heightrestrict][/imageFloat]
[Font=Caudex]
[SPOILER="Ji, the Hoppip"]
[IMG]https://cdn.bulbagarden.net/upload/thumb/f/f8/187Hoppip.png/192px-187Hoppip.png[/IMG]
[URL='https://bulbapedia.bulbagarden.net/wiki/Hoppip_(Pok%C3%A9mon)'][B][U][SIZE=5]Ji, the Hoppip[/SIZE][/U][/B][/URL] [SIZE=5][U](F), Lvl. 12[/U][/SIZE]
Poke description: Hoppip, the Cottonweed Pokémon. This hopping Pokémon is light as a feather, and can be lifted by the gentlest breeze.
-
Ji is a very energetic Hoppip, always bouncing around. She has been with Ainya ever since she followed Ainya home on a rainy night. If she notices Ainya getting too angry, she tries to calm her down or divert her attention.
[U]Type:[/U] [URL='https://bulbapedia.bulbagarden.net/wiki/Grass_(type)']Grass[/URL] | [URL='https://bulbapedia.bulbagarden.net/wiki/Flying_(type)']Flying[/URL]
[U]Ability:[/U] [URL='http://Ability']Ability[/URL]
[U]Moves:[/U]
[URL='https://bulbapedia.bulbagarden.net/wiki/Absorb_(move)']Absorb[/URL]
[URL='https://bulbapedia.bulbagarden.net/wiki/Synthesis_(move)']Synthesis[/URL]
[URL='https://bulbapedia.bulbagarden.net/wiki/Fairy_Wind_(move)']Fairy Wind[/URL]
[URL='https://bulbapedia.bulbagarden.net/wiki/Energy_Ball_(move)']Energy Ball[/URL]
[/SPOILER]
[SPOILER="???, the Espurr"]
[IMG]https://cdn.bulbagarden.net/upload/thumb/0/09/677Espurr.png/144px-677Espurr.png[/IMG]
[URL='https://bulbapedia.bulbagarden.net/wiki/Espurr_(Pok%C3%A9mon)'][B][U][SIZE=5]???, the Espurr[/SIZE][/U][/B][/URL] [SIZE=5][U](F), Lvl. ?[/U][/SIZE]
Poke description: Ralts senses the emotions of people using the horns on its head. This Pokémon rarely appears before people. But when it does, it draws closer if it senses that the person has a positive disposition.
[U]Type:[/U] [URL='http://Type1']Type1[/URL] | [URL='http://Type2']Type2[/URL]
[U]Ability:[/U] [URL='http://Ability']Ability[/URL]
[U]Moves:[/U]
[URL='http://Move1']Move1[/URL]
[URL='http://Move2']Move2[/URL]
[URL='http://Move3']Move3[/URL]
[URL='http://Move4']Move4[/URL]
[/SPOILER]
[SPOILER="..."]
[IMG]https://i.imgur.com/qd73JDd.gif[/IMG]
[B][U][SIZE=5]??? (?)[/SIZE][/U][/B][U][SIZE=5], Lvl. ??[/SIZE][/U]
Nothing to see here....
[U]Ability:[/U] ...
[U]Type[/U]: ....
[U]Moves:[/U]
...
...
...
...
[/SPOILER]
[SPOILER="..."]
[IMG]https://i.imgur.com/qd73JDd.gif[/IMG]
[B][U][SIZE=5]??? (?)[/SIZE][/U][/B][U][SIZE=5], Lvl. ??[/SIZE][/U]
Nothing to see here....
[U]Ability:[/U] ...
[U]Type[/U]: ....
[U]Moves:[/U]
...
...
...
...
[/SPOILER]

[b]Wearing:[/b] Denim blue jacket, blue trainers, red jeans and a white shirt with a punk-band's logo plastered on it.
[b]Place:[/b] Daily Care Day Care, New Bark Town, Johto Region.

[/Font]

[/font][/side][Font= Caudex][/font][/CENTER]
[Font= Caudex][/font]

It looks like this on the other forum:
1wnyE30.png

It's like a floating aside on the left. Thank you.
 
So, I have a question for BBCode veterans! I have this code that works on another forum (RPN), but some of the code doesn't seem to work here. Would anyone know any similar code with which I could replace it? I'd be really grateful!
The code is:
Code:
[CENTER][side=right]
[SIZE=7] [Font=Caudex]Ainya[/Font][/SIZE][Font= Caudex]
[imageFloat=center][heightrestrict=800px][IMG]https://file.toyhou.se/images/12550354_fzo5AoGyZPMNPIu.jpg[/IMG][/heightrestrict][/imageFloat]
[Font=Caudex]
[SPOILER="Ji, the Hoppip"]
[IMG]https://cdn.bulbagarden.net/upload/thumb/f/f8/187Hoppip.png/192px-187Hoppip.png[/IMG]
[URL='https://bulbapedia.bulbagarden.net/wiki/Hoppip_(Pok%C3%A9mon)'][B][U][SIZE=5]Ji, the Hoppip[/SIZE][/U][/B][/URL] [SIZE=5][U](F), Lvl. 12[/U][/SIZE]
Poke description: Hoppip, the Cottonweed Pokémon. This hopping Pokémon is light as a feather, and can be lifted by the gentlest breeze.
-
Ji is a very energetic Hoppip, always bouncing around. She has been with Ainya ever since she followed Ainya home on a rainy night. If she notices Ainya getting too angry, she tries to calm her down or divert her attention.
[U]Type:[/U] [URL='https://bulbapedia.bulbagarden.net/wiki/Grass_(type)']Grass[/URL] | [URL='https://bulbapedia.bulbagarden.net/wiki/Flying_(type)']Flying[/URL]
[U]Ability:[/U] [URL='http://Ability']Ability[/URL]
[U]Moves:[/U]
[URL='https://bulbapedia.bulbagarden.net/wiki/Absorb_(move)']Absorb[/URL]
[URL='https://bulbapedia.bulbagarden.net/wiki/Synthesis_(move)']Synthesis[/URL]
[URL='https://bulbapedia.bulbagarden.net/wiki/Fairy_Wind_(move)']Fairy Wind[/URL]
[URL='https://bulbapedia.bulbagarden.net/wiki/Energy_Ball_(move)']Energy Ball[/URL]
[/SPOILER]
[SPOILER="???, the Espurr"]
[IMG]https://cdn.bulbagarden.net/upload/thumb/0/09/677Espurr.png/144px-677Espurr.png[/IMG]
[URL='https://bulbapedia.bulbagarden.net/wiki/Espurr_(Pok%C3%A9mon)'][B][U][SIZE=5]???, the Espurr[/SIZE][/U][/B][/URL] [SIZE=5][U](F), Lvl. ?[/U][/SIZE]
Poke description: Ralts senses the emotions of people using the horns on its head. This Pokémon rarely appears before people. But when it does, it draws closer if it senses that the person has a positive disposition.
[U]Type:[/U] [URL='http://Type1']Type1[/URL] | [URL='http://Type2']Type2[/URL]
[U]Ability:[/U] [URL='http://Ability']Ability[/URL]
[U]Moves:[/U]
[URL='http://Move1']Move1[/URL]
[URL='http://Move2']Move2[/URL]
[URL='http://Move3']Move3[/URL]
[URL='http://Move4']Move4[/URL]
[/SPOILER]
[SPOILER="..."]
[IMG]https://i.imgur.com/qd73JDd.gif[/IMG]
[B][U][SIZE=5]??? (?)[/SIZE][/U][/B][U][SIZE=5], Lvl. ??[/SIZE][/U]
Nothing to see here....
[U]Ability:[/U] ...
[U]Type[/U]: ....
[U]Moves:[/U]
...
...
...
...
[/SPOILER]
[SPOILER="..."]
[IMG]https://i.imgur.com/qd73JDd.gif[/IMG]
[B][U][SIZE=5]??? (?)[/SIZE][/U][/B][U][SIZE=5], Lvl. ??[/SIZE][/U]
Nothing to see here....
[U]Ability:[/U] ...
[U]Type[/U]: ....
[U]Moves:[/U]
...
...
...
...
[/SPOILER]

[b]Wearing:[/b] Denim blue jacket, blue trainers, red jeans and a white shirt with a punk-band's logo plastered on it.
[b]Place:[/b] Daily Care Day Care, New Bark Town, Johto Region.

[/Font]

[/font][/side][Font= Caudex][/font][/CENTER]
[Font= Caudex][/font]

It looks like this on the other forum:
1wnyE30.png

It's like a floating aside on the left. Thank you.
Super duper late in getting back at you, and I hope you have figured it out by now, but looking at your code I would really suggest trying to convert most of it into CSS. You can look at the Divtionary to see what you need to get the desired effect!

You can also continue with BBCode, but then I would take a good look at what is supported and possible here on Iwaku, which some of the tags you use aren't.
 
  • Sympathy & Compassion
Reactions: darkmaster006
So, I have a question for BBCode veterans! I have this code that works on another forum (RPN), but some of the code doesn't seem to work here. Would anyone know any similar code with which I could replace it? I'd be really grateful!
The code is:
Code:
[CENTER][side=right]
[SIZE=7] [Font=Caudex]Ainya[/Font][/SIZE][Font= Caudex]
[imageFloat=center][heightrestrict=800px][IMG]https://file.toyhou.se/images/12550354_fzo5AoGyZPMNPIu.jpg[/IMG][/heightrestrict][/imageFloat]
[Font=Caudex]
[SPOILER="Ji, the Hoppip"]
[IMG]https://cdn.bulbagarden.net/upload/thumb/f/f8/187Hoppip.png/192px-187Hoppip.png[/IMG]
[URL='https://bulbapedia.bulbagarden.net/wiki/Hoppip_(Pok%C3%A9mon)'][B][U][SIZE=5]Ji, the Hoppip[/SIZE][/U][/B][/URL] [SIZE=5][U](F), Lvl. 12[/U][/SIZE]
Poke description: Hoppip, the Cottonweed Pokémon. This hopping Pokémon is light as a feather, and can be lifted by the gentlest breeze.
-
Ji is a very energetic Hoppip, always bouncing around. She has been with Ainya ever since she followed Ainya home on a rainy night. If she notices Ainya getting too angry, she tries to calm her down or divert her attention.
[U]Type:[/U] [URL='https://bulbapedia.bulbagarden.net/wiki/Grass_(type)']Grass[/URL] | [URL='https://bulbapedia.bulbagarden.net/wiki/Flying_(type)']Flying[/URL]
[U]Ability:[/U] [URL='http://Ability']Ability[/URL]
[U]Moves:[/U]
[URL='https://bulbapedia.bulbagarden.net/wiki/Absorb_(move)']Absorb[/URL]
[URL='https://bulbapedia.bulbagarden.net/wiki/Synthesis_(move)']Synthesis[/URL]
[URL='https://bulbapedia.bulbagarden.net/wiki/Fairy_Wind_(move)']Fairy Wind[/URL]
[URL='https://bulbapedia.bulbagarden.net/wiki/Energy_Ball_(move)']Energy Ball[/URL]
[/SPOILER]
[SPOILER="???, the Espurr"]
[IMG]https://cdn.bulbagarden.net/upload/thumb/0/09/677Espurr.png/144px-677Espurr.png[/IMG]
[URL='https://bulbapedia.bulbagarden.net/wiki/Espurr_(Pok%C3%A9mon)'][B][U][SIZE=5]???, the Espurr[/SIZE][/U][/B][/URL] [SIZE=5][U](F), Lvl. ?[/U][/SIZE]
Poke description: Ralts senses the emotions of people using the horns on its head. This Pokémon rarely appears before people. But when it does, it draws closer if it senses that the person has a positive disposition.
[U]Type:[/U] [URL='http://Type1']Type1[/URL] | [URL='http://Type2']Type2[/URL]
[U]Ability:[/U] [URL='http://Ability']Ability[/URL]
[U]Moves:[/U]
[URL='http://Move1']Move1[/URL]
[URL='http://Move2']Move2[/URL]
[URL='http://Move3']Move3[/URL]
[URL='http://Move4']Move4[/URL]
[/SPOILER]
[SPOILER="..."]
[IMG]https://i.imgur.com/qd73JDd.gif[/IMG]
[B][U][SIZE=5]??? (?)[/SIZE][/U][/B][U][SIZE=5], Lvl. ??[/SIZE][/U]
Nothing to see here....
[U]Ability:[/U] ...
[U]Type[/U]: ....
[U]Moves:[/U]
...
...
...
...
[/SPOILER]
[SPOILER="..."]
[IMG]https://i.imgur.com/qd73JDd.gif[/IMG]
[B][U][SIZE=5]??? (?)[/SIZE][/U][/B][U][SIZE=5], Lvl. ??[/SIZE][/U]
Nothing to see here....
[U]Ability:[/U] ...
[U]Type[/U]: ....
[U]Moves:[/U]
...
...
...
...
[/SPOILER]

[b]Wearing:[/b] Denim blue jacket, blue trainers, red jeans and a white shirt with a punk-band's logo plastered on it.
[b]Place:[/b] Daily Care Day Care, New Bark Town, Johto Region.

[/Font]

[/font][/side][Font= Caudex][/font][/CENTER]
[Font= Caudex][/font]

It looks like this on the other forum:
1wnyE30.png

It's like a floating aside on the left. Thank you.
Super duper late in getting back at you, and I hope you have figured it out by now, but looking at your code I would really suggest trying to convert most of it into CSS. You can look at the Divtionary to see what you need to get the desired effect!

You can also continue with BBCode, but then I would take a good look at what is supported and possible here on Iwaku, which some of the tags you use aren't.
I actually haven't worked on this at all, so thanks a ton!! I'll check the Divtionary and see how it goes :D.
 
I have a question--several, actually--because I have no idea what I am doing. >.>
 
Well...that is true--but thank you for answering! =3

Could someone here possibly, maybe help make an easy character template? Nothing to complex, I have a few ideas--I just don't have the understanding of how to achieve my goal. :(

@rissa
 
1615614822508.pngHowdy, I've got a question. Is it possible to do the border radius code to just round the top and bottom right corners of an image in a div box? It's the /*Character Image*/ part of my code that I'm hung up on.
Code:
[div=width: 600px; height:auto; background-color:transparent;overflow: none; margin:auto; border:transparent;]

[div=
/*SPINNY CIRCLE*/
margin: auto;
width: 130px;
height: 130px;
border-radius: 100%;
border: 5px solid #746D9B;
border-top:5px solid #ECEBE3;
border-left: 5px solid #ECEBE3;
animation: fa-spin 27s linear 0s infinite;
z-index: 2;
background: black;][div=
/*IMAGE IN THE SPINNY CIRCLE*/
width: 120px;
height: 120px;
border-radius: 100%;
animation: fa-spin 27s linear 0s infinite reverse;
background-size:140px 135px;
background-position: 50%;
z-index: 3;
background-image: url(https://www.iwakuroleplay.com/proxy.php?image=https%3A%2F%2Fth.bing.com%2Fth%2Fid%2FR5316f0f84adcd59fd81a48a7d2287847%3Frik%3D0VxnBjcPr6VqgQ%26riu%3Dhttp%253a%252f%252fstatic.tumblr.com%252f5316f0f84adcd59fd81a48a7d2287847%252ffty1ymh%252fx7Bna7j91%252ftumblr_static_2txw7ouyia4g44owc0sks0c4c.png%26ehk%3Ds8b8vOtNS1Ang5t6rmQNsSrw%252bAMyH6Pwt%252f4E5F4ZJcs%253d%26risl%3D%26pid%3DImgRaw&hash=b664a6d0a06361f1337f1065f8271cb3);][/div][/div][div=/*LINE*/
width: 600px;
height:5px;
z-index: 1;
background-color: #BD8AE6;
overflow: none;
display:inline-block;
margin:auto; top: -75px;][/div][div=/*IN CHARACTER TEXT HERE*/ border: none; width: 60%; height:400px; padding-right: 10px; padding-bottom:10px; text-align: left; margin:auto; top: -10px; float: left; overflow-y: scroll;]In character text here.[/div][div=/*CHARACTER IMAGE*/ background:url(https://www.iwakuroleplay.com/attachments/c4e1cf6b-ef6e-4e6a-87c2-a3f107dc92bb-jpeg.213198/);background-size:cover;background-position:right;width:40%;height:400px; border-width: 0px; border-style: solid; border-color: #ffffff00; border-radius:20px; margin-left: auto; top: -10px;][/div]

[div=/*LINE*/
text-align: center;
width: 600px;
height:5px;
z-index: 1;
background-color: #BD8AE6;
overflow: none;
display:inline-block;
margin:auto; top: -28px;][/div][/div][div=/*NAME*/ width: 750px; height:20px; background-color:transparent;overflow: none;display:block; line-height: 25px; font-family:arial; font-size: 33px; text-transform: lowercase; color: #BD8AE6; text-shadow:1px 1px #746D9B;letter-spacing:-1px; margin-top:-20px;text-align: right;][B][I]clint barton[/I][/B][/div]
[div=/*ALIAS*/ "width: 750px; height:20px; background-color:transparent;overflow: none;display:block; line-height: 25px; font-family:'Averia Serif Libre'; font-size: 15px; text-transform: lowercase; color: #BD8AE6; margin-top:-15px;text-align: right;"][B]hawkeye[/B][/div]
 
View attachment 213260Howdy, I've got a question. Is it possible to do the border radius code to just round the top and bottom right corners of an image in a div box? It's the /*Character Image*/ part of my code that I'm hung up on.
Code:
[div=width: 600px; height:auto; background-color:transparent;overflow: none; margin:auto; border:transparent;]

[div=
/*SPINNY CIRCLE*/
margin: auto;
width: 130px;
height: 130px;
border-radius: 100%;
border: 5px solid #746D9B;
border-top:5px solid #ECEBE3;
border-left: 5px solid #ECEBE3;
animation: fa-spin 27s linear 0s infinite;
z-index: 2;
background: black;][div=
/*IMAGE IN THE SPINNY CIRCLE*/
width: 120px;
height: 120px;
border-radius: 100%;
animation: fa-spin 27s linear 0s infinite reverse;
background-size:140px 135px;
background-position: 50%;
z-index: 3;
background-image: url(https://www.iwakuroleplay.com/proxy.php?image=https%3A%2F%2Fth.bing.com%2Fth%2Fid%2FR5316f0f84adcd59fd81a48a7d2287847%3Frik%3D0VxnBjcPr6VqgQ%26riu%3Dhttp%253a%252f%252fstatic.tumblr.com%252f5316f0f84adcd59fd81a48a7d2287847%252ffty1ymh%252fx7Bna7j91%252ftumblr_static_2txw7ouyia4g44owc0sks0c4c.png%26ehk%3Ds8b8vOtNS1Ang5t6rmQNsSrw%252bAMyH6Pwt%252f4E5F4ZJcs%253d%26risl%3D%26pid%3DImgRaw&hash=b664a6d0a06361f1337f1065f8271cb3);][/div][/div][div=/*LINE*/
width: 600px;
height:5px;
z-index: 1;
background-color: #BD8AE6;
overflow: none;
display:inline-block;
margin:auto; top: -75px;][/div][div=/*IN CHARACTER TEXT HERE*/ border: none; width: 60%; height:400px; padding-right: 10px; padding-bottom:10px; text-align: left; margin:auto; top: -10px; float: left; overflow-y: scroll;]In character text here.[/div][div=/*CHARACTER IMAGE*/ background:url(https://www.iwakuroleplay.com/attachments/c4e1cf6b-ef6e-4e6a-87c2-a3f107dc92bb-jpeg.213198/);background-size:cover;background-position:right;width:40%;height:400px; border-width: 0px; border-style: solid; border-color: #ffffff00; border-radius:20px; margin-left: auto; top: -10px;][/div]

[div=/*LINE*/
text-align: center;
width: 600px;
height:5px;
z-index: 1;
background-color: #BD8AE6;
overflow: none;
display:inline-block;
margin:auto; top: -28px;][/div][/div][div=/*NAME*/ width: 750px; height:20px; background-color:transparent;overflow: none;display:block; line-height: 25px; font-family:arial; font-size: 33px; text-transform: lowercase; color: #BD8AE6; text-shadow:1px 1px #746D9B;letter-spacing:-1px; margin-top:-20px;text-align: right;][B][I]clint barton[/I][/B][/div]
[div=/*ALIAS*/ "width: 750px; height:20px; background-color:transparent;overflow: none;display:block; line-height: 25px; font-family:'Averia Serif Libre'; font-size: 15px; text-transform: lowercase; color: #BD8AE6; margin-top:-15px;text-align: right;"][B]hawkeye[/B][/div]


hey! sorry for the late reply, but yes there is a way. replace yer border-radius: 20px; with border-top-right-radius: 20px; & border-bottom-right-radius: 20px; and that should fix it for ya
 
  • Like
Reactions: AshenAngel
Awesome, thanks a million
 
  • Like
Reactions: rissa
I'm having trouble with tabs?
 
Tabs work a whole lot like accordions if you're familiar with those, provided we're talking about the more 'advanced' tabs. Basically, each tab will be a different slide, and you're going to include a link that will act as the clickable link that switches between the tabs. To give you a bit of a step-by-step, here's a copy-and-paste of my 'tabs' section of the coding guide I made. Hopefully it'll help — if not, I can try to rephrase things for you.

The simple way to do tabs is:
Code:
[TABS]
[TAB=TITLE OF TAB]
content of tab here
[/TAB]
[TAB=TITLE OF TAB 2]
content of tab here
[/TAB]
[/TABS]

which looks like this:


  • content of tab here

  • content of tab here



THE FANCY WAY:

Another way to do tabs is with [ TABS = # | b____ ] as the opening tag where # specifies the length of the tab bar and b___ specifies how it will be aligned. Unlike with the simple way to do tabs shown above, this one uses the { slide = NAME } property to define the number of "tabs" you'll have, and the { tab = # } property as "on-page" navigation links. The #, in this case, is the number of the tab that you want to link to, which corresponds with the slide number.

So instead of the text being between [ TAB ] and [ / TAB ], it goes between { slide = NAME } and { / slide }. The { tab=# } { / tab } is placed around the word(s) that will link to a different tab.

To show you an example:

Code:
[TABS=300|bcenter]
{slide=UNO}y{tab=2}a{/tab}s{/slide}
{slide=DOS}yaa{tab=1}a{/tab}aas{/slide}
[/TABS]

Which gives you
  • yas
  • yaaaaas


You'll notice the links are green, as iwaku links tend to be. You can change the color of the text by using the normal [ COLOR = NAME ] code around the text.

You also aren't restricted to just text between slides and tab links. You can put div boxes, images, and text/font awesome icons between them.

This method is beneficial if you want to make codes where you click on a little image or icon on a sidebar and it changes the text box beside it, as can be seen in some of my codes in my storage thread.

HIDING THE TAB BAR:

Think the tab bar is ugly and ruining your a e s t h e t i c? You can hide it. Although you should only hide it using the second version of the tab codes, as the simple way would make it impossible to transition from one slide to another, I would imagine.

There are two ways to hide it: 1) Use [ div=bottom:__px; ] right before the [ TABS ] code to push the entire code up until the bar is hidden. 2) Make a div box outside of the tabs and then use padding to adjust it until it is laid over the bar. For example:

Code:
[TABS=300|bcenter]
{slide=yeet}some real {tab=2}[COLOR=WHITE]ish[/COLOR]{/tab}{/slide}
{slide=skeet}some fake {tab=1}[COLOR=WHITE]ish[/COLOR]{/tab}{/slide}[/TABS]
[div=width: 300px; height: 60px; background: green; margin: auto; top: -115px;][/div]

Makes this:



 
  • Useful
Reactions: Shotgun Vigilante
So, I tried to follow your example, and it worked...for the most part. However, it does not show the last two tabs and I don't know why. :(
 
Code:
[ATTACH type="full" alt="Untitled 15.jpg"]216598[/ATTACH]
[FONT=Handlee][COLOR=rgb(147, 101, 184)][SIZE=15px]I am looking for a small group of like-minded fans that would enjoy making this with me. You can be a SPARTAN-II, III, IV, or an [B]ODST [/B](Cause always could use the gumption of a [I]Helldiver[/I]. Plus it would add a 'human element though Spartans are indeed human. Weapons are numerous, ammo will be pick up as you go. Spartan Armor is fully customizable. This takes place before 'Infinity' and between 'Guardians'.  Your team is stranded on the Ring World X-ray.

Custom loadout at the start then I will switch you up with weaponry suited to your particular 'class'.[/SIZE][/COLOR][/FONT]


[CENTER][TABS]
[TAB=Spartan-II]
[IMG width="419px"]https://halo.wiki.gallery/images/thumb/2/22/HM-SIIs.png/1200px-HM-SIIs.png[/IMG]

The SPARTAN-II Program, originally known as the ORION Project Generation II, was part of the SPARTAN program, an effort to produce elite soldiers through mechanical and biological augmentation. The SPARTAN-II program would be the first in the series to meld advanced exoskeleton technology with the soldiers' superior physiques.

The SPARTAN-II project was conceived by Dr. Catherine Halsey of ONI Section III's Special Projects Division as the successor to the ORION Project and the best possible solution to end the widespread insurgency that raged throughout UNSC space. The project was created with several goals in mind. The first was to create a group of elite soldiers meant to subdue insurrections in their infancy, without substantial military casualties. The second goal was to minimize civilian casualties and avert civil war. The third goal was to substantially reduce the cost of conventional means of pacification.

Halsey's proposal for the project detailed radical changes in many different fields. The first and most controversial was the subjects themselves, who were selected by a gene-candidate pool, and fit into a certain age restriction protocol (six years old). They also possessed superior physical and mental attributes when compared to other children their age. This narrowed the candidates down to children who would be raised and taught in the art of warfare and military values from a young age, which cannot be taught to older enlisted personnel. Using such questionable means of creating a soldier meant that the project would have to be carried out under the highest levels of secrecy.

[B][I][SIZE=18px]Augmentations[/SIZE][/I][/B]

[CENTER]
Carbide Ceramic Ossification: Advanced material grafting onto skeletal structures to make bones virtually unbreakable. Recommended coverage not to exceed 3% total bone mass because of significant white blood cell necrosis. The specific risk for pre-and near-postpubescent adolescents: skeletal growth spurts may cause irreparable bone pulverization.

Muscular Enhancement Injections: A Protein complex is injected intramuscularly to increase tissue density and decrease lactase recovery time.
Five percent (5%) of test subjects experience a fatal cardiac volume increase.

Catalytic Thyroid Implant: A Platinum pellet containing a human growth hormone catalyst is implanted in the thyroid to boost the growth of skeletal and muscle tissues.Rare instances of Elephantiasis. Suppressed sexual drive.

Occipital Capillary Reversal: Submergence and boosted blood vessel flow beneath the rods and cones of the subject's retina. Produces a marked visual perception increase.

Retinal rejection and detachment. Permanent blindness.

Superconducting Fibrification of Neural Dendrites: Alteration of bioelectrical nerve transduction to shielded electronic transduction. 300% increase in subject reflexes. Anecdotal evidence of a marked increase in intelligence, memory, and creativity. Significant instances of Parkinson's Disease and Fletcher's Syndrome.[/CENTER][/TAB]

[TAB=Spartan-III]
[IMG width="366px"]https://i.pinimg.com/originals/e5/0e/d9/e50ed952cdc99a369cf07ff7d286ba3f.jpg[/IMG]

[CENTER]Project [B]CHRYSANTHEMUM [/B]was the codename given to the biological augmentation procedures performed on the [B]SPARTAN-III[/B] supersoldiers. They represented a significant improvement over the augmentations used in the previous[B] SPARTAN-II[/B] program, retaining the procedures' effectiveness but being safer and less invasive to perform.

The [B]CHRYSANTHEMUM [/B]bioaugmentation set improved upon the augmentations of the [B]SPARTAN-II[/B] program, pioneered by Dr. Catherine Halsey. With advances in technology, the casualty rate for [B]SPARTAN-III[/B] candidates was usually 0%, as opposed to the 56% casualty rate of the SPARTAN-IIs. Most of the [B]SPARTAN-IIIs[/B]' augmentations were chemically induced instead of surgically implanted like many of the SPARTAN-II enhancements.

The schedule of the SPARTAN-III program was accelerated from that of the Spartan-IIs: because the Office of Naval Intelligence wanted to have the Spartans deployed in the field as rapidly as possible, by the time of Gamma Company the Spartan-IIIs were augmented at an average age of twelve, whereas the Spartan-IIs were fourteen during their augmentations. As puberty had not yet started for the majority of candidates at this time, they were given human growth hormone as well as cartilage, muscle, and bone supplements added into their food over several months to artificially induce the onset of puberty. As a result, the candidates had the bodies of near-adult Olympic athletes at an average of only twelve years of age, and it took some time for them to acclimatize to their larger physiques.

[SIZE=18px][B][I]AUGMENTATIONS[/I][/B][/SIZE]

8942-LQ99: "Carbide ceramic ossification catalyst" drug. Skeletons become virtually unbreakable, allowing survival in harder impacts.

88005-MX77: "Fibroid muscular protein complex" drug. Increased density of individuals' muscles, greatly enhancing physical strength.

88947-OP24: "Retina-inversion stabilizer" drug. Color sharpness is significantly improved upon, and night vision is heightened.

87556-UD61: "Improved colloidal neural disunification solution" drug. Greatly improves the individual's reaction time, decreasing the time taken to react by 300%; "Spartan time".

In addition to their chemically-administered primary augmentations, Spartan-IIIs were subjected to a number of surgical alterations to enhance their capabilities. Their circulatory systems were also augmented from the human baseline. Like all UNSC Armed Forces personnel, the Spartan-IIIs are implanted with a neural interface.

The augmentations also involved some degree of genetic modification. As discovered in 2548 with Owen-B096, this made the Spartans immune to the negative genetic effects of some Forerunner artifacts.

In addition to the standard set of chemicals, Kurt Ambrose covertly had a set of three additional drugs added to the augmentations of Gamma Company in hopes of increasing their survivability in the field. All of the three had been outlawed by the UNSC Medical Corps in 2513.

009762-OO: Neural-altering non-carcinogenic mutagen: Alters key regions in the individual's frontal lobe to enhance aggressive response, making the animal part of the brain more accessible in times of stress. This allows the subject access to enormous reserves of strength and endurance and enables them to remain fighting even under the influence of a wide systemic shock that would be instantly fatal to a normal human. Depresses higher reason centers of the brain over time; requires regular doses of 009127-PX and 009927-DG to be taken to avoid uncontrollable aggression.

009127-PX: cyclodexione-4, bipolar integration drug: Counters the effects of 009762-OO.

009927-DG: miso-olanzapine: Counters the psychological effects of 009762-OO. [/CENTER][/TAB]

[TAB=Spartan-IV]
[IMG width="404px"]https://halo.wiki.gallery/images/thumb/b/b7/HSFM_Spartans.jpg/1600px-HSFM_Spartans.jpg[/IMG]

The SPARTAN-IV Program is the fourth generation of the SPARTAN Program consisting of members recruited from the UNSC's military who were augmented to be capable of wearing a new variant of the Mjolnir Powered Assault Armor (GEN2) armor. This phase was initiated by Admiral Margaret Parangosky after the Human-Covenant war.

Similar to the original ORION Project, the SPARTAN-IV Program would only consist of adult volunteers as opposed to young children.[2] When the program was started, surviving members of previous Spartan generations were offered an opportunity to be integrated into it.[4] SPARTAN-IV recruits are drawn from active combat veterans of any branch as well as young soldiers who show potential to be Humanity's next guardians. The physical augmentations of the SPARTAN-IVs, while more advanced than their predecessors, still cannot produce similar results without the risk of a high failure rate, due to the lack of genetic requirements. This drawback is reconciled by modifying the individual to the closest margin possible of the two previous Spartan programs' physical results and then relying on Mjolnir Powered Assault Armor (GEN2) armor to enhance the Spartan's abilities even more than that of Mjolnir GEN1 armor.

Project [B]ORCHID [/B]is the codename for the [B]SPARTAN-IV Augmentation Program[/B], a set of biochemical and surgical augmentation procedures performed on the Spartan-IV supersoldiers. Because of practical necessities arising from the SPARTAN-IV program's return to the ORION Project's recruitment protocols—namely, the use of adults as candidates—as well as advances in technology, the fourth-generation augmentation set differs considerably from the procedures used in the [B]SPARTAN-II[/B] and[B] SPARTAN-III[/B] programs. While the SPARTAN-IV augmentations enhance the subjects' strength and speed, the improvements in these areas are not as extensive as in the two preceding programs[4] and their technological underpinnings are considerably different. However, the SPARTAN-IV augmentation series also introduces many specialized procedures not applied to the previous spartan generations, and the second generation of Mjolnir armor, a standard-issue to all Spartan-IVs, is able to effectively bridge the physiological gap between them and the earlier generations due to its superior physical enhancement. Like the augmentation procedures of the preceding [B]SPARTAN [/B]programs, [B]Project ORCHID[/B] is sponsored by the Office of Naval Intelligence's Section Three.

[CENTER]The augmentations for the [I][B]SPARTAN-IV Program[/B][/I][B][/B]feature a number of new procedures not used in the preceding programs. Due to the subjects' bodies no longer being in developing stages as well as their lack of genetic requirements, the process must be carefully custom-tailored for each individual.[/CENTER][/TAB]

[TAB=ODST]
[center][IMG]https://static.wikia.nocookie.net/halo/images/7/7a/H5G_HTT-S2_ODST.jpg/revision/latest/scale-to-width-down/1000?cb=20150922210108[/IMG]The Orbital Drop Shock Troopers (ODST) are a special operations capable organization of the UNSC Marine Corps that specializes in orbitally-dropped shock infantry and special warfare tactics. The ODSTs are one of the primary Special Operations units of the United Nations Space Command and are under the supervision of Naval Special Warfare Command

The ODSTs perform highly specialized, small scale, high-risk operations including:

- [B][I]Deep Ground Surveillance or Long Range Reconnaissance:[/I][/B] Patrols in small groups, in uniform, usually far behind the enemy lines. While DGS units may direct air or artillery strikes against enemy positions, they strive to be unobserved and have only self-defense, not DA, capability. Groups engaging in surveillance deep behind enemy lines, are commonly known as "Long Range Reconnaissance Patrols" or LRRP's.

- [B][I]Direct Action:[/I][/B] Short-duration strikes and other small-scale offensive actions conducted as a special operation in hostile, denied, or politically sensitive environments and which employ specialized military capabilities to seize, destroy, capture, exploit, recover, or damage designated targets. Direct action differs from conventional offensive actions in the level of physical and political risk, operational techniques, and the degree of discrimination and precise use of force to achieve specific objectives.

- [B][I]Unconventional Warfare:[/I][/B] Military and paramilitary operations, normally of long duration, predominantly conducted by indigenous or surrogate forces who are organized, trained, equipped, supported, and directed in varying degrees by an external source. It includes guerrilla warfare and other direct offensive, low visibility, covert, or clandestine operations, as well as the indirect activities of subversion, sabotage, intelligence gathering, escape, and evasion.

- [B][I]Counter-Terrorism Operations: [/I][/B]The response to terrorist threats and/or acts, both real and imputed.

- [B][I]Counter-Contraband Operations:[/I][/B] Missions undertaking the recapturing of smuggled/stolen goods.

-[B] Personnel and Special Equipment Recovery/Capture: [/B]The recovery/medical treatment of friendly personnel in combat environments, as well as the capability of capturing high valued individuals and any equipment.[/center][/TAB][center]

[TAB=Weapons][/CENTER]
[TABLE]
[TR]
[TH]Name[/TH]
[TH]Description[/TH]
[TH]Image[/TH]
[TH]Statistics[/TH]
[/TR]
[TR]
[TD]Assault Rifle[/TD]
[TD][I]"The standard Assault Rifle utilized by UNSC forces."[/I][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/9/9c/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_Standard.png/revision/latest?cb=20150908175544'][IMG alt="Halo Online - Weapon Variants - Assault Rifle - Standard.png"]https://static.wikia.nocookie.net/halo/images/9/9c/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_Standard.png/revision/latest/scale-to-width-down/150?cb=20150908175544[/IMG][/URL][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/4/44/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_Standard.png/revision/latest?cb=20150908175649'][IMG alt="Halo Online - Weapon Statistics - Assault Rifle - Standard.png"]https://static.wikia.nocookie.net/halo/images/4/44/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_Standard.png/revision/latest/scale-to-width-down/200?cb=20150908175649[/IMG][/URL][/TD]
[/TR]
[TR]
[TD]MAG Assault Rifle[/TD]
[TD][I]"Has an extended magazine capacity for protracted firefight scenarios."[/I][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/f/fb/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_MAG.png/revision/latest?cb=20150908175505'][IMG alt="Halo Online - Weapon Variants - Assault Rifle - MAG.png"]https://static.wikia.nocookie.net/halo/images/f/fb/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_MAG.png/revision/latest/scale-to-width-down/150?cb=20150908175505[/IMG][/URL][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/0/0d/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_MAG.png/revision/latest?cb=20150908175612'][IMG alt="Halo Online - Weapon Statistics - Assault Rifle - MAG.png"]https://static.wikia.nocookie.net/halo/images/0/0d/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_MAG.png/revision/latest/scale-to-width-down/200?cb=20150908175612[/IMG][/URL][/TD]
[/TR]
[TR]
[TD]DMG Assault Rifle[/TD]
[TD][I]"Redesigned barrel provides higher damage than the standard variant."[/I][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/b/be/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_DMG.png/revision/latest?cb=20150908175455'][IMG alt="Halo Online - Weapon Variants - Assault Rifle - DMG.png"]https://static.wikia.nocookie.net/halo/images/b/be/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_DMG.png/revision/latest/scale-to-width-down/150?cb=20150908175455[/IMG][/URL][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/0/03/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_DMG.png/revision/latest?cb=20150908175558'][IMG alt="Halo Online - Weapon Statistics - Assault Rifle - DMG.png"]https://static.wikia.nocookie.net/halo/images/0/03/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_DMG.png/revision/latest/scale-to-width-down/200?cb=20150908175558[/IMG][/URL][/TD]
[/TR]
[TR]
[TD]ROF Assault Rifle[/TD]
[TD][I]"Improved ammunition feed and receiver allows a higher rate of fire during combat."[/I][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/6/6d/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_ROF.png/revision/latest?cb=20150908175522'][IMG alt="Halo Online - Weapon Variants - Assault Rifle - ROF.png"]https://static.wikia.nocookie.net/halo/images/6/6d/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_ROF.png/revision/latest/scale-to-width-down/150?cb=20150908175522[/IMG][/URL][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/a/a1/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_ROF.png/revision/latest?cb=20150908175624'][IMG alt="Halo Online - Weapon Statistics - Assault Rifle - ROF.png"]https://static.wikia.nocookie.net/halo/images/a/a1/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_ROF.png/revision/latest/scale-to-width-down/200?cb=20150908175624[/IMG][/URL][/TD]
[/TR]
[TR]
[TD]SNP Assault Rifle[/TD]
[TD][I]"Match-grade barrel and scope allows for more precise shots over longer distances."[/I][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/8/85/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_SNP.png/revision/latest?cb=20150908175533'][IMG alt="Halo Online - Weapon Variants - Assault Rifle - SNP.png"]https://static.wikia.nocookie.net/halo/images/8/85/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_SNP.png/revision/latest/scale-to-width-down/150?cb=20150908175533[/IMG][/URL][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/b/b3/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_SNP.png/revision/latest?cb=20150908175638'][IMG alt="Halo Online - Weapon Statistics - Assault Rifle - SNP.png"]https://static.wikia.nocookie.net/halo/images/b/b3/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_SNP.png/revision/latest/scale-to-width-down/200?cb=20150908175638[/IMG][/URL][/TD]
[/TR]
[TR]
[TD]ADV Assault Rifle[/TD]
[TD][I]"Extensively redesigned Assault Rifle that improves upon every characteristic of the original."[/I][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/d/d0/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_ADV.png/revision/latest?cb=20150908180740'][IMG alt="Halo Online - Weapon Variants - Assault Rifle - ADV.png"]https://static.wikia.nocookie.net/halo/images/d/d0/Halo_Online_-_Weapon_Variants_-_Assault_Rifle_-_ADV.png/revision/latest/scale-to-width-down/150?cb=20150908180740[/IMG][/URL][/TD]
[TD][URL='https://static.wikia.nocookie.net/halo/images/0/05/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_ADV.png/revision/latest?cb=20150908180752'][IMG alt="Halo Online - Weapon Statistics - Assault Rifle - ADV.png"]https://static.wikia.nocookie.net/halo/images/0/05/Halo_Online_-_Weapon_Statistics_-_Assault_Rifle_-_ADV.png/revision/latest/scale-to-width-down/200?cb=20150908180752[/IMG][/URL][/TD]
[/TR]
[/TABLE]
[CENTER]
[/tab]
[TAB=Vehicles]
[/tab]
[/CENTER][/tabs][/CENTER]
 
So the issue there appears to be the center tags that are right around both tabs, which is making neither work properly. If you delete those [ center ] [ /center ] tags around the last couple tabs, it should work just fine for you c:
 
  • Thank You
Reactions: Shotgun Vigilante
Thanks!
 
  • Bucket of Rainbows
Reactions: wren.
Is there a way to make a tabs system INSIDE a tabs setup?