Shop Mobile More Submit  Join Login
×




Details

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

Stats

Views
21,101 (27 today)
Favourites
1,239 (who?)
Comments
135
Downloads
47
×
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:
 
:iconpastel-chuu:
pastel-chuu Featured By Owner Edited 3 days ago  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
:iconinsanitydragon2000:
iNSaNiTYDragon2000 Featured By Owner 5 days ago   Artist
I'm still confused..... I need help
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
:iconxxseptemberxx:
xXSeptemberXx 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
:iconvinneh-senpai:
Vinneh-Senpai Featured By Owner Apr 8, 2014  Hobbyist Digital Artist
Thanks for the helpful tutorial~! ^^ 
But do you know how to make just the content holder scroll? Not the Background? (If you know what I mean. xD )
Reply
:iconmonochrome-aki:
Monochrome-Aki Featured By Owner Apr 7, 2014
hey can you helpme?
i wantto makemy profile look all cool and cybernetic
but i just can figure it out
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Apr 7, 2014
Do you have any specific things you need help on? Are you looking for designing tips or coding tips? :)
Reply
:iconmonochrome-aki:
Monochrome-Aki Featured By Owner Apr 7, 2014
well i  wanted to make my profile look all futureistic and stuff with cool backgrounds and such ive seen people have but i cat do it
so i have been looking for someone who might be able to do it for me seeing as i can only do it today for free premium mebership day
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Apr 7, 2014
Ahh, I'm afraid it won't last after today. Even if you prettied up your profile, the codes would all break tomorrow. :hmm:
Reply
:iconmonochrome-aki:
Monochrome-Aki Featured By Owner Apr 7, 2014
awwwwwwww
Reply
:iconkeralice:
Keralice Featured By Owner Mar 30, 2014  Hobbyist Digital Artist
Can we do this with just a white scroll box ? w
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Mar 30, 2014
Yep, I just showed the preview with backgrounds so that people would know that backgrounds are possible. :)
Reply
:iconkeralice:
Keralice Featured By Owner Mar 30, 2014  Hobbyist Digital Artist
Okay, Thanks a lot for the answer and this amazing tutorial ! *^* 
Reply
:icontezayaryu:
Tezayaryu Featured By Owner Feb 11, 2014  Hobbyist General Artist
Eep, can you help me?
I paste the code into the custom box, set the bg and the text, and it covers the entire box with the text in diaginal spots.
Am i dping something wrong? .u.
Reply
:iconlost-our-dreams:
Lost-Our-Dreams Featured By Owner Feb 7, 2014  Student Digital Artist
Is there a way to make the background not scroll?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Feb 8, 2014
Unfortunately not, as far as I know.
Reply
:iconlost-our-dreams:
Lost-Our-Dreams Featured By Owner Feb 8, 2014  Student Digital Artist
or to make a background fill it .-.
Reply
Add a Comment: