BBCode Help

[Apollyon]

Add their respective closing tags before the openings of the next one.
For example:

[bg=purple][fieldbox="Box One, black, solid"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu eget dolor lobortis condimentum. Quisque volutpat ante in felis vulputate, vel pulvinar risus aliquet. Quisque in turpis porta quam scelerisque ullamcorper eu ut arcu. Donec rutrum tincidunt neque. Quisque maximus nisl non sapien facilisis mattis. Etiam ac felis pellentesque, semper risus faucibus, dignissim tellus. Mauris vitae lorem ut enim ornare volutpat. Aenean auctor nulla mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi mi enim, vulputate vel ipsum ut, varius porta nisl. Phasellus vel ante dui. Nunc condimentum tellus augue, non ultrices lorem viverra id. Etiam placerat ante scelerisque purus ornare suscipit. Ut dapibus enim nec fringilla sagittis.[/fieldbox][/bg]

[bg=purple][fieldbox="Box Two, black, solid"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit arcu eget dolor lobortis condimentum. Quisque volutpat ante in felis vulputate, vel pulvinar risus aliquet. Quisque in turpis porta quam scelerisque ullamcorper eu ut arcu. Donec rutrum tincidunt neque. Quisque maximus nisl non sapien facilisis mattis. Etiam ac felis pellentesque, semper risus faucibus, dignissim tellus. Mauris vitae lorem ut enim ornare volutpat. Aenean auctor nulla mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi mi enim, vulputate vel ipsum ut, varius porta nisl. Phasellus vel ante dui. Nunc condimentum tellus augue, non ultrices lorem viverra id. Etiam placerat ante scelerisque purus ornare suscipit. Ut dapibus enim nec fringilla sagittis.[/fieldbox][/bg]

Code: [spoili]
[solid=purple][bg=purple][fieldbox="Title one, black, solid"]Content goes here.
[/fieldbox][/bg][/solid]
[solid=purple][bg=purple][fieldbox="Title two, black, solid"]Content goes here.[/fieldbox][/bg][/solid]
[/solid][/spoili]

Thank you, I wasn't sure how to close them. >_< It never came up with the closing tags for BG and fieldset when I used them.

 

[Spectre of the Fade]

So, random question. Not certain if this has been asked before, and if it has I apologize, but would any of you lovely people be able to help me remove this gap I have at the bottom of my image? It's between the end of the image and the border of my div and I haven't been able to figure out how to fix it with margins and whatnot. It's not a real issue, certainly not code-breaking, but it does bug me a bit. Basically: I'd love to fix it, but it's no big deal. Thanks for taking a look, regardless. ^^

The problem:
[spoili]
[/spoili]

The code:
[spoili]
[div=width: 60%; margin-left: auto; margin-right: auto; border: 5px #4B4348 solid; margin-bottom: 1%;][img]https://shop.thecoolhunter.net/wp-content/uploads/2016/05/smoke.jpg[/img][/div][/spoili]

The post:
Here

 

[Elle Joyner]

So, random question. Not certain if this has been asked before, and if it has I apologize, but would any of you lovely people be able to help me remove this gap I have at the bottom of my image? It's between the end of the image and the border of my div and I haven't been able to figure out how to fix it with margins and whatnot. It's not a real issue, certainly not code-breaking, but it does bug me a bit. Basically: I'd love to fix it, but it's no big deal. Thanks for taking a look, regardless. ^^

The problem:
[spoili]
View attachment 146455[/spoili]

The code:
[spoili]
[div=width: 60%; margin-left: auto; margin-right: auto; border: 5px #4B4348 solid; margin-bottom: 1%;][img]https://shop.thecoolhunter.net/wp-content/uploads/2016/05/smoke.jpg[/img][/div][/spoili]

The post:
Here

Try removing the line break between 1%;] and the [img code. :)

 

[Spectre of the Fade]

Try removing the line break between 1%;] and the [img code. :)

I don't think there's a line break there. :c On my phone at the moment, so I might be missing something, but adding a line break in that spot gave me a gap at the top of the image. I deleted that line break, and it still has the gap at the bottom.

 

[Elle Joyner]

Hmm... That's odd... Cause on my mobile I've got a definite space between the two. You might need to put the image in a div background code? What happens though, if you take out the 1% margin?

 

[Spectre of the Fade]

Hmm... That's odd... Cause on my mobile I've got a definite space between the two. You might need to put the image in a div background code? What happens though, if you take out the 1% margin?

It's doing that on my mobile, too. Might have to do with how the URL wraps? But um. Removing the margin-bottom didn't fix it, either, just closed the gap between the image and my text boxes. I put a margin-top: 1% in the text box div for now. Unless you have another suggestion, I think you're right about putting the image as the div's background...that's going to be a pain in the butt. I did try messing with negative margin-bottom and negative padding-bottom earlier, if that counts for anything.

 

[Elle Joyner]

It's doing that on my mobile, too. Might have to do with how the URL wraps? But um. Removing the margin-bottom didn't fix it, either, just closed the gap between the image and my text boxes. I put a margin-top: 1% in the text box div for now. Unless you have another suggestion, I think you're right about putting the image as the div's background...that's going to be a pain in the butt. I did try messing with negative margin-bottom and negative padding-bottom earlier, if that counts for anything.

Ah... Yeah. Probably just wrapping weird for mobile then. And I figured that was the margin between the border and the boxes beneath :p bummer.

Putting the margin at the top worked, then? Or no?

 

[Spectre of the Fade]

Ah... Yeah. Probably just wrapping weird for mobile then. And I figured that was the margin between the border and the boxes beneath :p bummer.

Putting the margin at the top worked, then? Or no?

No, it's still doing the thing. :c I think I'll try your suggestion, setting the image as the div background, and see how that goes.

 

[Elle Joyner]

Lemme know. If that doesn't do it, I'll try to get to my laptop and play around.

 

[Spectre of the Fade]

Lemme know. If that doesn't do it, I'll try to get to my laptop and play around.

That fixed it. c: No gap. Now I have to play around with height and width and such instead of the div conveniently scaling the image to match, but that's no biggie. Thanks for the assistance! ^^

 

[Elle Joyner]

That fixed it. c: No gap. Now I have to play around with height and width and such instead of the div conveniently scaling the image to match, but that's no biggie. Thanks for the assistance! ^^

No problemo :) Looks great though :)

 

