Shop Mobile More Submit  Join Login
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:
 
:iconz3r0skr13r:
Z3R0SKR13R Featured By Owner Edited Apr 8, 2015  Student Traditional Artist
How do you change the colour of the boxes? Yours are pink. Mine are appearing white.

Edit: Don't worry, I figured it out. XD
Reply
:iconetherealapricity:
EtherealApricity Featured By Owner Apr 20, 2015  Hobbyist General Artist
How did you do it? xD
Reply
:iconkuro-lolita-kitten:
kuro-lolita-kitten Featured By Owner Apr 5, 2015  Hobbyist General Artist
Will his work on deviant ID boxes too?
Reply
:iconleo-cantus:
leo-cantus Featured By Owner Mar 12, 2015
How do you make the smaller boxes less wide? I tried stuff with the < div class="ppppp" > but nothing changed.

( Thank you for these scrolling boxes btw I love them <33 )
Reply
:iconracheru-tan:
racheru-tan Featured By Owner Mar 16, 2015  Student Digital Artist
i guess there's a way, you could add "< div class="pppp" >" (4 p maximum) BEFORE the text outside of the scroll box, before all the "< br >" and stuff.
i did it and it worked for me, the more of these you add, the constrained it gets.
Reply
:iconjessaeclipse:
JessaEclipse Featured By Owner Feb 21, 2015  Hobbyist Digital Artist
Looks great! Thanks! 
Reply
:iconsunsweetsara:
SunSweetSara Featured By Owner Feb 13, 2015  Hobbyist General Artist
Is there a way to have text after a scrolling box without another box up next? I want dividers on the top and bottom of the custom box, but I can't get the divider to appear. I was able to kinda do it but the divider was half covered by the scrolling box and it wouldn't move lower. 
Reply
:iconsunsweetsara:
SunSweetSara Featured By Owner Feb 13, 2015  Hobbyist General Artist
Nevermind, figured it out ^^
Reply
:iconsunsweetsara:
SunSweetSara Featured By Owner Feb 13, 2015  Hobbyist General Artist
This one was tough compared to the others. Thanks for putting all this up, It's been a fun challenge to decorate my profile ^^
Reply
:iconizumikiyomizu:
IzumiKiyomizu Featured By Owner Feb 1, 2015  Student Digital Artist
Hehe, non-premium members be spamming
Reply
:icontrippymarshmallow:
TrippyMarshmallow Featured By Owner Mar 5, 2015  Hobbyist Digital Artist
Such as you?
Reply
:iconpastel-chuu:
pastel-chuu Featured By Owner Edited Jan 24, 2015  Hobbyist Digital Artist
umm im trying to create two scroll boxes on the same widget but i cant get them separated....there's no space between them and no matter what i do i cant fix it. help me?
Reply
:icondisturbeddragon2000:
DisturbedDragon2000 Featured By Owner Jan 21, 2015   Artist
I'm still confused..... I need help
Reply
:iconmidnight3795:
Midnight3795 Featured By Owner Apr 9, 2015  Student Digital Artist
You need to be a Premium Member.
Reply
:iconyvonnehegcat-alicorn:
YvonneHegcat-Alicorn Featured By Owner Jan 4, 2015  Hobbyist Artist
It works perfectly fine with the scrolling, but I wanted to add an background, I know that I have to replace "BACKGROUND IMAGE URL" with the background code, so I tried like 4 times, but it doesn't work causing the whole scrolling part to fail, then I have to restart, Please help me.
Reply
:iconaskmypreciousbabues:
askmypreciousbabues Featured By Owner Jan 3, 2015  Hobbyist General Artist
okay quick question:
how do i make the text white?
i tried doing it with a code i found and put it where it was supposed to go,
but it didnt even show up...
Reply
:iconz3r0skr13r:
Z3R0SKR13R Featured By Owner Apr 7, 2015  Student Traditional Artist
www.deviantart.com/art/Colored…

I dunno if that's the code you used, but I hope it helps you! :D
Reply
:iconxxsepty-chanxx:
xXSepty-ChanXx Featured By Owner Dec 8, 2014  Hobbyist Digital Artist
i dont get this...
Reply
:iconyvonnehegcat-alicorn:
YvonneHegcat-Alicorn Featured By Owner Jan 4, 2015  Hobbyist Artist
Me neither...
Reply
: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
:iconmischievoustr1ckster:
mischievousTr1ckster Featured By Owner Dec 22, 2014  Hobbyist Digital Artist
I know that it works with the scrolling box!
I've gotten it to work with it a long time ago.
Though I'm having a bit of trouble remembering how I did it the last time. x'D
Sorry I'm not much help. ^^; I just thought I'd let you know. (;
Reply
:iconslayer4949:
Slayer4949 Featured By Owner Dec 22, 2014  Student Digital Artist
Ah ok no problem thanks anyway.
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
: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
: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
: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
: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
:iconhoshi-boshi:
Hoshi-Boshi Featured By Owner Jun 13, 2014  Hobbyist Digital Artist
This just displays an empty white box for me...
Reply
:iconsavagedmutt:
SavagedMutt Featured By Owner Jun 5, 2014
Doesn't work..
Reply
:icondaisy-pink71:
Daisy-Pink71 Featured By Owner Apr 13, 2014  Hobbyist Digital Artist
Thank you very much for this very helpful! :hug:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Apr 16, 2014
No problem!
Reply
:iconvinneh-senpai:
Vinneh-Senpai Featured By Owner Apr 8, 2014  Hobbyist Digital Artist
Oh wait nevermind that was the whole point of the tutorial. xD 
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Apr 16, 2014
:giggle:
Reply
Add a Comment:
 
×




Details

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

Stats

Views
27,124 (46 today)
Favourites
1,507 (who?)
Comments
148
Downloads
52
×