Shop More Submit  Join Login
×




Details

Submitted on
August 2, 2013
Image Size
40.2 KB
Resolution
608×662
Link
Thumb
Embed

Stats

Views
15,707 (6 today)
Favourites
1,008 (who?)
Comments
124
Downloads
45
×
Scroll-ception Widgets by SimplySilent Scroll-ception Widgets by SimplySilent
Here's some more scrolling fun! :dummy: Massive thanks again to `fluf-studios for helping figure out the code for scrolling custom boxes! :la:

Custom box background used: fav.me/d58ajco by *Slushey


Scroll-ception Custom Box

To get a scrolling custom box with scroll boxes inside like the preview image, copy and paste the following code.


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="previewbox"><div class="popup2-moremenu"><div class="gr-box gr-genericbox"><div class="popup2-moremenu"><div class="floaty-boat"><br><img src="BACKGROUND IMAGE URL"></div></div><div class="pppp"><div class="pppp"><div class="pppp"><div class="gr-box gr-genericbox">TEXT OUTSIDE SCROLL BOX</div><div class="gr-box gr-genericbox">

<br><br><br><br><div class="previewbox"><div class="floaty-boat"><img src="SCROLL BOX IMAGE URL"></div><div class="gr-box gr-genericbox"><div class="pppp">I'M THE FIRST SCROLL BOX</div></div></div></div><div class="gr-box gr-genericbox">TEXT OUTSIDE SCROLL BOX</div><div class="gr-box gr-genericbox">

<br><br><br><br><div class="previewbox"><div class="floaty-boat"><img src="SCROLL BOX IMAGE URL"></div><div class="gr-box gr-genericbox"><div class="pppp">I'M THE SECOND SCROLL BOX</div></div></div></div><div class="gr-box gr-genericbox">TEXT OUTSIDE</div>



The number of <br> at the beginning of the first chunk of code sets the height of the custom box.
The number of <br> at the beginning of the second chunk of code sets the height of the first scroll box.
The number of <br> at the beginning of the third chunk of code sets the height of the second scroll box.

The number of <div class="pppp"> near the end of the first chunk of code determines the width of the scroll box.



Regular Scroll Box Code

<div class="popup2-moremenu"><div class="floaty-boat">
<img src="BACKGROUND IMAGE URL"></div><div class="gr-box gr-genericbox">TEXT OUTSIDE</div><div class="gr-box gr-genericbox">

<br><br><br><br><div class="previewbox"><div class="floaty-boat"><img src="SCROLL BOX IMAGE URL"></div><div class="gr-box gr-genericbox"><div class="pppp">I'M A SCROLL BOX</div></div></div></div><div class="gr-box gr-genericbox">TEXT OUTSIDE</div>



The number of <br> at the beginning of the second chunk of code sets the height of the scroll box.

To add more scroll boxes, add the following code to the end of your existing code:

<div class="gr-box gr-genericbox">

<br><br><br><br><div class="previewbox"><div class="floaty-boat"><img src="SCROLL BOX IMAGE URL"></div><div class="gr-box gr-genericbox"><div class="pppp">I'M THE FIRST SCROLL BOX</div></div></div></div><div class="gr-box gr-genericbox">TEXT OUTSIDE SCROLL BOX</div>




Inserting Text Between Scroll Boxes

<div class="gr-box gr-genericbox">I'M SOME TEXT</div>



More Scrolling Resources:
Regular Scrolling widgets
Fancy Scroll Box by =TaNa-Jo
Add a Comment:
 
:iconvwv-vwv:
vwv-vwv Featured By Owner Oct 1, 2014  Hobbyist General Artist
Hi! I was wondering if you know how to repeat the background image in the scroll box. Because it ends and turns into a white background. If you could help that would really awesome! <3
Reply
:iconsammi-bishie:
Sammi-Bishie Featured By Owner Sep 23, 2014
I have a question. If I put this code into a custom box button such as these: tana-jo.deviantart.com/art/Sha… , will the scrolling bar show up in the button? 
Reply
:iconbearynn:
bearynn Featured By Owner Aug 26, 2014  Hobbyist General Artist
lmao i want your style scrollception boxes but i dont want the entire box to scroll and ive been trying to figure out how to make it not do that but to no avail. rip
Reply
:iconxelectricwings:
xElectricWings Featured By Owner Aug 24, 2014
Okay, it finally worked for me, but is it possible to change the width of the box too? (since you can change the height)
Reply
Hidden by Commenter
:iconbeestinqs:
beestinqs Featured By Owner Aug 6, 2014  Hobbyist Digital Artist
if you remove every line of <br> in the second chunk of code, will the box be smaller, or stay the same? I'm sure if <br> was necessary for the code to work. :shrug:

And yes, I like small boxes XD
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Aug 6, 2014
I believe it changes the height of the boxes, but that was when I first posted this code. DA could certainly have updated since then.
Reply
:iconyamotea:
Yamotea Featured By Owner Jul 25, 2014  Student Digital Artist
how can i make a scroll box and make it semi transparent?

also, im confused about what i should put in the places where you say I'M A SCROLL BOX :c
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 25, 2014
Try this perhaps? Semi Transparent Content-holder box Tutorial by CypherVisor  

That's where you put the text that you want in the scroll box. Try pasting it into your profile and you'll see what each part means. :)
Reply
:iconyamotea:
Yamotea Featured By Owner Jul 26, 2014  Student Digital Artist
okay i got it! why doesnt it let me put in a back ground? :/
Reply
Add a Comment: