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:
 
:iconlongestdistance:
longestdistance Featured By Owner 5 days ago  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 2 days ago
: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
:iconfriturik:
Friturik Featured By Owner Aug 4, 2015  Hobbyist General Artist
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 Digital Artist
For the image background of the custom box. 
Reply
:iconfriturik:
Friturik Featured By Owner Aug 7, 2015  Hobbyist General Artist
Mm thanks
Reply
:iconhomoside-jpg:
homoside-jpg Featured By Owner Aug 7, 2015  Hobbyist Digital Artist
Yep!
Reply
:iconfriturik:
Friturik Featured By Owner Aug 7, 2015  Hobbyist General Artist
**
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
:iconxsilvercrownx:
xSilverCrownx Featured By Owner Jul 4, 2015  New Deviant 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  Hobbyist General Artist
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
:iconfaeyriel:
Faeyriel Featured By Owner Apr 4, 2015
LoikiCattt heres one noob
Reply
:iconqrimm:
qrimm Featured By Owner Mar 28, 2015  Student Artist
how do you change the width??
Reply
:iconet1104:
ET1104 Featured By Owner Apr 4, 2015  Student Filmographer
add more <br> XD
Reply
:iconqrimm:
qrimm Featured By Owner Apr 4, 2015  Student Artist
i mean the height
Reply
:iconstxtic:
stxtic Featured By Owner Edited Apr 5, 2015
you take out some of the <br>'s uvu
Reply
:iconjaymeri-kun:
Jaymeri-kun Featured By Owner Mar 14, 2015   General Artist
So I used this code, really useful, however, it scrolls all the way down the pic I used for the background :/
didn't seem to do anything, help?
The background is really really long.
Reply
:iconflltch:
FLlTCH Featured By Owner Mar 21, 2015
you would crop the picture to the size you wanted uvu
Reply
:icononeiri:
ONEIRI Featured By Owner Feb 21, 2015  Student General Artist
Question:D!
How Would I make a page look like this? blazingbacon.deviantart.com/
Really love how it looks!
(Top left box) With an image on the side while there's a custom scroll box.
I just wanna do it for a status box.
Then the rest be scroll boxes with BGs and no pictures on the sides
for other info/stuffs~
Like I have no idea how to (stretch?) the boxes, so it's not small D:
Reply
:iconflltch:
FLlTCH Featured By Owner Mar 22, 2015
i'm just going to take a guess and say you would probably use this
Fun with Columns

i may be wrong so if i am i apologize in advanced
Reply
:icononeiri:
ONEIRI Featured By Owner Mar 22, 2015  Student General Artist
Thanks so much!
Btw, I adore your icon >3<
Reply
:iconflltch:
FLlTCH Featured By Owner Mar 23, 2015
No problem uvu

Thank you
Reply
:iconall-the-amiibos:
all-the-amiibos Featured By Owner Feb 1, 2015  Hobbyist Digital Artist
how do i have multiple ones on one custom box???
Reply
:iconpastel-chuu:
pastel-chuu Featured By Owner Dec 31, 2014  Hobbyist Digital Artist
do you know how to make scroll boxes like the ones here?
sueweetie.deviantart.com/
Reply
:iconifabulicious:
iFabulicious Featured By Owner Jan 23, 2015
i want to know this too.. my head hurts from searching for an answer to this! ><; 
damn
Reply
:iconpastel-chuu:
pastel-chuu Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
yeahh idk ;; i cant figure it out
Reply
:iconifabulicious:
iFabulicious Featured By Owner Jan 24, 2015
i think it kinda worked for me ?
Reply
:iconpastel-chuu:
pastel-chuu Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
oooh how did you do it?
Reply
:iconifabulicious:
iFabulicious Featured By Owner Jan 24, 2015
Used the regular scroll box code  <3
it changed automatically to a grey scroller bar thingie xD 

Scroll-ception Widgets by SimplySilent
Reply
:iconpastel-chuu:
pastel-chuu Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
ummm im terrible at this kind of thing
i used this code before but broke it somehow ;;
idk what to do.........
Reply
:iconifabulicious:
iFabulicious Featured By Owner Jan 24, 2015

<img src="BACKGROUND IMAGE URL">


TEXT OUTSIDE
<br><br><br>

<br
>
<img src="SCROLL BOX IMAGE URL">
I'M A SCROLL BOX
<div


put the code in like this in ur custom widget.

BACKGROUND IMAGE URL: is the background of ur custom widget like mine has dots.
TEXT OUTSIDE: is where i have on my profile put the titles
SCROLL BOX IMAGE URL: i did not change this which keeps it white (do not delete either)
I'M A SCROLL BOX:  this is where you putt the text in that you want in the scroll box c:

hope this helped <3

Reply
(2 Replies)
:iconklo-chan:
Klo-Chan Featured By Owner Dec 23, 2014  Student General Artist
Uhh,right now I'm using this Scrolling Boxes,but the Contect Holder Boxes have become huge,is there any way of reversing it without removing the Scroll Box?
Reply
:iconecho-80:
Echo-80 Featured By Owner Dec 22, 2014  Hobbyist General Artist
Can someone please help me,

I'd like to have a scrolling box with a background but instead of the background moving with the scroll, I'd want it to stay still and the scrolling would only move the text I put in it while taking up the whole custom box as shown in this tutorial. I'm guessing I need to change the <*div class=" text "/> part but to what?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Dec 23, 2014
I think the best way would be to use this scroll box: Scroll-ception Widgets by SimplySilent

Go down in the artwork description to the part that says Regular Scroll box, and try that. :)
Reply
:iconecho-80:
Echo-80 Featured By Owner Dec 23, 2014  Hobbyist General Artist
I tried it and it's not what I was looking for. I wanted it the whole custom box to be a scrolling box but instead of the background moving with the scroller, I want the background to stay still as you scroll and only the text and content to move with the scroll.
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Dec 23, 2014
Ah, I see. As far as I know, that's unfortunately not possible. :hmm:
Reply
:iconecho-80:
Echo-80 Featured By Owner Dec 23, 2014  Hobbyist General Artist
I'm sure it is possible just no one has found the formula to it yet.
Reply
:iconsheeppoops:
SheepPoops Featured By Owner Nov 20, 2014  Student Digital Artist
does anyone know how to put a scroll box on something like this?
sheepymelly.deviantart.com/

But with the background in tact? ;;u;;
Im looking everywhere and just cant figure it out. I see some people do it, but I just cant figure it out!
Reply
:iconthegirlofponiez:
TheGirlOfPoniez Featured By Owner Edited Dec 14, 2014  Hobbyist Digital Artist
You just keep the code for adding the background within the scrolling option!






Reply
:iconsheeppoops:
SheepPoops Featured By Owner Dec 14, 2014  Student Digital Artist
Ah I figured it out haha
but thankyou<3
Reply
Add a Comment:
 
×




Details

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

Stats

Views
34,990 (16 today)
Favourites
1,989 (who?)
Comments
169
Downloads
44
×