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,069 (1 today)
Favourites
866 (who?)
Comments
115
Downloads
27
×
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:
 
: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
: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
Add a Comment: