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
11,675 (11 today)
Favourites
849 (who?)
Comments
112
Downloads
26
×
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:
 
:iconpokemonsonicgirl123:
pokemonsonicgirl123 Featured By Owner 5 days ago  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 16 hours ago
Close all windows and try again
Reply
:iconpokemonsonicgirl123:
pokemonsonicgirl123 Featured By Owner 16 hours ago  Hobbyist General Artist
Thanks! =D
Reply
:iconxelectricwings:
xElectricWings Featured By Owner 16 hours ago
No Problem :D
I hope it works >w<
But it depends which website you go one I guess..
Reply
:iconpeppermentpanda:
PeppermentPanda Featured By Owner Jun 29, 2014
Question: How can I make my boxes transparent? I've tried with my own transparent bg (31% opacity), but it just shows up as a 100% white box.
Reply
:iconfatherluna:
FatherLuna Featured By Owner Jul 8, 2014  Hobbyist Digital Artist
I'm curious about this too!
Reply
:iconpeppermentpanda:
PeppermentPanda Featured By Owner Jul 8, 2014
I'm still not sure how to make my own transparent boxes, but I found this code:

<*div class="cctextarea disabledbutton" ><*div class="pp" align="center"><*h3>Title<*/h3><*hr><*/hr><*div align="center"><*sub>
Info here

<*/div><*/div><*/div>

It makes a transparent box for you~ But I don't know how to make it scroll still. =< (You can see an example on page under commission info.)
Hope this helps~ :la: Just remove the *s. =>
Reply
:iconfatherluna:
FatherLuna Featured By Owner Jul 8, 2014  Hobbyist Digital Artist
Thank you for sharing this with me! :)
Reply
:iconpeppermentpanda:
PeppermentPanda Featured By Owner Jul 8, 2014
You're welcome! :la:
Reply
:iconpeppermentpanda:
PeppermentPanda Featured By Owner Jun 29, 2014
.. I just spent three hours trying to do this with your original code...
WHY DID I NOT LOOK AT THE REST OF YOUR GALLERY FIRST. LUL. Q^Q
Reply
Add a Comment: