Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

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

Stats

Views
12,992 (2 today)
Favourites
906 (who?)
Comments
118
Downloads
38
×
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:
 
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  New member 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  New member Student Digital Artist
okay i got it! why doesnt it let me put in a back ground? :/
Reply
:iconpokemonsonicgirl123:
pokemonsonicgirl123 Featured By Owner Jul 19, 2014  Hobbyist General Artist
I tried it using an image outside dA, but a window keeps popping up saying "Your settings were not saved because newer settings were found on the server." How do I fix this?
Reply
:iconxelectricwings:
xElectricWings Featured By Owner Jul 24, 2014
Close all windows and try again
Reply
:iconpokemonsonicgirl123:
pokemonsonicgirl123 Featured By Owner Jul 24, 2014  Hobbyist General Artist
Thanks! =D
Reply
:iconxelectricwings:
xElectricWings Featured By Owner Jul 24, 2014
No Problem :D
I hope it works >w<
But it depends which website you go one I guess..
Reply
Add a Comment: