• 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

Thank you so much! This solves everything! :D
thoughtless said:
Cychotic Cychotic ; you're going for something like this right?









.

.


If so, all you need to do is add margin-bottom: -210px; to the div coding for the black bar. The margin is basically the space between one element and another, and so putting the margin in the negatives will make it so the elements go on top of each other. However, this also means that you have to put space at the top of the post, otherwise, the elements might go outside the boundaries and look like this:

Code: 
[centerblock=80]







[div=background:#000000; color:#000000; height: 30px; margin-bottom: -210px].[/div]
[div=padding-top:10px; padding-bottom:0px; margin-left: 20px; border: 2px solid green; background: url(https://image.prntscr.com/image/785a35c1d55d451f8e68e1a4edded9d2.png); background-position: 0% 100%; height: 220px; width:220px; border-radius: 100%; border: 4px solid #ffffff; color:#FEFCD5;].[/div][/centerblock]
Click to expand...
 
zooka said:
Hey,

Can't get my image to stop repeating on my background? I've tried a few things, but apparently I suck.










as sure as night is dark& day is light
​




Here's what I'm using:



Any ideas?
Click to expand...


in the div, after the background:url(image url)

add in "no-repeat;"

so it should look like this:

background:url('https://www.rpnation.com/media/line.25580/full') no-repeat;
 
sorrow made you sorrow made you

1. I love your avatar.

2. That worked! I actually tried "no-repeat" but the semi-colon was in the wrong spot, I guess.

3. Now the image is off center of the text. Change size?
 
zooka said:
sorrow made you sorrow made you

1. I love your avatar.

2. That worked! I actually tried "no-repeat" but the semi-colon was in the wrong spot, I guess.

3. Now the image is off center of the text. Change size?
Click to expand...
Hmmmm....
try adding
background-size:100%;
to the same div?
That'll make it cover the entire area.
 
tumblr_inline_n74sntiFWq1qgqlsq.gif


THANKS!
 
Hi there! Uhm, so I love the invisible scrolling that has been going around, but I find it cuts off content when viewing on mobile devices. Is there any way to make this mobile friendly while keeping its invisible properties? (using the regular scroll tag is a bit of a pain on my designs)

Code: 
[bg=transparent; overflow: hidden; height: 200px; width: 100%; padding: 0px][bg=transparent; height: 200px; width: 100%; overflow:auto ; margin-right: 0px]Curabitur justo nibh, imperdiet id felis dignissim, mollis pellentesque ipsum. Fusce eu purus porta, ultricies urna ut, molestie leo. Nunc accumsan varius pulvinar. In sed erat diam. Vivamus ut tempus elit. Sed sollicitudin facilisis arcu, nec varius tortor volutpat at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at urna eu nisl condimentum ornare. Quisque nec sem vitae odio dapibus dictum ac quis lectus. Aenean euismod faucibus lorem, ac consequat dolor facilisis nec.

Duis vehicula magna non pulvinar venenatis. Cras eros dui, aliquet nec felis a, fringilla ullamcorper mi. Donec congue felis quis erat vehicula, a tempor eros accumsan. Vestibulum dictum, eros at molestie venenatis, lorem lorem pulvinar elit, eget tempus sapien nisl et nibh. Nullam sed mollis arcu. Nulla facilisis id dolor id placerat. Etiam ut tincidunt felis. Duis euismod augue facilisis egestas vehicula. Nullam luctus molestie ex eget pellentesque. Vestibulum et mollis nibh. Proin posuere porttitor enim, ut luctus arcu dignissim a. Fusce a turpis magna. Cras viverra eu nisi vel iaculis. Pellentesque consequat ultricies condimentum. Vestibulum interdum gravida mauris nec dignissim.

Aliquam erat volutpat. Nam consequat fermentum urna, id mollis mi condimentum ac. Mauris maximus fringilla eros quis aliquam. Maecenas ut blandit justo. Praesent viverra sem sit amet ex commodo fermentum. Curabitur ut suscipit dolor, eu vulputate magna. Aenean gravida imperdiet massa, in accumsan est posuere at. Aliquam auctor velit quis justo consequat, eget mollis turpis mattis. Integer ac arcu vitae lacus ornare malesuada id quis quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/bg][/bg]

Curabitur justo nibh, imperdiet id felis dignissim, mollis pellentesque ipsum. Fusce eu purus porta, ultricies urna ut, molestie leo. Nunc accumsan varius pulvinar. In sed erat diam. Vivamus ut tempus elit. Sed sollicitudin facilisis arcu, nec varius tortor volutpat at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean at urna eu nisl condimentum ornare. Quisque nec sem vitae odio dapibus dictum ac quis lectus. Aenean euismod faucibus lorem, ac consequat dolor facilisis nec.

Duis vehicula magna non pulvinar venenatis. Cras eros dui, aliquet nec felis a, fringilla ullamcorper mi. Donec congue felis quis erat vehicula, a tempor eros accumsan. Vestibulum dictum, eros at molestie venenatis, lorem lorem pulvinar elit, eget tempus sapien nisl et nibh. Nullam sed mollis arcu. Nulla facilisis id dolor id placerat. Etiam ut tincidunt felis. Duis euismod augue facilisis egestas vehicula. Nullam luctus molestie ex eget pellentesque. Vestibulum et mollis nibh. Proin posuere porttitor enim, ut luctus arcu dignissim a. Fusce a turpis magna. Cras viverra eu nisi vel iaculis. Pellentesque consequat ultricies condimentum. Vestibulum interdum gravida mauris nec dignissim.

Aliquam erat volutpat. Nam consequat fermentum urna, id mollis mi condimentum ac. Mauris maximus fringilla eros quis aliquam. Maecenas ut blandit justo. Praesent viverra sem sit amet ex commodo fermentum. Curabitur ut suscipit dolor, eu vulputate magna. Aenean gravida imperdiet massa, in accumsan est posuere at. Aliquam auctor velit quis justo consequat, eget mollis turpis mattis. Integer ac arcu vitae lacus ornare malesuada id quis quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


 
Here's an alternative version of the code that does work on mobile (with nothing cut off), but is a little off-center.

Duis convallis rhoncus tellus in porta. Phasellus vitae nisl venenatis, ullamcorper tortor a, pulvinar erat. Sed commodo sollicitudin sapien, non hendrerit mi vehicula commodo. Vivamus eleifend egestas tempus. Vivamus ultrices faucibus nisi, et pellentesque velit posuere mattis. In hac habitasse platea dictumst. Pellentesque ut posuere erat. Donec tristique leo sem, id commodo sem maximus in. Mauris congue cursus nisi, eu luctus ligula mollis eu. Pellentesque ac augue eu ligula ullamcorper lacinia dictum non lectus. Nunc ac sem lorem.

Maecenas fringilla justo sit amet tortor placerat pulvinar nec tempus magna. Aliquam consectetur pretium faucibus. Mauris convallis, tortor vel ullamcorper gravida, lectus ligula accumsan neque, quis varius eros felis in ex. Ut dictum nunc massa, quis accumsan nulla feugiat sed. Nullam vel erat vitae urna mattis interdum. Integer non ultricies erat. Suspendisse mattis pellentesque venenatis. Mauris auctor est pulvinar, euismod dolor eu, convallis libero.


Code: 
[div=width: 300px; height: 300px; overflow: hidden; background: #f1f1f1;][div=
width: calc(100% + 17px); height: calc(100% + 17px); overflow: scroll; box-sizing: border-box; padding: 20px; text-align: justify;]Duis convallis rhoncus tellus in porta. Phasellus vitae nisl venenatis, ullamcorper tortor a, pulvinar erat. Sed commodo sollicitudin sapien, non hendrerit mi vehicula commodo. Vivamus eleifend egestas tempus. Vivamus ultrices faucibus nisi, et pellentesque velit posuere mattis. In hac habitasse platea dictumst. Pellentesque ut posuere erat. Donec tristique leo sem, id commodo sem maximus in. Mauris congue cursus nisi, eu luctus ligula mollis eu. Pellentesque ac augue eu ligula ullamcorper lacinia dictum non lectus. Nunc ac sem lorem.

Maecenas fringilla justo sit amet tortor placerat pulvinar nec tempus magna. Aliquam consectetur pretium faucibus. Mauris convallis, tortor vel ullamcorper gravida, lectus ligula accumsan neque, quis varius eros felis in ex. Ut dictum nunc massa, quis accumsan nulla feugiat sed. Nullam vel erat vitae urna mattis interdum. Integer non ultricies erat. Suspendisse mattis pellentesque venenatis. Mauris auctor est pulvinar, euismod dolor eu, convallis libero.[/div][/div]
 
Last edited:
Actually, instead of putting the padding on the child box, all you have to do is put the padding in the parent box. o: Just make sure you adjust the width/height according to accommodate it (aka, if you want the width/height to be 300 x 300, put it as 280 x 280 instead for a 10px padding). You can use the calc function if you're working with percentages. Just remember that not putting the spacing [calc(50%-20px) vs calc(50% - 20px)] can mean the difference of it working or not.

And yes, this works on mobile w/o weird cut-offs c:

Wild New World (also known as Prehistoric America) is a six-part BBC documentary series about Ice Age America - which discover the prehistory landscape and wildlife from the arrival of humans to the end of the Ice Age. It was first transmitted in the UK on BBC Two from 3 October to 7 November 2002. Like several other BBC programmes, it contains both computer graphics and real life animals. Occasionally, footage of non-American counterparts of the extinct North American beasts (like the American lion and the giant American cheetah) are used in juxtaposition with footage of native American animals, like the pronghorn.

Wild New World was co-produced by the BBC Natural History Unit and Discovery Channel. The music was composed by Barnaby Taylor and performed by the BBC Concert Orchestra. The series was narrated by Jack Fortune and produced by Miles Barton.

The series forms part of the Natural History Unit's Continents strand. It was preceded by Wild Africa in 2001 and followed by Wild Down Under in 2003.




Wild New World (also known as Prehistoric America) is a six-part BBC documentary series about Ice Age America - which discover the prehistory landscape and wildlife from the arrival of humans to the end of the Ice Age. It was first transmitted in the UK on BBC Two from 3 October to 7 November 2002. Like several other BBC programmes, it contains both computer graphics and real life animals. Occasionally, footage of non-American counterparts of the extinct North American beasts (like the American lion and the giant American cheetah) are used in juxtaposition with footage of native American animals, like the pronghorn.

Wild New World was co-produced by the BBC Natural History Unit and Discovery Channel. The music was composed by Barnaby Taylor and performed by the BBC Concert Orchestra. The series was narrated by Jack Fortune and produced by Miles Barton.

The series forms part of the Natural History Unit's Continents strand. It was preceded by Wild Africa in 2001 and followed by Wild Down Under in 2003.



Code: 
[div=position: relative; width: calc(40%  - 20px);height: 180px; overflow: hidden; background-color: #fdf9f7; padding: 10px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; color: gray; font-size: 0.9em; font-align: justify;][font=Poppins]Wild New World (also known as Prehistoric America) is a six-part BBC documentary series about Ice Age America - which discover the prehistory landscape and wildlife from the arrival of humans to the end of the Ice Age. It was first transmitted in the UK on BBC Two from 3 October to 7 November 2002. Like several other BBC programmes, it contains both computer graphics and real life animals. Occasionally, footage of non-American counterparts of the extinct North American beasts (like the American lion and the giant American cheetah) are used in juxtaposition with footage of native American animals, like the pronghorn.

Wild New World was co-produced by the BBC Natural History Unit and Discovery Channel. The music was composed by Barnaby Taylor and performed by the BBC Concert Orchestra. The series was narrated by Jack Fortune and produced by Miles Barton.

The series forms part of the Natural History Unit's Continents strand. It was preceded by Wild Africa in 2001 and followed by Wild Down Under in 2003.[/font][/div][/div]
 
sugarvine said:
Actually, instead of putting the padding on the child box, all you have to do is put the padding in the parent box. o: Just make sure you adjust the width/height according to accommodate it (aka, if you want the width/height to be 300 x 300, put it as 280 x 280 instead for a 10px padding). You can use the calc function if you're working with percentages. Just remember that not putting the spacing [calc(50%-20px) vs calc(50% - 20px)] can mean the difference of it working or not.

And yes, this works on mobile w/o weird cut-offs c:

Wild New World (also known as Prehistoric America) is a six-part BBC documentary series about Ice Age America - which discover the prehistory landscape and wildlife from the arrival of humans to the end of the Ice Age. It was first transmitted in the UK on BBC Two from 3 October to 7 November 2002. Like several other BBC programmes, it contains both computer graphics and real life animals. Occasionally, footage of non-American counterparts of the extinct North American beasts (like the American lion and the giant American cheetah) are used in juxtaposition with footage of native American animals, like the pronghorn.

Wild New World was co-produced by the BBC Natural History Unit and Discovery Channel. The music was composed by Barnaby Taylor and performed by the BBC Concert Orchestra. The series was narrated by Jack Fortune and produced by Miles Barton.

The series forms part of the Natural History Unit's Continents strand. It was preceded by Wild Africa in 2001 and followed by Wild Down Under in 2003.




Wild New World (also known as Prehistoric America) is a six-part BBC documentary series about Ice Age America - which discover the prehistory landscape and wildlife from the arrival of humans to the end of the Ice Age. It was first transmitted in the UK on BBC Two from 3 October to 7 November 2002. Like several other BBC programmes, it contains both computer graphics and real life animals. Occasionally, footage of non-American counterparts of the extinct North American beasts (like the American lion and the giant American cheetah) are used in juxtaposition with footage of native American animals, like the pronghorn.

Wild New World was co-produced by the BBC Natural History Unit and Discovery Channel. The music was composed by Barnaby Taylor and performed by the BBC Concert Orchestra. The series was narrated by Jack Fortune and produced by Miles Barton.

The series forms part of the Natural History Unit's Continents strand. It was preceded by Wild Africa in 2001 and followed by Wild Down Under in 2003.



Code: 
[div=position: relative; width: calc(40%  - 20px);height: 180px; overflow: hidden; background-color: #fdf9f7; padding: 10px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; color: gray; font-size: 0.9em; font-align: justify;][font=Poppins]Wild New World (also known as Prehistoric America) is a six-part BBC documentary series about Ice Age America - which discover the prehistory landscape and wildlife from the arrival of humans to the end of the Ice Age. It was first transmitted in the UK on BBC Two from 3 October to 7 November 2002. Like several other BBC programmes, it contains both computer graphics and real life animals. Occasionally, footage of non-American counterparts of the extinct North American beasts (like the American lion and the giant American cheetah) are used in juxtaposition with footage of native American animals, like the pronghorn.

Wild New World was co-produced by the BBC Natural History Unit and Discovery Channel. The music was composed by Barnaby Taylor and performed by the BBC Concert Orchestra. The series was narrated by Jack Fortune and produced by Miles Barton.

The series forms part of the Natural History Unit's Continents strand. It was preceded by Wild Africa in 2001 and followed by Wild Down Under in 2003.[/font][/div][/div]
Click to expand...

:o Absolute genius. Never thought of that before. Something that could help with adjustability would be adding box-sizing: border-box; to the parent div. This makes it so that the padding (and border, if any) is taken into account by the width/height, so they won't have to be manually adjusted for the padding.
 
IctoraPost IctoraPost
oh right! I forgot box-sizing was a thing. but yeah, I used to do it the weird wonky way too until I realized that putting the padding in the parent div wouldn't make a difference visually, but would make it more cross-compatible.
 
I tried using the interpost jump links but I'm confused. I put in the unique id and everything but it won't work
 
Sorry I meant to ask how you're able to change what the content looks like in the post when using the links.
Like say for example I wanted to have the link go to the personality. How would I have the link go to the same post without having it look like it's default? If that makes any sense at all.

I don't have the exact code that I did before but I remember that I just replaced the URL and the unique id.
Code: 
[bg=transparent; visibility:hidden; padding:0; height:0][fa]whatever[fa]id=oneone[/fa][/fa][/bg]

[URL='https://www.rpnation.com/threads/busans-elite-academy-characters.325433/#oneone"']▲[/URL]
 
How would I get rid of the thin gray border I get every time I use a scroll box?


Bonjour
Mes
Amis


Im trying to use them with div
boxes, but the the thin line kinda ruins things. :(
 
Hi! Does anyone know if there is a way to make two div boxes appear side by side on the same line? I'm a little familiar with html and css coding, but none of the methods that I would use for those work with BBcode (changing display types, floating the objects, etc). It doesn't even have to be two div boxes, two columns would be fine as long as their next to each other.

I scribbled out a layout to kind of show what I mean. Where I put the stars are what I'm trying to figure out how to do. Thanks in advance!

52b90f2ea6709a259a033adf6a496ea0.png
 
InsaneAsylum InsaneAsylum , alternatively, you could just use div boxes to create a scrolli like so;

Bonjour
Mes
Amis

Code: 
[div= max-height: 50px; overflow: auto]
Bonjour
Mes
Amis
[/div]
To do ^that^ all you need to add is a set max-height (which is basically like the px you set for scroll box coding) and also add the overflow: auto tag.



zenguardian zenguardian , to make two div boxes appear side by side on the same line you technically could use columns, but to do so without columns all you need to do is add the float: left tag to both of the div boxes.

Apples
La Pomme


Code: 
[div=border: 1px solid #000000; float: left; width: 400px; margin-right: 10px]Apples[/div][div=border: 1px solid #000000; width: 400px; float: left]La Pomme[/div]
 
b a r i s t a said:
Sorry I meant to ask how you're able to change what the content looks like in the post when using the links.
Like say for example I wanted to have the link go to the personality. How would I have the link go to the same post without having it look like it's default? If that makes any sense at all.

I don't have the exact code that I did before but I remember that I just replaced the URL and the unique id.
Code: 
[bg=transparent; visibility:hidden; padding:0; height:0][fa]whatever[fa]id=oneone[/fa][/fa][/bg]

[URL='https://www.rpnation.com/threads/busans-elite-academy-characters.325433/#oneone"']▲[/URL]
Click to expand...

Do you mean something like this? I'm not exactly sure what you're asking.
 
You must log in or register to reply here.

Users who are viewing this thread

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

Similar threads

Noxxy
Help Bbcode tutor?
Replies
2
Views
77
Ness_eb
Ness_eb
Lumpkinz11
Help SOLVED: ISO Simple BBCode Character Sheet
Replies
2
Views
229
Idea
Idea
DaydreamNarrator
Closed found the solution
Replies
0
Views
154
DaydreamNarrator
DaydreamNarrator
Zariah Turner
Help Tabs??
Replies
2
Views
118
Zariah Turner
Zariah Turner
Back
Top