Shop More Submit  Join Login
×




Details

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

Stats

Views
16,899 (28 today)
Favourites
1,043 (who?)
Comments
125
Downloads
46
×
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:
 
:iconslayer4949:
Slayer4949 Featured By Owner Oct 23, 2014  Student Digital Artist
Thank you for this it makes having content simpler and cleaner.

Just one question though I'm playing around with the code and I was wondering if it was at all possible to make the two boxes seen in this pic scrolling? I've went and used the codes here:
CustomBox Columns tutorial by CypherVisor

but am unsure where to place the coding. You can see the working boxes on my profile and if needed I can send how my code looks.
Reply
: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-arts:
Sammi-Arts 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
Add a Comment: