Shop Mobile More Submit  Join Login
Scrolling Custom Box Widget by SimplySilent Scrolling Custom Box Widget by SimplySilent

Huge thank you to =fluf-studios who helped me figure out this code! :dummy:


To learn how adding a background image to your custom box works, make sure to read =TaNa-Jo's wonderful Custom Box Tutorial. The same sort of concept can be used here.




Scrolling Custom Box Widgets

<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="floaty-boat"><br><img src="IMAGE URL"></div></div><div class="gr-box gr-genericbox"><div class="pp"><div class="pp">CONTENT HERE</div></div></div></div>


To increase or decrease the height of the widget, add or remove <br> from the beginning of the code.

If you insert a custom box background, the content of the widget will match the height of your background, possibly leaving you with a giant awkward gap at the bottom of your widget. For tips to fix this, check out the tutorial linked below.



Scrolling Non-Custom Box Widgets

This method uses the same code but is a little more complex, so I have a tutorial for it here:

Works for any widget that has a text box.
Add a Comment:
 
:iconbloodybae:
BloodyBae Featured By Owner 4 days ago  Student Digital Artist
Do you have a version of the box but without the scrolling?
Reply
:icondanielle-reeves:
Danielle-Reeves Featured By Owner Mar 21, 2016  Student Digital Artist
How do I change the text color? It shows up gray now...
Reply
:iconunluckytalisman:
unluckytalisman Featured By Owner Apr 14, 2016  Hobbyist General Artist
use the codes in the description to change text color
Colored Text (Custom box) - More colors
Reply
:iconcrimson-kaizer:
Crimson-Kaizer Featured By Owner Mar 18, 2016  Hobbyist Writer
I don't understand this....
Reply
:iconroseqalaxy:
Roseqalaxy Featured By Owner Mar 11, 2016
why isn't this working for me??
Reply
:icontitanium-pictus:
Titanium-Pictus Featured By Owner Mar 13, 2016
same
Reply
:iconenekagerou:
EneKagerou Featured By Owner Mar 6, 2016   Artist
what does the image mean for?
Reply
:iconcookiedere:
cookiedere Featured By Owner Mar 7, 2016
You can add a pic to the box, i think.
Reply
:iconenekagerou:
EneKagerou Featured By Owner Mar 7, 2016   Artist
i wonder if it works for floating images..i'll have to check that out.
Reply
:iconechowolf97:
Echowolf97 Featured By Owner Mar 3, 2016  Hobbyist General Artist
How do I use this with my custom box background? :D
Reply
:iconehx-kor:
EhX-KoR Featured By Owner Edited Feb 29, 2016  Student General Artist
so many < br > s
Reply
:iconastralkarma:
AstralKarma Featured By Owner Edited Nov 25, 2015  Student General Artist
Do you know if there's a reason these don't work on Group custom boxes?
These codes work just fine on my own page but when I try to bring it over to the group it doesnt work...
Reply
:iconkairosburning:
KairosBurning Featured By Owner Jan 1, 2016  Student General Artist
If your group isn't a super group codes like this won't work, even if it's in the custom box. 

If your group is indeed a super group? I don't know what to tell you. Hope you get your problem solved! :D
Reply
:iconastralkarma:
AstralKarma Featured By Owner Jan 1, 2016  Student General Artist
Yeah we came to that conclusion. These used to work up until recently, as this hadn't happened before.

Thank you very much for responding though! :)
Reply
:iconkairosburning:
KairosBurning Featured By Owner Jan 1, 2016  Student General Artist
Ahhh gotcha! And no problem ouo/
Reply
:iconk-t-s-u-n:
K-T-S-U-N Featured By Owner Nov 9, 2015  Hobbyist Digital Artist
What do i need to add to my custom box so i wont have to restart the custom box to have a scroller?

((qwq i have too much code in my already custom box so i dont want to have to restart))
Reply
:iconmistdapple:
MistDapple Featured By Owner Edited Nov 5, 2015  Hobbyist Digital Artist
Is there a way to keep the background image frozen in place? ; u ;
Since with this code, the background moves whenever you scroll down

So is there another tutorial or post that shows how to do this?

Thanks! :D
Reply
:iconbrownleaf360:
Brownleaf360 Featured By Owner Oct 26, 2015  Hobbyist
What happens if I just leave the "IMAGE URL" there? Will there be no image?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Oct 27, 2015
Yep. You can get rid of the entire < img > tag if you don't want any image at all.
Reply
:iconpokemonspriter11:
PokemonSpriter11 Featured By Owner Oct 7, 2015  Hobbyist Digital Artist
Heya

I'm having a little trouble. The scroll box is lacking the 'scroll' in it's name ^^;

