Tutorial BBCode Assistance Thread

[Loraenys]

Does copy-pasting Stone's code not work?

WelI needed to apply it to the code I already had made. But, of course, after just asking for help, I got it to work xD

Thanks for the help Stone! ^^

 

[myfanwy]

hi, me again. how do i make rounded headers? like.

how do i make this rounded? or at least, the corners

 

[StoneWolf18]

hi, me again. how do i make rounded headers? like.

how do i make this rounded? or at least, the corners

I would use a div to do that. A div or border to get something like this:

text

[div=border: 4px solid black; color: white; background: black; padding: 5px; border-radius: 10px]text[/div]

 

[myfanwy]

StoneWolf18 thank you ^^

 

[Ferociousfeind]

Argh. I'm a total noob and have completely forgotten how RPNation spoilers work. It's not (spoiler)(/spoiler) as far as I can tell.
EDIT: As it turns out, the [insert...] tab isn't just an "insert an image" tab. Durp da derp ignor dis
However, I would love it if it was changed from [insert...] to [more...]
EDIT2: BUT!!! Can you add footnotes somehow? Thanks for reading my trainwreck of a post.

 

[IctoraPost]

Argh. I'm a total noob and have completely forgotten how RPNation spoilers work. It's not (spoiler)(/spoiler) as far as I can tell.
EDIT: As it turns out, the [insert...] tab isn't just an "insert an image" tab. Durp da derp ignor dis
However, I would love it if it was changed from [insert...] to [more...]
EDIT2: BUT!!! Can you add footnotes somehow? Thanks for reading my trainwreck of a post.

What do you mean by footnotes? Couldn't you just write something at the bottom of your post?

 

[Ferociousfeind]

Perhaps I'm feeling too ambitious, but I'm looking for footnotes that would direct you to the bottom of the page when clicked. Mostly because you get that kind of luxury in the SCP editor, via [[footnote]]a cool on-page link and automatically-ordered numbers [[/footnote]]
However even as I type this it sounds pretty dumb and unnecessary since. ^1
1 you can simply do this instead.

 

[IctoraPost]

Ah, you mean anchor links. We used to be able to do that, then it got fixed because it was exploiting a potentially harmful bug. They might be coming back in the future, so you'll just have to make do until then.

 

[Lady Warlock]

I'm looking for someone to help me learn how to align things in div boxes. I made my own thread for it, but I figured maybe asking here might be a good idea too. I want someone who's going to teach me how to do it myself, though; I don't want the code to just be given to me because I don't understand how to credit bbcode to someone else and I don't get how that whole thing works. Since I don't know how to do that, the only way to not break rules is to learn how to do things myself I think.

 

[StoneWolf18]

I'm looking for someone to help me learn how to align things in div boxes. I made my own thread for it, but I figured maybe asking here might be a good idea too. I want someone who's going to teach me how to do it myself, though; I don't want the code to just be given to me because I don't understand how to credit bbcode to someone else and I don't get how that whole thing works. Since I don't know how to do that, the only way to not break rules is to learn how to do things myself I think.

What are you trying to align? Normally it would either have to do with the margins, padding, or floats.

 

[Lady Warlock]

What are you trying to align? Normally it would either have to do with the margins, padding, or floats.

I tried using floats and then nothing stayed inside the actual div box that I had in the background. I'm using margins and padding and it still doesn't line up right. I want an image to be alongside a div box with text in it. And nothing I'm doing is working.

I've even tried using columns and that still isn't helping things line up at all.

 

[StoneWolf18]

I tried using floats and then nothing stayed inside the actual div box that I had in the background. I'm using margins and padding and it still doesn't line up right. I want an image to be alongside a div box with text in it. And nothing I'm doing is working.

I've even tried using columns and that still isn't helping things line up at all.

Columns and or using multiple divs are your best bet.

 

[Lady Warlock]

Columns and or using multiple divs are your best bet.

I have tried and I don't know how. That's why I'm asking for help.

 

[StoneWolf18]

I have tried and I don't know how. That's why I'm asking for help.

.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.

Spoiler: code

