What's new

Help Help! New to bbcode and am wondering how to make invisible scrolls

SnuggleThisMuggle

We're All Mad Here!
#1
Code:
[Centerblock=60]
[div=background:url('https://www.solidbackgrounds.com/images/1280x1024/1280x1024-dark-pastel-blue-solid-color-background.jpg');background-size:cover;border:5px #1976d2 double;color: #000000;padding:5px;]
[color=white][h] Trapped: A Disney Roleplay[/h]
[CENTER][size=5][font=Indie Flower]"Say goodbye to your happily ever afters!" -Maleficent[/font][/size][/CENTER][/color]
[div=background:url('https://i.pinimg.com/originals/9b/94/78/9b9478c85c88387859f23529f111955c.jpg ');background-size:cover;]
[scroll=200px]
text








text









text
[/scroll]
[/div]
[/div]
[/Centerblock]

Screenshot_20190222-220244.png

I just don't care for the way the lines look?
 

crucialstar

𝐜'𝐞𝐬𝐭 𝐥𝐚 𝐯𝐢𝐞
#2
here you go ! you'd use this code for hidden scrolls;
in the first div where you see "height: 426px" the number is where you'd change your height, everything will be kept the same !

Code:
[div=width: calc(100% - 0%); height: 426px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;] text here[/div][/div]
edit: so where you have the "scroll" tag in your code, replace it with the two divs ! < 3
 

SnuggleThisMuggle

We're All Mad Here!
#3
here you go ! you'd use this code for hidden scrolls;
in the first div where you see "height: 426px" the number is where you'd change your height, everything will be kept the same !

Code:
[div=width: calc(100% - 0%); height: 426px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;] text here[/div][/div]
edit: so where you have the "scroll" tag in your code, replace it with the two divs ! < 3
Thank you so much!!
 

crucialstar

𝐜'𝐞𝐬𝐭 𝐥𝐚 𝐯𝐢𝐞
#5
since you used a pink background image, you can specific write in a "width" to change the size of that pink bg!
 

crucialstar

𝐜'𝐞𝐬𝐭 𝐥𝐚 𝐯𝐢𝐞
#7
hmmmm,
how much smaller would you like the box to be?
i can work it for you if you'd like ?
when working with divs, the order doesn't matter too much, actually !
however, with reg. bbcode, it's quite wonky in terms of it being in exact placements and all !

and it's not a problem at all !
 

SnuggleThisMuggle

We're All Mad Here!
#8
Just where it isn't right at the edge of the outer Div. I want to be able to make them look appealing.

That would be great. I took a coding class but I've forgotten how it goes.
 

crucialstar

𝐜'𝐞𝐬𝐭 𝐥𝐚 𝐯𝐢𝐞
#9
so you can do it this way with making the "padding: 20px" in the first div you have with the blue background image for more space from the borders:



Trapped: A Disney Roleplay
"Say goodbye to your happily ever afters!" -Maleficent

text here



Code:
[Centerblock=60]
[div=background:url('https://www.solidbackgrounds.com/images/1280x1024/1280x1024-dark-pastel-blue-solid-color-background.jpg');background-size:cover;border:5px #1976d2 double;color: #000000; padding: 20px;]
[color=white][h] Trapped: A Disney Roleplay[/h]
[CENTER][size=5][font=Indie Flower]"Say goodbye to your happily ever afters!" -Maleficent[/font][/size][/CENTER][/color]
[div=background:url('https://i.pinimg.com/originals/9b/94/78/9b9478c85c88387859f23529f111955c.jpg ');background-size:cover; padding: 5px;]
[div=width: calc(100% - 0%); height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;] text here[/div][/div]
[/div][/div][/Centerblock]
or you can do it to where you give the div with pink background image a specific width [ the width tag can go at the end of the div , middle, etc. ] , i also added "margin: auto;" which makes the pink box itself centered !



Trapped: A Disney Roleplay
"Say goodbye to your happily ever afters!" -Maleficent

text here





Code:
[Centerblock=60]
[div=background:url('https://www.solidbackgrounds.com/images/1280x1024/1280x1024-dark-pastel-blue-solid-color-background.jpg');background-size:cover;border:5px #1976d2 double;color: #000000; padding: 5px;]
[color=white][h] Trapped: A Disney Roleplay[/h]
[CENTER][size=5][font=Indie Flower]"Say goodbye to your happily ever afters!" -Maleficent[/font][/size][/CENTER][/color]
[div=background:url('https://i.pinimg.com/originals/9b/94/78/9b9478c85c88387859f23529f111955c.jpg ');background-size:cover; width: 95%; margin: auto; padding: 5px;]
[div=width: calc(100% - 0%); height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%;overflow-y: scroll;] text here[/div][/div]
[/div]
[/div]
[/Centerblock]
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top