BBCode Help

[rissa]

BBCODE AND DIVBOX INQUIRIES

---

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

F. A. Q.

INDEX TO FREQUENTLY ASKED QUESTIONS​

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

Thank you @Elle Joyner for compiling this list!

BBCH VI​

H E L P F U LxxL I N K S

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

 

[yasei no shika]

So, been recently trying to do div codes and stuff. I lurked on the old BBCode help thread too and I got an idea, a question cause of it too.

Can you put accordions/sliders inside tables?

 

[darkflames13]

So, been recently trying to do div codes and stuff. I lurked on the old BBCode help thread too and I got an idea, a question cause of it too.

Can you put accordions/sliders inside tables?

Yep :)

Title Content Title Content

Title 1 Content 1 Content 2 Content 3 Content 4

[table][tr][td=border: 1px solid red; width:300px;][accordion=center|100%]
{slide=Title|center}Content {/slide}
{slide=Title|center}Content {/slide}
[/accordion][/td][td=border:1px solid purple;][slider]
{slide=Title 1|center}Content 1{/slide}
{slide}Content 2{/slide}
{slide}Content 3{/slide}
{slide=open}Content 4{/slide}
[/slider][/td][/tr][/table]

 

[yasei no shika]

Yep :)

Title Content Title Content

Title 1 Content 1 Content 2 Content 3 Content 4

[table][tr][td=border: 1px solid red; width:300px;][accordion=center|100%]
{slide=Title|center}Content {/slide}
{slide=Title|center}Content {/slide}
[/accordion][/td][td=border:1px solid purple;][slider]
{slide=Title 1|center}Content 1{/slide}
{slide}Content 2{/slide}
{slide}Content 3{/slide}
{slide=open}Content 4{/slide}
[/slider][/td][/tr][/table]

OOOh! Thanks!

 

[Mollisol]

Hi all,

I'm trying to use inline-block to create columns, and I can't figure out what I'm doing wrong. Currently it looks like this

big codes

.

.

.

.

.

blah

code text

