• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Tutorial BBCode Assistance Thread

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


how do i make this rounded? or at least, the corners
 
e d e n said:
hi, me again. how do i make rounded headers? like.


how do i make this rounded? or at least, the corners
Click to expand...
I would use a div to do that. A div or border to get something like this:

text


Code: 
[div=border: 4px solid black; color: white; background: black; padding: 5px; border-radius: 10px]text[/div]
 
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...] :O
EDIT2: BUT!!! Can you add footnotes somehow? Thanks for reading my trainwreck of a post.
 
Last edited:
ferociousfeind said:
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...] :O
EDIT2: BUT!!! Can you add footnotes somehow? Thanks for reading my trainwreck of a post.
Click to expand...

What do you mean by footnotes? Couldn't you just write something at the bottom of your post?
 
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.
 
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.
 
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.
 
DaughterofAthena said:
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.
Click to expand...
What are you trying to align? Normally it would either have to do with the margins, padding, or floats.
 
StoneWolf18 said:
What are you trying to align? Normally it would either have to do with the margins, padding, or floats.
Click to expand...
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.
 
DaughterofAthena said:
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.
Click to expand...
Columns and or using multiple divs are your best bet.
 
DaughterofAthena said:
I have tried and I don't know how. That's why I'm asking for help.
Click to expand...
.
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.


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]
 
StoneWolf18 said:
.
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.


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]
Click to expand...
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.
 
DaughterofAthena said:
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.
Click to expand...
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.


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]
 
StoneWolf18 said:
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.


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]
Click to expand...
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.
 
Example that I was going to post up in the other thread, but I'll post it in here:

w92Yuxl.jpeg
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.
 
I've figured it out... for the most part.

Astrid Ceral
91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg
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.
 
DaughterofAthena said:
I've figured it out... for the most part.

Astrid Ceral
91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg
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.
Click to expand...
That looks like what you were describing, anything else you wanted to know?
 
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.

Astrid Ceral
91526e0ca3bcaf4816a555952fe2a572--fantasy-characters-female-characters.jpg
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.
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]
 
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.
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

BloopNoodle
Help Help resizing an image that just… won’t
Replies
8
Views
213
BloopNoodle
BloopNoodle
StardustTroubadour
Help I am looking for a sci-fi template.
Replies
2
Views
137
StardustTroubadour
StardustTroubadour
Back
Top