[Apollyon]

Quick question; under 'Prefix' and in the title slot, can you color code the title like you can in the Body?

E.x: Title is 'REX' R being red, E being Blue and X being green?

I tried: : REX

[COLOR=rgba(255, 255, 255, 0.7)][/COLOR]

But, its preview, it doesn't come up at all.


It just shows:

[SIZE=6][B]Create Thread: [COLOR=red]A[/COLOR][COLOR=blue]R[/COLOR][COLOR=green]K[/COLOR][/B][/SIZE]

 

[Apollyon]

It doesn't show the colors unless I paste them in the Body

 

[Elle Joyner]

It doesn't show the colors unless I paste them in the Body

Pretty sure you can only use code in the body of a thread. Not the title. Only thing you can do in the title is use unicode (copy/paste symbols) but it isn't recommended, cause it makes searching for your thread much more difficult.

 

[Apollyon]

Thanks; How do you post pictures as the background to a thread?

[bg=Link here]

Like that?

 

[Elle Joyner]

Okay - so the basic code is

text

code

[div=background-image:url(https://www.venus-berlin.com/wp-content/uploads/2017/05/universe-stars-background.jpg);][color=white]text[/color][/div]

There are also qualifier for this, however. Such as size (height/width), repeatition (horizontally/diagonally or no repeat), where you want the image (position on the page), and fixed-position (prevents scrollling with the rest of the page).

For example...

text

text

code

[div=background-image:url(https://www.venus-berlin.com/wp-content/uploads/2017/05/universe-stars-background.jpg); height:200px; width:100%; background-repeat:no-repeat;][color=white]text[/color][/div]

[div=background-image:url(https://www.venus-berlin.com/wp-content/uploads/2017/05/universe-stars-background.jpg); height:200px; width:50%; background-repeat:no-repeat;background-attachment: fixed;][color=white]text[/color][/div]

XD I think you asked that before? Page 8 of this thread. :)

 

[Apollyon]

Really? Man, I hate brain injuries. =/

 

[Apollyon]

Okay, so I went with your code:

[div=background-image:url(https://www.venus-berlin.com/wp-content/uploads/2017/05/universe-stars-background.jpg); height:200px; width:100%; background-repeat:no-repeat;][color=white]text[/color][/div]

I just added a different image. Dimensions are 981 x 551 for the original image so I 981px and I was tinkering with the width, brought it up to 200% and its still cutting off and not filling the post as it should.


[color=red]A[/color][color=blue]R[/color][color=green]K[/color]

 

[darkflames13]

Okay, so I went with your code:

[div=background-image:url(https://www.venus-berlin.com/wp-content/uploads/2017/05/universe-stars-background.jpg); height:200px; width:100%; background-repeat:no-repeat;][color=white]text[/color][/div]

I just added a different image. Dimensions are 981 x 551 for the original image so I 981px and I was tinkering with the width, brought it up to 200% and its still cutting off and not filling the post as it should.


[color=red]A[/color][color=blue]R[/color][color=green]K[/color]

Try adding the background-size property. My post [here] explains what it does and what values you can use with it. Using the value cover should do the trick I think. :)

 

[Apollyon]

Would Png vs JPeg have any impact on the overall image?

Also, you explained Auto is used for undefined parameters, correct? I believe I would need to use Contain; even when I shrank the image down quite a bit; 1191x670 to 939x669--think it might be a bit too big?

[div=background-image:url(https://pre00.deviantart.net/865d/th/pre/f/2015/161/1/4/ark_survival_evolved_by_blackscorp81-d8wqmtj.png); height:200px; width:100%; background-repeat:no-repeat;][color=white]text[/color][/div]

Where would I put contain and keep it from repeating the image?

Try adding the background-size property. My post [here] explains what it does and what values you can use with it. Using the value cover should do the trick I think. :)

[/code]