[color=transparent].[/color][/div][div=
display: inline block;
width: 480px;
border: 2px cornflowerblue solid;
][div=
  display: flex;
  width: 470px;
  z-index: 1;][div=
   flex: 1;
   margin-right: 5px;
   margin-left: 50px;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 2px white solid;
   background: url(https://i.imgur.com/4fmUipp.jpg);
][color=transparent].[/color][/div][div=
    flex: 1;
    margin: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px white solid;
    background: url(https://i.imgur.com/BJAeyh3.jpg);
][color=transparent].[/color][/div][div=
    flex: 1;
    margin: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px white solid;
    background: url(https://i.imgur.com/4fmUipp.jpg);
][color=transparent].[/color][/div][div=
    flex: 1;
    margin: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px white solid;
    background: url(https://i.imgur.com/BJAeyh3.jpg);
][color=transparent].[/color][/div][/div][div=
 margin-top: -50px;
 width: 420px;
 height: 420px;
 background-color: white;
 color: black;
 border-radius: 5px;
 overflow: auto;
 z-index: 0;]blah[/div][/div]

And I want the picture to be on the left, and the content outlined in blue to be on the right, in the same row. How do I do this?

 

[darkflames13]

Hi all,

I'm trying to use inline-block to create columns, and I can't figure out what I'm doing wrong. Currently it looks like this

big codes

.

.

.

.

.

blah

code text

[color=transparent].[/color][/div][div=
display: inline block;
width: 480px;
border: 2px cornflowerblue solid;
][div=
  display: flex;
  width: 470px;
  z-index: 1;][div=
   flex: 1;
   margin-right: 5px;
   margin-left: 50px;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border: 2px white solid;
   background: url(https://i.imgur.com/4fmUipp.jpg);
][color=transparent].[/color][/div][div=
    flex: 1;
    margin: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px white solid;
    background: url(https://i.imgur.com/BJAeyh3.jpg);
][color=transparent].[/color][/div][div=
    flex: 1;
    margin: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px white solid;
    background: url(https://i.imgur.com/4fmUipp.jpg);
][color=transparent].[/color][/div][div=
    flex: 1;
    margin: 5px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px white solid;
    background: url(https://i.imgur.com/BJAeyh3.jpg);
][color=transparent].[/color][/div][/div][div=
 margin-top: -50px;
 width: 420px;
 height: 420px;
 background-color: white;
 color: black;
 border-radius: 5px;
 overflow: auto;
 z-index: 0;]blah[/div][/div]

And I want the picture to be on the left, and the content outlined in blue to be on the right, in the same row. How do I do this?

You forgot to add the hyphen between inline and block for the second column div. Correcting that should make them sit beside each other. To align them at the top, just add vertical-align:top; to the first column div c:

 

[Tiger Dragon]

Oh geez, you don't suppose I can ask for some coding help?

So the problems I'm having is I'm trying to put a circle portrait to the right of the text inside the tab. Whenever I put the code in to make it go right, the image stops showing up. It's a big image so I tried using the shrink code first, but it had the same effect, the image is just not showing.

Outside of that problem, I'm afraid I don't quite understand how to move the image within the circle to show just the face of the character.

[fieldbox="Main Cast, teal, dashed, 10"]

Sage Russo Title 2

• 
  Name: Sage Russo
  Class: Novice Adventure
  Level: 5
  Skills:
  
  • Weapons: ( 0 ) Red Skills
  • Armor: ( 0) Yellow Skills
  • Magic: ( 0 ) Blue Skills
  • Utility: ( 0) Green Skills
  • White EXP: 5
  Abilities: None
  Money: None
  Equipment: Button up shirt, Tie, Binds, Slack Pants, Wallet with 20$ American dollars and a picture ID, Flip Phone, and apartment keys, picture of her and her mother. Cat paw keychain.
• Content 2

[/fieldbox]

[fieldbox="Main Cast, teal, dashed, 10"]
[tabs]
[tab=Title 1]
[imga=right] [div=
   background-image: url(https://i.pinimg.com/originals/14/46/f7/1446f79f0b82bd970f40a90aa255cad0.jpg);
   background-repeat: no-repeat;
   height: 300px;
   width: 300px;
   border: 1px solid #000;
   border-radius: 50%;] [/div] [/imga]Name: Sage Russo
Class: Novice Adventure
Level: 5
Skills:
Weapons: ( 0 ) Red Skills
Armor: ( 0) Yellow Skills
Magic: ( 0 ) Blue Skills
Utility: ( 0) Green Skills
White EXP: 5
Abilities: None
Money: None
Equipment: Button up shirt, Tie, Binds, Slack Pants, Wallet with 20$ American dollars and a picture ID, Flip Phone, and apartment keys, picture of her and her mother. Cat paw keychain. [/tab]
[tab=Title 2]Content 2[/tab]
stuff [/tabs] [/fieldbox]

 

[serendipity]

@Tiger Dragon ; was this what you had wanted?

explanation: instead of using the separate code "image a", i added "float: right" into the div code. once i added the float, this allowed the photo to float to the right of the text. to adjust your photo to allow it to be "shown", i added "background-size" and made it 100% , added "position: relative" to make it stay "in place", and lastly made the "border-radius" to 100%!

sometimes, what would be easier is personally resizing and cropping the photo itself to a certain image size to match the "width" and "height" of said circular width and height because there will be times that you'd have to manually play around with the background position itself to make the photo where you want it positioned. but, in this case, the photo ended up being perfectly adjusted!

i hope this helped!

[fieldbox="Main Cast, teal, dashed, 10"]
[tabs]
[tab=Title 1][div=
   background-image: url(https://i.pinimg.com/originals/14/46/f7/1446f79f0b82bd970f40a90aa255cad0.jpg);
   background-repeat: no-repeat;
   background-size: 100%;
   height: 300px;
   width: 300px;
   border: 1px solid #000;
   position: relative;
   border-radius: 100%; float: right;] [/div]Name: Sage Russo
Class: Novice Adventure
Level: 5
Skills:
Weapons: ( 0 ) Red Skills
Armor: ( 0) Yellow Skills
Magic: ( 0 ) Blue Skills
Utility: ( 0) Green Skills
White EXP: 5
Abilities: None
Money: None
Equipment: Button up shirt, Tie, Binds, Slack Pants, Wallet with 20$ American dollars and a picture ID, Flip Phone, and apartment keys, picture of her and her mother. Cat paw keychain. [/tab]
[tab=Title 2]Content 2[/tab]
stuff [/tabs] [/fieldbox]

 

[Tiger Dragon]

Thanks so must! It's EXACTLY what I wanted. So I should use float instead of some of the other codes in the BBC. There were places you could post for free to get URL?

I was hoping I could "Upload a File" and put it inside the code, but it only seems to break it, so it had made using photos a bit more difficult for me.

Edit: Second: Can you add the background to tabs? When I tried putting the background, it didn't really show up. Its like it didn't exist. Perhaps I was putting the code in the wrong place?

 

[serendipity]

Not a problem, @Tiger Dragon !

For what you want to do in regards to having your image to the side of the text, using 'float' would get the job done! However, with using float, if the text surpasses a certain amount of "lines" in regards to the text "overflowing" beyond the height of the image, the text will wrap around the image in terms of the text going underneath the image rather than strictly staying to the side.

If you want the text to strictly stay to the side, you can use the column code from the BBC to do so or you can use the div code but that takes more position aligning and manual adjustments to correctly make your code the way you want.

I believe your best friends are the column code and the float!

Using image links are much easier (as you did in the div for the background url for your circle photo) than uploading a file as I have not worked out the kinks for that yet.

Of course! You can add a background! Would you like the background to cover the entire tabs or would you like different backgrounds for each tabs?

 

[Tiger Dragon]

Would it be too much to ask if maybe I can have example codes of both options? I seem to be fairly terrible at reading instructions and attempting myself. I learn more from examples and hands on. I've been trying hands-on by goofing off with them, but I don't know enough about the subject to code them correctly outside the basic BBC provided in the guide.

Thanks so much for your help.

 

[serendipity]

I would love to help! Is it alright if I send you the examples and code by the end of the week? I got ill recently (cold and allergies) and I'm trying to recover and finals are this week! @Tiger Dragon (I think I will be sending you 4 different examples since sometimes background images and text on said background image may not mesh well together so you'd need a background color to see the text)

 

[Tiger Dragon]

Thanks so much! That's sounds absolutely amazing. Please get better soon and take your time!

 

[serendipity]

@Tiger Dragon ; Thank you so much for your patience and support!

Above each code is basically describing what I've done using a background image! Maybe one of these ideas will suit your taste and liking!

Here are the examples! i hope you find the one you're looking for if not, let me know!

background image that covers the whole code; no background color inside tabs (change color text to white to display text) ​

[div=background: url('http://wallpapersmp.com/image/2016/02/ddedf5807b9c36c5b5f6ec870b3e3944.jpg') no-repeat; background-size: cover; position: relative; margin: auto; padding: 5px;][fieldbox="Main Cast, teal, dashed, 10"]
[tabs]
[tab=Title 1][div=
   background-image: url(https://i.pinimg.com/originals/14/46/f7/1446f79f0b82bd970f40a90aa255cad0.jpg);
   background-repeat: no-repeat;
   background-size: 100%;
   height: 300px;
   width: 300px;
   border: 1px solid #000;
   position: relative;
   border-radius: 100%; float: right;][/div][color=white]Name: Sage Russo
Class: Novice Adventure
Level: 5
Skills:
Weapons: ( 0 ) Red Skills
Armor: ( 0) Yellow Skills
Magic: ( 0 ) Blue Skills
Utility: ( 0) Green Skills
White EXP: 5
Abilities: None
Money: None
Equipment: Button up shirt, Tie, Binds, Slack Pants, Wallet with 20$ American dollars and a picture ID, Flip Phone, and apartment keys, picture of her and her mother. Cat paw keychain.[/color][/tab]
[tab=Title 2]Content 2[/tab][/tabs] [/fieldbox][/div]

background image covering whole code with a white background in tabs to display text (an opacity was used to make the background slightly more visible)​

[div=background: url('http://wallpapersmp.com/image/2016/02/ddedf5807b9c36c5b5f6ec870b3e3944.jpg') no-repeat; background-size: cover; position: relative; margin: auto; padding: 5px;][fieldbox="Main Cast, teal, dashed, 10"]
[tabs]
[tab=Title 1][div=background-color: aliceblue; opacity: 0.8; padding: 15px;][div=
   background-image: url(https://i.pinimg.com/originals/14/46/f7/1446f79f0b82bd970f40a90aa255cad0.jpg);
   background-repeat: no-repeat;
   background-size: 100%;
   height: 300px;
   width: 300px;
   border: 1px solid #000;
   position: relative;
   border-radius: 100%; float: right;][/div][color=black]Name: Sage Russo
Class: Novice Adventure
Level: 5
Skills:
Weapons: ( 0 ) Red Skills
Armor: ( 0) Yellow Skills
Magic: ( 0 ) Blue Skills
Utility: ( 0) Green Skills
White EXP: 5
Abilities: None
Money: None
Equipment: Button up shirt, Tie, Binds, Slack Pants, Wallet with 20$ American dollars and a picture ID, Flip Phone, and apartment keys, picture of her and her mother. Cat paw keychain.[/color][/div][/tab]
[tab=Title 2]Content 2[/tab][/tabs] [/fieldbox][/div]

background image only displaying inside the tabs and a white color text was used to display text​

[fieldbox="Main Cast, teal, dashed, 10"]
[tabs]
[tab=Title 1][div=background: url('http://wallpapersmp.com/image/2016/02/ddedf5807b9c36c5b5f6ec870b3e3944.jpg') no-repeat; background-size: cover; position: relative; margin: auto; padding: 15px;][div=
   background-image: url(https://i.pinimg.com/originals/14/46/f7/1446f79f0b82bd970f40a90aa255cad0.jpg);
   background-repeat: no-repeat;
   background-size: 100%;
   height: 300px;
   width: 300px;
   border: 1px solid #000;
   position: relative;
   border-radius: 100%; float: right;][/div][color=white]Name: Sage Russo
Class: Novice Adventure
Level: 5
Skills:
Weapons: ( 0 ) Red Skills
Armor: ( 0) Yellow Skills
Magic: ( 0 ) Blue Skills
Utility: ( 0) Green Skills
White EXP: 5
Abilities: None
Money: None
Equipment: Button up shirt, Tie, Binds, Slack Pants, Wallet with 20$ American dollars and a picture ID, Flip Phone, and apartment keys, picture of her and her mother. Cat paw keychain.[/color][/div][/tab]
[tab=Title 2][div=background: url('http://wallpapersmp.com/image/2016/02/ddedf5807b9c36c5b5f6ec870b3e3944.jpg') no-repeat; background-size: cover; position: relative; margin: auto; padding: 15px;][color=white]Content 2[/color][/div][/tab][/tabs] [/fieldbox]

 

[Tiger Dragon]

Thank you so much for these examples. I see now a lot of my mistakes came in how I "ended" the coding rather than starting it. I will toy around with these a bit!

 

[BookDragon]

I'm having trouble getting my images to actually show up within my posts? I'm positive I have the correct bbc code but for some reason it is not working?

 

[darkflames13]

I'm having trouble getting my images to actually show up within my posts? I'm positive I have the correct bbc code but for some reason it is not working?

Can you show us the code you're working with? :)

 

[BookDragon]

@darkflames13 . I actually was able to get it to work.

 

[Tiger Dragon]

I'm back, and this time with more questions!

I was wondering what all you can do with tabs? Such as changing the color of the tabs or text? Not necessarily putting a background in it, but actually changing the color of the tabs. I know you can make them kind of see-through, I've figured that much out.

 

[darkflames13]

I'm back, and this time with more questions!

I was wondering what all you can do with tabs? Such as changing the color of the tabs or text? Not necessarily putting a background in it, but actually changing the color of the tabs. I know you can make them kind of see-through, I've figured that much out.

Unfortunately, for the regular tabs, it's not possible to change their colour. However, it is possible to change the font of it!

Stabs are the ones that allow alteration of tab colours. I have a post here in the old bbcode help thread that explains how it can be done c:

 

[Reina]

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?