[div=margin: auto; width: 410px; height: 200px; border: 3px solid black; background: white;][div=background: url(https://media2.giphy.com/media/iabVf0JHssyUE/200_s.gif); color: transparent; float: left; height: 200px; width: 200px;].[/div][div=text-align: left; font-size: 14px; color: black; float: left; height: 190px; width: 200px; padding: 5px; overflow: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/div]

 

[Lady Warlock]

.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.

Spoiler: code

[div=margin: auto; width: 410px; height: 200px; border: 3px solid black; background: white;][div=background: url(https://media2.giphy.com/media/iabVf0JHssyUE/200_s.gif); color: transparent; float: left; height: 200px; width: 200px;].[/div][div=text-align: left; font-size: 14px; color: black; float: left; height: 190px; width: 200px; padding: 5px; overflow: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/div]

I'm trying to do it in such a way that there is space between the two. I don't want the image to be touching the edge of the text box and whenever I make two div boxes, they always wind up one on top of the other. I'm trying to make something again so that I can demo what goes wrong.

 

[StoneWolf18]

I'm trying to do it in such a way that there is space between the two. I don't want the image to be touching the edge of the text box and whenever I make two div boxes, they always wind up one on top of the other. I'm trying to make something again so that I can demo what goes wrong.

Then I expect that the box is too small. Alter it like this.

.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.

Spoiler: code

[div=margin: auto; width: 450px; height: 200px; border: 3px solid black; background: white;][div=background: url(https://media2.giphy.com/media/iabVf0JHssyUE/200_s.gif); color: transparent; float: left; height: 200px; width: 200px;].[/div][div=text-align: left; font-size: 14px; color: black; float: right; height: 190px; width: 200px; padding: 5px; overflow: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/div]

 

[Lady Warlock]

Then I expect that the box is too small. Alter it like this.

.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.

Spoiler: code

[div=margin: auto; width: 450px; height: 200px; border: 3px solid black; background: white;][div=background: url(https://media2.giphy.com/media/iabVf0JHssyUE/200_s.gif); color: transparent; float: left; height: 200px; width: 200px;].[/div][div=text-align: left; font-size: 14px; color: black; float: right; height: 190px; width: 200px; padding: 5px; overflow: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/div]

I haven't been doing anything to change the size of any boxes at all. I don't know how to decide what size I would want in the first place.

 

[StoneWolf18]

I haven't been doing anything to change the size of any boxes at all. I don't know how to decide what size I would want in the first place.

Can you paste your code here?

 

[MISTER UN. 0W3N]

Example that I was going to post up in the other thread, but I'll post it in here:

Lorem ipsum dolor sit amet, latine nominati pri in. Atqui postulant vix id. Ius ad fugit zril, graecis cotidieque cu mel. Ipsum volumus oporteat mel at, eu pri diam albucius.

Mel esse intellegam interesset ne, ex his error volumus luptatum. Ad eius sonet gloriatur duo. In sed dicit decore, diam graecis an eum, assum eirmod disputando sed ne. Quando mediocritatem est et, magna elaboraret an nam, ex epicurei conclusionemque vel. Has legere iracundia ne, at eirmod voluptua his. Mei tale iuvaret no, sit ex elit omnes consulatu.

At iisque facilisis moderatius quo. Eu esse alterum mandamus per. Adhuc saepe deterruisset ut est. Vel omnium prompta ut, duo timeam luptatum accommodare et, ei vivendum partiendo gloriatur his. Adipisci instructior his at, te erat referrentur mea, reque placerat omittantur pri ex. Eius nominati his eu, cu per alienum ancillae.

Tale essent suavitate sea an, cu cum atqui probatus quaestio, te dictas discere diceret his. Falli tantas sed ea, omnis liber interpretaris no sea, no purto doming reformidans pri. Mel ad fastidii mentitum quaerendum. Cum et malis legimus, an duis aeque iuvaret pri. Dicat choro verterem ex cum.

Et velit vocent argumentum eum, ex fabulas tractatos eam, eleifend complectitur delicatissimi ius ut. Est cu albucius officiis forensibus, porro ullum vel an. Duo eius dicta repudiare et. His everti intellegam eu, cu qui ridens facilis, elitr delicata eu duo. Mei id suscipit qualisque hendrerit, fugit nonumy in vis. Facer dolore soluta ea vel, in amet officiis vix.

 

[Lady Warlock]

I've figured it out... for the most part.

Spoiler: What I'm working on

Astrid Ceral

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.

 

[StoneWolf18]

I've figured it out... for the most part.

Spoiler: What I'm working on

Astrid Ceral

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.

That looks like what you were describing, anything else you wanted to know?

 

[Lady Warlock]

That looks like what you were describing, anything else you wanted to know?

How to shrink the image without making it's shape contort and get all weird.

 

[StoneWolf18]

How to shrink the image without making it's shape contort and get all weird.

You would have to put it in a div with the right about of curve to match the edge.

 

[Lady Warlock]

New question... how do I get the image to sit in the center of it's column? It keeps hugging the left side and I want it to be centered in that space, not closer to the left than the right. I thought margin:auto did that, but it isn't working.

Spoiler: What I'm Working On

Astrid Ceral

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.

Spoiler: Code

[centerblock=93][div=background:url(http://cdn.playbuzz.com/cdn/c994cbb3-fedc-414d-8618-6bb9351afe59/a2cc334d-db23-4bd0-825e-7ea26b040c95.jpg) no-repeat; background-size:cover; padding:10px; border:4px solid #BFBFBF;][h][color=#262D25][font=Petit Formal Script]Astrid Ceral[/font][/color][/h]

[row][column=span3][div=border-color:#BFBFBF; overflow-x:hidden; overflow-y:hidden; margin:auto;][heightrestrict=300][img]https://s-media-cache-ak0.pinimg.com/736x/91/52/6e/91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg[/img][/heightrestrict][/div][/column]
[column=span5][div=background-color:#262D25; color:#BFBFBF; border:2px solid #4E534D; padding:5px; margin:auto; opacity:0.8;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam quam, ultrices vitae nibh nec, rutrum semper mi. Aliquam condimentum magna nisi. Morbi velit quam, tristique a sodales eu, pretium quis lacus. Integer efficitur dictum auctor. Morbi interdum suscipit felis, vel fringilla arcu elementum in. Nulla pellentesque nibh ac nunc bibendum, ac tristique orci auctor. Donec id felis tincidunt, vehicula ante ut, luctus magna. Duis justo ligula, facilisis et risus tristique, efficitur maximus velit. Maecenas id dictum arcu, eget laoreet arcu. Praesent tincidunt semper dui, ac sagittis enim ornare id. Nulla porttitor finibus dolor, eget aliquet leo consequat eget. Suspendisse at augue dignissim, mollis orci eu, venenatis ligula. Ut et nulla a felis molestie viverra ut ac risus. Aenean congue, orci in molestie porta, augue nisi sollicitudin orci, porta elementum mi eros quis lorem.[/div][/column][/row][/div][/centerblock]

 

[Fable]

Margin:auto is for setting a div to center with a specific width, not for columns. You can use the CENTER bbcode tag to center the image.