There doesn't seem to be the bar that you use to scroll it 
Reply
:iconlordstarscreamy:
LordStarsCreamy Featured By Owner Jan 16, 2016  Hobbyist Digital Artist
I have the same problem 0:
Reply
:iconpokemonspriter11:
PokemonSpriter11 Featured By Owner Jan 16, 2016  Hobbyist Digital Artist
I did eventually fix it!
I can't remember how i did it though ^^; Maybe I could send you my code?
Reply
:iconlordstarscreamy:
LordStarsCreamy Featured By Owner Jan 16, 2016  Hobbyist Digital Artist
AH I fixed it too somehow ^^
Reply
:iconbirthdaycakecutie:
BirthdayCakeCutie Featured By Owner Sep 21, 2015  Student Digital Artist
It worked!!Thx for the tutorial!!
Reply
:icondrawing-aizakku:
drawing-aizakku Featured By Owner Sep 20, 2015  Student General Artist
Excuse me, Mademoiselle Silent. I can't seem to find the part of the code to set the alignment of the text... Or am I just blind and can't find it~?  
Reply
:iconsurgerie:
surgerie Featured By Owner Nov 13, 2015
you would insert the code

<divx align="insert alignment here"> ( without the x )

before CONTENT HERE in the code
Reply
:icondrawing-aizakku:
drawing-aizakku Featured By Owner Nov 13, 2015  Student General Artist
Alright, thank you very much!  
Reply
:iconlongestdistance:
longestdistance Featured By Owner Aug 25, 2015  Hobbyist Digital Artist
Great script! I'm really happy with it; it really helps improve the appearance of my page.
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Aug 28, 2015
:thumbsup:
Reply
:iconb-ubbiegum:
B-ubbIegum Featured By Owner Aug 20, 2015  Hobbyist Digital Artist
it doesn't look like here, it is small and i can't make the bg transparent. help??
Reply
:icondemon--days:
Demon--Days Featured By Owner Oct 19, 2015  Student Digital Artist
you need to be premium :0
Reply
:iconb-ubbiegum:
B-ubbIegum Featured By Owner Oct 20, 2015  Hobbyist Digital Artist
umm... this was way before my pm expired, i still had it back then ^^;
Reply
:iconfriturik:
Friturik Featured By Owner Aug 4, 2015
Excuse me but... what I've to put in ''image url''
I mean, what url....?
Reply
:iconhomoside-jpg:
homoside-jpg Featured By Owner Aug 6, 2015  Hobbyist General Artist
For the image background of the custom box. 
Reply
:iconfriturik:
Friturik Featured By Owner Aug 7, 2015
Mm thanks
Reply
:iconhomoside-jpg:
homoside-jpg Featured By Owner Aug 7, 2015  Hobbyist General Artist
Yep!
Reply
:iconfriturik:
Friturik Featured By Owner Aug 7, 2015
**
Reply
:iconamarantheans:
Amarantheans Featured By Owner Jul 16, 2015
:la: thanks for this! Now my information on my main page takes up a lot less space!
Reply
:iconaquehoodie:
AqueHoodie Featured By Owner Jul 6, 2015  Hobbyist Digital Artist
This was a bit confusing , but finally figured it out ! X"D

Thank you so much for the wonderful tutorial SimplySilent  ;;w;;
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 7, 2015
You're welcome! Glad you worked it out.
Reply
:iconlumunous:
lumunous Featured By Owner Jul 4, 2015  Hobbyist General Artist
Can someone please help me with my issue?

So every time I try to add a scroll box into my custom box (with the custom background before the custom box), the custom box takes over the whole "Custom" widget and doesn't show the background of the widget and I was wondering if anyone can please help me? I don't know where I messed up but here are a few more details about what I'm adding into the "Custom" widget:
1. Images
2. Text
3. A custom background
4. Stretching the custom background for the widget.
5. Adding stamps/thumbs.
Reply
:iconacruxic:
Acruxic Featured By Owner Jun 6, 2015  Student Filmographer
I'm having a issue whenever I put my stamps in the scroll box. They seem not to be lining up with each other.
Reply
:iconlacebug:
LaceBug Featured By Owner Edited Jun 16, 2015  Hobbyist Digital Artist
Center them maybe? ;v; I have the same issue with my thumb nails  
<*div align="center*">  take out only the *
Reply
:iconacruxic:
Acruxic Featured By Owner Jun 16, 2015  Student Filmographer
It's alright. I fixed the issue, somehow. XD
Reply
:iconmintz2520:
Mintz2520 Featured By Owner May 9, 2015  Hobbyist General Artist
how do you get more than one box? (I'm trying on my page under To Do, and epic failing at it)
Reply
:icongreen-tae:
green-tae Featured By Owner Edited Jun 17, 2015
paste the code twice, after the <*/div*> parts
Reply
:icononeiri:
ONEIRI Featured By Owner Apr 22, 2015  Student General Artist
How would you increase/decrease the width of a scroll box?
Reply
:icongreen-tae:
green-tae Featured By Owner Jun 17, 2015
To increase or decrease the height of the widget, add or remove
from the beginning of the code.
Reply
:iconart-adopts:
Art-Adopts Featured By Owner Apr 13, 2015
Is there a code that works on deviant ID boxes? I know the actual html code for webpages, but idk if it'll work on dA
Reply
Add a Comment:
 
×





Details

Submitted on
July 31, 2013
Image Size
27.8 KB
Resolution
609×325
Link
Thumb
Embed

Stats

Views
47,033 (40 today)
Favourites
2,505 (who?)
Comments
199
Downloads
57
×