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:
 
:icondoodle-of-the-day:
Doodle-of-the-day Featured By Owner Edited Jan 3, 2016  Hobbyist Traditional Artist
FOR THE ONES WHO ARE HAVING TROUBLE WITH THEIR BACKGROUND ( IT BEING TOO SHORT TO FIT IN THE COSTUM BOX)

repeat this part of the code;
<img src="BACKGROUND IMAGE URL">
and paste it  few times in a row with the same image url in it 

And it will repeat itself!
Reply
:iconmizzgenk:
MizzGenK Featured By Owner Jan 3, 2016  Hobbyist General Artist
Could you help with me with the background inside the mini scroll boxes Its pushes the text down instead of going behind it.. I just copy and pasted the img source like it said to do.. 
I'm not code savvy 

Thanks!!
Reply
:icondoodle-of-the-day:
Doodle-of-the-day Featured By Owner Jan 3, 2016  Hobbyist Traditional Artist
oh the mini scroll boxes you say? i haven't tried those out im sorry.
it seems like it only works for the big scroll box.
i sent simplysilent a note about the background of the big scroll box (before i figured it out myself) and she said you could also just make your picture longer by editing it in photoshop
so maybe you could try that?
Reply
:iconmizzgenk:
MizzGenK Featured By Owner Jan 3, 2016  Hobbyist General Artist
Thanks I've almost got it figured it out. 
Thank you for helping me.
Reply
:icondoodle-of-the-day:
Doodle-of-the-day Featured By Owner Feb 2, 2016  Hobbyist Traditional Artist
np! :D
Reply
:icontuanasuccess:
TuanaSuccess Featured By Owner Nov 29, 2015  New Deviant
I'll need this in the future ;)
Reply
:icondontkillthekarma:
dontkillthekarma Featured By Owner Edited Nov 11, 2015  Hobbyist Digital Artist
Hey CR666 maybe this can work for the Stoltzer journal?
Reply
:iconvilluminate:
Villuminate Featured By Owner Nov 12, 2015  Hobbyist General Artist
Agreed, but no premium :(
Reply
:iconririiyu:
Ririiyu Featured By Owner Sep 16, 2015  Hobbyist Digital Artist
omg thank you sooo much ;u ; it worked
Reply
:iconflowers-trash:
flowers-trash Featured By Owner Sep 1, 2015  Hobbyist Digital Artist
o dA life hacks

edit this in featured art on your page when you have core, after your core expires it still will be visible :V
Reply
:iconriicebunnii:
riicebunnii Featured By Owner Aug 4, 2015  Hobbyist Digital Artist
I'm having trouble fitting the scroll boxes in columns.

I want the boxes themselves in a column ; A ;

And I wanted to go all out with using the "Fun with columns" idea ;;A;; but it's not working out.

Do you think you can help me with this?
Reply
:iconaskbubblelee:
AskBubbleLee Featured By Owner Jul 30, 2015  Hobbyist Digital Artist
So what do I do if I just want one smaller scrolling box inside a non-scrolling box?
Reply
:iconvan-swirlz:
Van-Swirlz Featured By Owner Jul 28, 2015  Hobbyist Digital Artist
ill ttryyyy to use
Reply
:iconhoiiythecat:
HoIIyTheCat Featured By Owner Edited Jul 25, 2015  Hobbyist Digital Artist
WHERE'S THE VIDEO TOTORIAL???

no, rly, I'm really confused... How to use this? XD
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 25, 2015
I put this up so long ago, I don't even understand it very well anymore. :XD:

The codes here are for making a scroll box within a larger scrolling widget box (the entire widget is a big scroll box if you look at the preview). If you just want the big scrolling widget box, go for this:

Scrolling Custom Box Widget by SimplySilent
Reply
:iconartsicat:
ArtsiCat Featured By Owner Jul 20, 2015  Hobbyist Digital Artist
This is AWESOME!

I just need to find a use for it... xD
Reply
:iconpurryproductions-inc:
PurryProductions-Inc Featured By Owner Jul 1, 2015  Hobbyist General Artist
thanks so much for this!! :D
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 7, 2015
:thumbsup:
Reply
:icongamerweeb:
gamerweeb Featured By Owner Jun 21, 2015  Hobbyist Digital Artist
Is there a way to get rid of all the extra unneeded space in the custom box itself?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 7, 2015
I believe I tried to do that, but I couldn't get anything to work.
Reply
:icongamerweeb:
gamerweeb Featured By Owner Jul 9, 2015  Hobbyist Digital Artist
Dang. </3
Reply
:iconflowers-trash:
flowers-trash Featured By Owner Sep 1, 2015  Hobbyist Digital Artist
If you meant art above just don't paste anything in img src :)
Reply
:icongamerweeb:
gamerweeb Featured By Owner Sep 1, 2015  Hobbyist Digital Artist
like there's a lot of space in the background custom box :c
Reply
:iconflowers-trash:
flowers-trash Featured By Owner Sep 1, 2015  Hobbyist Digital Artist
THis isn't for bacground look for custom box backgroud code on google ^^i think that this one is for image above :)
Reply
:icongamerweeb:
gamerweeb Featured By Owner Sep 1, 2015  Hobbyist Digital Artist
I'm talking about the space on the "outside" of the custom box

I never had problems until I used this exact coding
Reply
:iconflowers-trash:
flowers-trash Featured By Owner Sep 2, 2015  Hobbyist Digital Artist
Well don't ask me ;_;
Reply
(1 Reply)
:iconishbala-hukheh:
Ishbala-Hukheh Featured By Owner Edited Apr 8, 2015  Student Digital 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
:icondreamersarcadia:
DreamersArcadia Featured By Owner Apr 20, 2015  Hobbyist General Artist
How did you do it? xD
Reply
:iconishbala-hukheh:
Ishbala-Hukheh Featured By Owner May 23, 2015  Student Digital Artist
You make an image of the colour you want, for example, sta.sh/0ysl22sraoj (The one I made for mine)

And you paste it's url in the code where it says "SCROLL BOX IMAGE URL". :D

(Sorry for the super late reply, I havn't been on for over a month. ^^;)
Reply
:iconaskbubblelee:
AskBubbleLee Featured By Owner Jul 30, 2015  Hobbyist Digital Artist
I did that and it came up as a foreground image, not a background image..
Reply
:iconishbala-hukheh:
Ishbala-Hukheh Featured By Owner Aug 1, 2015  Student Digital Artist
Are you sure you pasted it in the correct place? Otherwise, I'm not sure. Sorry.
Reply
:icondreamersarcadia:
DreamersArcadia Featured By Owner May 30, 2015  Hobbyist General Artist
Hnn, thank you so much ;w;

And no no, it's fine! We all have lives to live ^^
Reply
:iconishbala-hukheh:
Ishbala-Hukheh Featured By Owner Jun 5, 2015  Student Digital Artist
Haha yeah true. You're welcome~ ^w^
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
:iconloizu:
loizu 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
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
:iconjessiegarbrick:
Jessiegarbrick Featured By Owner Feb 21, 2015  Hobbyist Digital Artist
Looks great! Thanks! 
Reply
:iconsunsweetsara:
SunSweetSara Featured By Owner Feb 13, 2015
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
Nevermind, figured it out ^^
Reply
:iconsunsweetsara:
SunSweetSara Featured By Owner Feb 13, 2015
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
:iconfloofydragon:
FloofyDragon 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
:iconsvorec:
Svorec Featured By Owner Jan 21, 2015  Student General Artist
I'm still confused..... I need help
Reply
:iconkirbytardos:
KirbyTardos 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
:iconishbala-hukheh:
Ishbala-Hukheh Featured By Owner Apr 7, 2015  Student Digital Artist
www.deviantart.com/art/Colored…

I dunno if that's the code you used, but I hope it helps you! :D
Reply
:iconxxseptgvr-daxx:
xXSeptGvr-dAXx Featured By Owner Dec 8, 2014  Hobbyist Digital Artist
i dont get this...
Reply
Add a Comment:
 
×




Details

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

Stats

Views
38,495 (19 today)
Favourites
2,007 (who?)
Comments
181
Downloads
64
×